Calendar 组件使用教程
优质
小牛编辑
160浏览
2023-12-01
安装
import { Calendar } from 'vux'
export default {
components: {
Calendar
}
}
// 在入口文件全局引入
import Vue from 'vue'
import { Calendar } from 'vux'
Vue.component('calendar', Calendar)
<group>
<calendar title="title" v-model="value"></calendar>
</group>
calendar
只能在Group
中使用
除了title
和 value
, 其他props
和inline-calendar
完全一致。
当绑定值为数组时,日历将为多选模式
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
value | string | 表单值, v-model 绑定。当值为空时,为单选;当值为[]时,为多选;设置值为'TODAY'可快捷选取当前日期。placeholder 只有在值为空或[]时显示。 | -- | |
title | string | label文字 | -- | |
placeholder | string | 占位提示文字 | -- | |
show-popup-header | boolean | 是否显示弹窗头部,当为多选时强制显示,单选时默认不显示 | v2.6.0 | |
popup-header-title | string | 弹窗头部文字 | v2.6.0 | |
display-format | function | 格式化显示值 | v2.6.4 | |
readonly | string | 是否禁用弹窗选择 | v2.7.2 |
事件
名字 | 参数 | 说明 | 版本要求 |
@on-change | (value) | 值改变时触发 | -- |
@on-show | -- | 弹窗显示时触发 | -- |
@on-hide | -- | 弹窗关闭时触发 | -- |
样式变量
名字 | 默认值 | 说明 | 继承自变量 |
@calendar-arrow-color | #04BE02 | 前进后退的箭头颜色 | @theme-color |
@calendar-highlight-color | #E59313 | 周末高亮的文本颜色 | |
@calendar-selected-bg-color | #04BE02 | 选中时的背景颜色 | @theme-color |
@calendar-disabled-font-color | #c0c0c0 | 禁用时的文本颜色 | |
@calendar-today-font-color | #04BE02 | 今天的文本颜色 | @theme-color |
@calendar-date-item-font-size | 16px | 单元格的字号 | |
@calendar-bg-color | #fff | 背景颜色 | |
@calendar-each-date-item-size | 26px | 日期单元格尺寸大小 | |
@calendar-each-date-item-line-height | 25px | 日期单元格的行高 | |
@calendar-header-day-item-color | #000 | 头部的文本颜色 |