vue-shop-calendar
工作日历(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;非必传;默认false -
firstDay
:周首日-->Number;非必传;默认1
1-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返回是否为今天、是否被选中两个属性
Dependencies
babel-core: ^6.26.0babel-helper-vue-jsx-merge-props: ^2.0.3babel-loader: ^7.1.2babel-plugin-syntax-jsx: ^6.18.0babel-plugin-transform-runtime: ^6.22.0babel-plugin-transform-vue-jsx: ^3.7.0babel-polyfill: ^6.26.0babel-preset-env: ^1.6.0babel-preset-stage-2: ^6.24.1cross-env: ^5.0.5css-loader: ^0.28.7uglifyjs-webpack-plugin: ^1.1.1url-loader: ^4.1.1vue: ^2.5.11vue-loader: ^13.0.5vue-style-loader: ^3.0.1vue-template-compiler: ^2.4.4webpack: ^3.6.0webpack-dev-server: ^2.9.1