1.2.0 • Published 1 year ago
vue-shop-calendar v1.2.0
工作日历(vue2版)
vue3版本 | vue2版本
安装
npm i vue-shop-calendar
使用
import vueShopCalendar from 'vue-shop-calendar';
Vue.use(vueShopCalendar);
1. 参数
v-model
:当前选择的日期,双向绑定-->String;非必传;默认当天cname
:自定义class-->String;非必传;默认''i18n
:开启国际化-->Boolean;非必传;默认falsefirstDay
:周首日-->Number;非必传;默认11-7
workDayKey
:法定加班日唯一key-->String;非必传;默认''workDay
:法定加班日-->Array;非必传;默认[]// 日期的数据格式必须为:YYYY-MM-DD // 如果workDayKey未传值或者为空值,对比的直接是item eg:['2021-08-01','2021-08-02'] // 如果workDayKey有传值,对比的是item[workDayKey] eg:[{day:'2021-08-01'},{day:'2021-08-02'}]
restDayKey
:法定休息日唯一key-->String;非必传;默认''restDay
:法定休息日-->Array;非必传;默认[]// 日期的数据格式必须为:YYYY-MM-DD // 如果restDayKey未传值或者为空值,对比的直接是item eg:['2021-08-01','2021-08-02'] // 如果restDayKey有传值,对比的是item[restDayKey] eg:[{day:'2021-08-01'},{day:'2021-08-02'}]
diyDayDayKey
:自定义节日日期唯一key-->String;非必传;默认'day'diyDaySketchKey
:自定义节日简述唯一key-->String;非必传;默认'sketch'diyDay
:自定义节日-->Array;非必传;默认[]// 日期的数据格式必须为:YYYY-MM-DD // 对比日期为item[diyDayDayKey],展示简述为item[diyDaySketchKey] eg:[{day:'2021-08-01',sketch:'111'},{day:'2021-08-01',sketch:'222'}]
@change
:时间改变-->返参如下// 在这个地方向后台获取所有的特殊日期,因为这里有面板中的时间范围,建议用第二个参数作为条件 第一个参数:当前选择日期的详细数据 第二个参数:当前面板的开始日期-结束日期
2. 插槽
<template slot="dateCell" slot-scope="{ date, data }"> {{date}}{{data}} </template>
// 默认情况下插槽会展示自定义节日的内容 // date返回当前单元格的日期属性 // data返回是否为今天、是否被选中两个属性