vue3版本 | vue2版本
clone项目后npm run preview即可
npm i vue-shop-calendar-plus
import vueShopCalendarPlus from "vue-shop-calendar-plus";
import "vue-shop-calendar-plus/index.css";
app.use(vueShopCalendarPlus);
-
--top-active-color
:#db3218;-->顶部按钮触摸颜色 -
--border-color
:#ebeef5;-->表格边框颜色 -
--border-color-s
:transparent;-->表格边框颜色--简易模式 -
--out-width
:90%;-->组件宽度 -
--out-width-s
:100%;-->组件宽度--简易模式 -
--item-height
:85px;-->表格项高度 -
--item-height-s
:22px;-->表格项高度--简易模式 -
--item-active-bg-color
:#d7e8f8;-->表格项触摸颜色 -
--item-active-bg-color-s
:#0068FF;-->表格项触摸颜色--简易模式 -
--today-color
:#b31552;-->今天圈的颜色 -
--rest-clor
:#f39f03;-->本月周末字体颜色 -
--rest-dis-clor
:#fed891;-->非本月周末字体颜色 -
--dis-color
:#c0c4cc;-->非本月非周末字体颜色 -
--diy-work-color
:#f30a0a;-->自定义加班日颜色 -
--diy-rest-color
:#26c629;-->自定义节假日颜色 -
--holiday-color
:#b513e7;-->本月内置节假日颜色 -
--holiday-dis-color
:#b613e74e;-->非本月内置节假日颜色
-
v-model
:绑定当前时间-->String;非必传;默认*''* -
prevMonthIcon
:关闭图标-->Object;非必传;默认*{icon:'<'}*
attrs的值会v-bind到对应dom上
type的值,有以下四种情况
// custom,此时为自定义组件,icon为组件名(!!!未内置,确保当前页面或全局已引入)
// el,此时为el-icon,icon为图标组件名(!!!未内置,确保当前页面或全局已引入)
// iconfont,此时为iconfont,icon为图标去掉icon-后部分(!!!未内置,确保当前页面或全局已引入)
// 其他,此时为本地自定义图标,type为class,icon为内容
-
nextMonthIcon
:关闭图标-->Object;非必传;默认*{icon:'>'}>*
attrs的值会v-bind到对应dom上
type的值,有以下四种情况
// custom,此时为自定义组件,icon为组件名(!!!未内置,确保当前页面或全局已引入)
// el,此时为el-icon,icon为图标组件名(!!!未内置,确保当前页面或全局已引入)
// iconfont,此时为iconfont,icon为图标去掉icon-后部分(!!!未内置,确保当前页面或全局已引入)
// 其他,此时为本地自定义图标,type为class,icon为内容
-
control
:受控模式-->Boolean;非必传;默认false -
simple
:简易模式-->Boolean;非必传;默认false -
i18n
:开启国际化-->Boolean;非必传;默认false -
firstDay
:周首日,校验变量只能是1-7-->Number;非必传;默认1 -
props
:特殊日期键值配置-->Object;非必传;默认*{}*
// 配置项说明
workDayKey:'' // 工作日键值,空值时当普通数组处理
restDayKey:'' // 节假日键值,空值时当普通数组处理
diyDayDayKey:'day' // 自定义节日日期键值
diyDayDesKey:'des' // 自定义节日描述键值
-
hidSolar
:隐藏农历(简易模式不显示)-->Boolean;非必传;默认false -
workDay
:法定加班日(简易模式不显示)-->Array;非必传;默认*[]*
日期的值格式只能为YYYY-MM-DD
-
restDay
:法定休息日(简易模式不显示)-->Array;非必传;默认*[]*
日期的值格式只能为YYYY-MM-DD
-
diyDay
:自定义节日(简易模式不显示)-->Array;非必传;默认*[]*
日期的值格式只能为YYYY-MM-DD
-
@change
:当选中日期改变时触发(受控模式不触发)-->第一个参数返回选中日期的详情,第二个参数返回月组数据的开始和结束时间
-
dateCell
:替换默认展示的自定义节日列表
date:返回当前节点的日期详情
data:返回当前节点的一些判断(当天/选中/周末/在本月)
自定义右键菜单 | 拖拽卡片布局组件 | 可拖拽菜单 | echarts组件 | 基于el-menu的菜单组件 | 面包屑组件 | 滑动拼图 | 工作日历 | 多页签组件 | uEditor | wangEditor | 年密度组件