vue-calendar-component 封装多日期选择组件的实例代码


Posted in Vue.js onDecember 04, 2020

实现效果

vue-calendar-component 封装多日期选择组件的实例代码vue-calendar-component 封装多日期选择组件的实例代码

安装vue-calendar-component日历组件

cnpm i vue-calendar-component --save //国内镜像

引入

import Calendar from "vue-calendar-component";
export default {
  components: { Calendar },
}

封装

<template>
 <div class="x-f">
  <Calendar
   ref="Calendar"
   v-on:choseDay="clickDay"
   :style="{
    height: '4.4rem',
    width: '4rem',
    fontSize: '0.2rem !important',
   }"
  ></Calendar>
  <Calendar
   v-if="multiple"
   ref="Calendar2"
   v-on:choseDay="clickDay2"
   :style="{
    height: '4.4rem',
    width: '4rem',
    fontSize: '0.2rem !important',
   }"
  ></Calendar>
 </div>
</template>
<script>
import { formatDate } from "@/lib/date_fun.js";
import Calendar from "vue-calendar-component";
 
export default {
 components: { Calendar },
 props: {
  value: {
   //v-model双向绑定
   type: String,
   default: () => {
    return "";
   },
  },
  // 是否多选
  multiple: {
   type: Boolean,
   default: () => {
    return true;
   },
  },
  // 两个日期之间的间隔符
  separator: {
   type: String,
   default: () => {
    return "至";
   },
  },
 },
 data() {
  return {
   tap1: false, //日历组件1是否点击选中
   tap2: false, //日历组件2是否点击选中
   rqf: "",
   rqt: "",
  };
 },
 created() {
  //初始化设置日期选中
  this.$nextTick(() => {
   if (this.value.indexOf(this.separator) == -1) {
    this.$refs.Calendar.ChoseMonth(this.value);
   } else {
    this.$refs.Calendar.ChoseMonth(this.value.split(this.separator)[0]);
    this.$refs.Calendar2.ChoseMonth(this.value.split(this.separator)[1]);
   }
  });
 },
 watch: {
  value(date) {
   //监听整个日历组件值,设置选中状态
   this.$nextTick(() => {
    if (date.indexOf(this.separator) > -1) {
     this.$refs.Calendar.ChoseMonth(date.split(this.separator)[0]);
     this.$refs.Calendar2.ChoseMonth(date.split(this.separator)[1]);
    } else {
     this.$refs.Calendar.ChoseMonth(date);
    }
   });
  },
 },
 methods: {
  clickDay(date) {
   //日期1点击事件
   this.tap1 = true;
   this.rqf = formatDate(date);
   this.comit();
  },
  clickDay2(date) {
   //日期2点击事件
   this.tap2 = true;
   this.rqt = formatDate(date);
   this.comit();
  },
  comit() {
   //判断是否多选全部点击选中,或者单选点击选中
   if (this.tap1 && (this.tap2 || !this.multiple)) {
    let mrq = "";
    if (this.multiple) mrq = this.rqf + this.separator + this.rqt;
    //多选赋值格式
    else mrq = this.rqf; //单选赋值格式
    this.$emit("input", mrq); //给v-model赋值;
    //赋值结束,重设点击状态标识
    this.tap1 = false;
    this.tap2 = false;
   }
  },
 },
};
</script>

css样式

/* 日历组件 */
.wh_content_all{
  background-color: #ffffff !important;
}
 
.wh_top_changge li{
  color: rgb(50, 50, 51) !important;
  font-size: 0.18rem !important;
}
 
.wh_jiantou1{
  width: 0.1rem !important;
  height: 0.1rem !important;
  border-top: 2px solid rgb(50, 50, 51) !important;
  border-left: 2px solid rgb(50, 50, 51) !important;
}
 
.wh_jiantou2{
  width: 0.1rem !important;
  height: 0.1rem !important;
  border-top: 2px solid rgb(50, 50, 51) !important;
  border-right: 2px solid rgb(50, 50, 51) !important;
}
 
.wh_top_tag{ 
  font-size: 0.16rem !important;
}
 
.wh_item_date{
   font-size: 0.2rem !important;
}
 
.wh_content_item,
.wh_content_item_tag{
  width: 14.285% !important;
  color: rgb(50, 50, 51) !important;
}
 
.wh_content_item .wh_isToday{
  background: transparent !important;
}
 
.wh_content_item .wh_chose_day{
  background: #ee0a24 !important;
  color: #fff !important;
}
 
.wh_content{
  padding: 0 0.1rem !important;
}
 
.wh_container{
  position: relative;
}
 
.wh_container::after{
  content: '';
  width: 1px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: #dddddd;;
}

页面调用

<template>
  <div class="form-item mt20 x-f">
    <span class="form-label">日期</span>
    <van-popover v-model="showPopover" placement="bottom-end">
     <mCalendar v-model="rq" :multiple="multiple" :separator="separator"/>      
     <template #reference>
       <span class="form-input" @click="showPopover = !showPopover">{{ rq}}</span>
      </template>
     </van-popover>
   </div>
</template>
<script>
  import mCalendar from "@/components/mCalendar.vue";
  import { getNowDate } from '@/lib/date_fun.js'
  
  export default {
    components: { mCalendar },
    data () {
      return {
       showPopover:false,
       rq: getNowDate(),
       multiple: false, //日期是否多选
       separator: '至' //两个日期之间的间隔符
      }
    },
    watch:{
      //日期放生变化是隐藏日历Popover
      rq(){
       this.showPopover = false;
      }
    }
  }
</script>

写的不完善,有待优化

到此这篇关于vue-calendar-component 封装多日期选择组件的文章就介绍到这了,更多相关vue-calendar-component 日期选择组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
详解Vue router路由
Nov 20 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 #Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 #Vue.js
对vue生命周期的深入理解
Dec 03 #Vue.js
用vue设计一个日历表
Dec 03 #Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 #Vue.js
如何实现vue的tree组件
Dec 03 #Vue.js
Vue实现图书管理小案例
Dec 03 #Vue.js
You might like
php强制用户转向www域名的方法
2015/06/19 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
PHP实现的策略模式示例
2019/03/20 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
javascript 节点排序 2
2011/01/31 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python图算法实例分析
2016/08/13 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
python自动生成sql语句的脚本
2021/02/24 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
HTML5图片预览实例分享
2014/06/04 HTML / CSS
档案检查欢迎词
2014/01/13 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
元旦晚会活动总结
2014/07/09 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
信息简报范文
2015/07/21 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
go语言中http超时引发的事故解决
2021/06/02 Golang
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android