Datetime 组件使用教程
优质
小牛编辑
145浏览
2023-12-01
安装
import { Datetime } from 'vux'
export default {
components: {
Datetime
}
}// 在入口文件全局引入
import Vue from 'vue'
import { Datetime } from 'vux'
Vue.component('datetime', Datetime)
需要在Group组件里使用
该组件支持以plugin形式调用：
// 以 plugin 形式使用时，请在入口处引入：
import { DatetimePlugin } from 'vux'
Vue.use(DatetimePlugin)
// 组件内使用
this.$vux.datetime.show({
value: '', // 其他参数同 props
onHide () {
const _this = this
},
onShow () {
const _this = this
}
})
this.$vux.datetime.hide()
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| format | string | YYYY-MM-DD | 时间格式，不支持特殊字符，只能类似 YYYY-MM-DD HH:mm 这样的格式（不支持秒 ss）, 另外支持 YYYY-MM-DD A 这样的格式(A为上下午) | -- |
| title | string | 标题 | -- | |
| value | string | 表单值，v-model绑定 | -- | |
| inline-desc | string | 描述字符 | -- | |
| placeholder | string | 提示文字，当value为空时显示 | -- | |
| min-year | number | 可选择的最小年份 | -- | |
| max-year | number | 可选择的最大年份 | -- | |
| min-hour | number | 0 | 限定小时最小值 | -- |
| max-hour | number | 23 | 限定小时最大值 | -- |
| confirm-text | string | ok(确认) | 确认按钮文字 | -- |
| cancel-text | string | cancel(取消) | 取消按钮文字 | -- |
| clear-text | string | 显示在中间的自定义按钮的文字 | -- | |
| year-row | string | {value} | 年份的渲染模板 | -- |
| month-row | string | {value} | 月份的渲染模板 | -- |
| day-row | string | {value} | 日期的渲染模板 | -- |
| hour-row | string | {value} | 小时的渲染模板 | -- |
| minute-row | string | {value} | 分钟的渲染模板 | -- |
| start-date | string | 限定最小日期，格式必须为 YYYY-MM-DD，注意该限制只能限定到日期，不能限定到小时分钟。小时限定请使用min-hour和max-hour | -- | |
| end-date | string | 限定最大日期，格式必须为 YYYY-MM-DD，注意该限制只能限定到日期，不能限定到小时分钟 | -- | |
| required | boolean | false | 是否必填 | -- |
| display-format | function | 自定义显示值 | v2.1.1-rc.11 | |
| readonly | string | 只读模式，显示类似于 cell | v2.3.6 | |
| show | boolean | 控制显示，要求 vue^2.3 | v2.3.7 | |
| minute-list | array | 定义分钟列表，比如 ['00', '15', '30', '45'] | v2.3.7 | |
| hour-list | array | 定义小时列表，比如 ['09', '10', '11', '12'] | v2.3.7 | |
| default-selected-value | string | 设置默认选中日期，当前 value 为空时有效 | v2.4.1 | |
| compute-hours-function | function | 动态设置小时列表，参数为 (value, isToday, generateRange) | v2.5.5 | |
| compute-days-function | function | 动态设置日期列表，参数为 ({year, month, min, max}, generateRange) | v2.6.1 | |
| order-map | object | 自定义列顺序, 如 {year: 1, month: 2, day: 3, hour: 4, minute: 5, noon: 6} | v2.9.0 |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-change | (value) | 表单值变化时触发, 参数 (newVal) | -- |
| @on-clear | -- | 点击显示在中间的自定义按钮时触发 | -- |
| @on-show | -- | 弹窗显示时触发 | -- |
| @on-hide | (type), type is one of [cancel, confirm] | 弹窗关闭时触发 | v2.7.4 |
| @on-cancel | -- | 点击取消按钮或者遮罩时触发，等同于事件 on-hide(cancel) | v2.7.4 |
| @on-confirm | (value) v2.9.0 支持该参数 | 点击确定按钮时触发，等同于事件 on-hide(confirm) | v2.7.4 |
插槽
| 名字 | 说明 | 版本要求 |
| 默认插槽 | 触发元素内容 | -- |
| title | title slot | v2.3.6 |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @datetime-header-item-font-color | #04BE02 | -- | @theme-color |
| @datetime-header-item-cancel-font-color | #828282 | -- | |
| @datetime-header-item-confirm-font-color | #04BE02 | -- | @datetime-header-item-font-color |
重要提示及已知问题
- Q是否支持秒(ss)
不支持，目前常用需求场景并没有需要精确到秒。
- Qon-confirm 事件获取不到正确的值
在
v2.9.0之前 on-confirm 不会附带当前值参数，你需要在this.$nextTick后获取。 相关 issue: #2632