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项目利用axios请求接口下载excel
Nov 17 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 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
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
AJAX的使用方法详解
2017/04/29 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
分页栏的web标准实现
2011/11/01 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
python 文件操作api(文件操作函数)
2016/08/28 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
python 将md5转为16字节的方法
2018/05/29 Python
python实现ip代理池功能示例
2019/07/05 Python
python cumsum函数的具体使用
2019/07/29 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
国际商务系学生个人的自我评价
2013/11/26 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
公司股东合作协议书
2014/09/14 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
JavaScript实现简单拖拽效果
2021/09/15 Javascript
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server