0.1.6 • Published 3 years ago
vue-scheduling-calendar v0.1.6
VueSchedulingCalendar
一个用于排班展示的的 vue 日历组件
安装
npm install vue-scheduling-calendar -S
或者
yarn add vue-scheduling-calendar使用
在main.js中引入插件并注册
#main.js
import VueSchedulingCalendar from "vue-scheduling-calendar";
import "vue-scheduling-calendar/dist/vue-scheduling-calendar.css";
Vue.use(VueSchedulingCalendar)
在main.js中引入插件并注册在项目中使用 VueSchedulingCalendar
<template>
<Vue-scheduling-calendar />
</template>参数
| 参数 | 类型 | 必填 | 默认 | 说明 |
|---|---|---|---|---|
| showCalendar | Boolean | false | true | 控制日历是否显示 |
| mainColor | String | false | #148eeb | 主要颜色 |
| showCurrentDate | Boolean | false | true | 是否突出显示默认日期 |
| itemBorderRadius | Boolean | false | true | 日期点击按钮圆角 |
| currentTextColor | String | false | #148eeb | 选中字体颜色 |
| currentBackgroundColor | String | false | "#eaf3fc" | 选中项的背景颜色 |
| dateMonth | String | false | ${new Date().getFullYear()}-${new Date().getMonth() + 1} | 传入的年月 如2021-04-19或者2021/04/19，不传默认当前年月 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| dayClick | 日历按钮点击事件，返回值年月日 YYYY-MM-DD或者YYYY/MM/DD |
slot
| 名称 | 说明 |
|---|---|
| dataItem | 作用域插槽，为每个日历的每一项内容，插槽内容在日期的下面居中展示，组件会给插槽绑定当前的日期内容，插槽内容v-slot:dataItem="slotProps" slotProps.item即为当前循环项，详见example |
| footer | 底部注脚，可插入一些图例之类的 |