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用mixin合并重复代码的实现
Nov 27 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
vue使用watch监听属性变化
Apr 30 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
Python实现的视频播放器功能完整示例
2018/02/01 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python 多线程重启方法
2019/02/18 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
爱护草坪标语
2014/06/24 职场文书
旷课检讨书500字
2014/10/14 职场文书
捐资助学感谢信
2015/01/21 职场文书