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项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
Vue深入理解插槽slot的使用
Aug 05 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
什么是短波收听SWL
2021/03/01 无线电
有关PHP中MVC的开发经验分享
2012/05/17 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
JS 面向对象之神奇的prototype
2011/02/26 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
微信小程序云开发之使用云函数
2019/05/17 Javascript
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Scrapy的简单使用教程
2017/10/24 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
python suds访问webservice服务实现
2020/06/26 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
UGG英国官方网站:UGG UK
2018/02/08 全球购物
介绍一下EJB的体系结构
2012/08/01 面试题
物流管理毕业生自荐信范文
2014/03/15 职场文书
大学生个人求职信
2014/06/02 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
护士工作心得体会
2016/01/25 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
Java 关于String字符串原理上的问题
2022/04/07 Java/Android
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle