InlineCalendar 组件使用教程
优质
小牛编辑
145浏览
2023-12-01
安装
import { InlineCalendar } from 'vux'
export default {
components: {
InlineCalendar
}
}// 在入口文件全局引入
import Vue from 'vue'
import { InlineCalendar } from 'vux'
Vue.component('inline-calendar', InlineCalendar)
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| value | string array | 当前选中日期，使用v-model绑定。值为字符串(包括空字符串)时表示单选日期，为数组(包括空数组)时表示多选。 | -- | |
| render-month | array | 指定渲染日期，如 [2018, 8] | -- | |
| start-date | string | 起始日期，格式为 YYYY-MM-dd | -- | |
| end-date | string | 结束日期，格式为YYYY-MM-dd | -- | |
| show-last-month | boolean | true | 是否显示上个月的日期 | -- |
| show-next-month | boolean | true | 是否显示下个月的日期 | -- |
| highlight-weekend | boolean | false | 是否高亮周末 | -- |
| return-six-rows | boolean | true | 是否总是渲染6行日期 | -- |
| hide-header | boolean | false | 是否隐藏日历头部 | -- |
| hide-week-list | boolean | false | 是否隐藏星期列表 | -- |
| replace-text-list | object | 替换列表，可以将默认的日期换成文字，比如今天的日期替换成今，{'TODAY':'今'} | -- | |
| weeks-list | array | ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] | 星期列表，从周日开始 | -- |
| render-function | function | 用于为特定日期添加额外的html内容，参数为(行index,列index,日期详细属性) | -- | |
| render-on-value-change | boolean | true | 当日期变化时是否重新渲染日历，如果是渲染了多个日历的话需要设为false | -- |
| disable-past | boolean | false | 禁止选择过去的日期，该选项可以与 start-date 同时使用 | -- |
| disable-future | boolean | false | 禁止选择未来的日期，该选项可以 end-date 同时使用 | -- |
| marks | array | (beta) 自定义日期标记 | v2.6.0 | |
| disable-weekend | boolean | false | 是否禁用周六日 | v2.7.0 |
| disable-date-function | function | 自定义标记特定日期是否应该禁用，返回 true 表示禁用，false 表示不禁用，不返回表示和原有逻辑一致(这样不影响和 disable-weekend 等禁用属性同时使用) | v2.7.0 |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-change | -- | 值变化时触发 | -- |
| @on-view-change | (data, index) | 渲染月份变化时触发。初始化时会触发一次，如果不希望处理初始化时的触发，可以检查第二个参数是否为 0 | v2.5.12 |
| @on-select-single-date | (currentValue) | 单选模式下选中日期时触发 | 2.7.6 |
插槽
| 名字 | 说明 | 版本要求 |
| each-day | 用以自定义每一天的显示渲染，推荐使用该 slot 来替代 render-function | v2.3.5 |
方法
| 名字 | 参数 | 说明 | 版本要求 |
| getDates | 获取当前日期列表 | v2.5.11 | |
| switchViewToToday | 渲染当天所在月份 | v2.5.12 | |
| switchViewToMonth | (year, month) | 渲染特定年月日期 | v2.5.12 |
| switchViewToCurrentValue | 渲染当前值所在月份 | v2.5.12 |