1.1.2 • Published 5 years ago
ow-calendar v1.1.2
ow-calendar
安装
NPM
npm i ow-calendar -SYARN
yarn add ow-calendear使用方法
全局引用
import Vue from 'vue';
import owCalendar from 'ow-calendar';
Vue.use(owCalendar);组件内引用
在组件内
import owCalendar from 'ow-calendar/src/lib/ow-calendar';export default {
components: {
owCalendar,
},
};Api
props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| show-month-numbers | 要展示多少个月份 | Number, String | 12 |
| start-date | 开始的日期 | Date | 今天 |
| disabled-date | 不可选的日期 | Array | 无 |
| multiple | 开启多选模式 | Boolean | false |
| transition | 过渡效果 | String | pop-fade |
| need-choice-days | 至少选择的天数,与 multiple 配合使用 | Number,String | 0 |
| max-choice-days | 最多选择天数,与 multiple 配合使用 | Number,String | 15 |
| info-text | 提示文案,与 need-choice-days 配合使用 | String | 当选择的日期小于 need-choice-days 所设置时:文案显示:请至少选择 needChoiceDays 天 needChoiceDays - 1 晚当选择的日期大于等于 need-choice-days 所设置时:无文案 |
| format-type | 显示的日期格式 | yyyy/MM/dd ps:月份需要大写 |
Event:
| 事件名 | 说明 | 返回值 |
|---|---|---|
| confirm | 点击保存时触发 | 单选模式下:只有一个 Date;多选模式下: 开始时间,结束时间,选择的天数 |
| multiple-choice-end | 选完第二个日期时触发(可在此处修改 info-text) | 同上 |
| close | 弹窗关闭时触发 | 无 |
DEMO 演示
本地预览
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build