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 element实现表格合并行数据
Nov 30 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
详解vue身份认证管理和租户管理
May 25 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设计模式之代理模式的深入解析
2013/06/13 PHP
PHP修改session_id示例代码
2014/01/08 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
简单的js表单验证函数
2013/10/28 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
javascript实现连续赋值
2015/08/10 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
vue监听scroll的坑的解决方法
2017/09/07 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
Django实现celery定时任务过程解析
2020/04/21 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
C#实现启动一个进程
2016/10/01 面试题
英语硕士生求职简历的自我评价
2013/10/15 职场文书
劳动模范事迹材料
2014/01/19 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js