本文介绍如何分析Vue2cube-ui时间选择器。内容非常详细。感兴趣的朋友可以参考一下，希望对你有所帮助。
00-1010vue2集成的cube-ui时间选择器(用于一点基础)
前言
一、需求及效果
我们需要将搜索时间添加到原始搜索中。
需求
效果
二、代码实现
div class=' header '
cube-input v-on : focus=' showminpicker('开始时间')' v-model='开始时间'占位符='开始时间' 3360 maxlength=30/cube-input
跨度到/跨度
cube-input v-on : focus=' showminpicker('结束时间')' v-model='结束时间'占位符='结束时间' :maxlength=30/cube-input
/解析：分区
多维数据集输入多维数据集附带的输入框。
V-on : focus="showminpicker('开始时间')" V-on侦听事件。焦点是指该事件在输入框被聚焦后被触发。如果禁用，则不会触发。
v型双向绑定(用于时间显示)
最大长度
index.vue(html)
数据(){ 0
返回{
//开始时间
开始时间： ' '，
//结束时间
结束时间： ' '，
//时间标识
时间标识：“”
}
}
date
methods:{
//监控出发选择时间
showMinPicker(时间){ 0
if(！this . MinPicker){ 0
this.minPicker = this.$createDatePicker({
title: '选择时间',
visible: true,
// 最小时间
min: new Date(2000, 0, 1),
// 最大时间
max: new Date(2099, 12, 1),
// 当前时间
value: new Date(),
// 显示的格式
format: {
year: 'YYYY',
month: 'MM',
date: 'DD'
},
// 显示多少列
columnCount: 3,
// 选择时间确定后
onSelect: this.selectHandler,
// 选择时间取消后
onCancel: this.cancelHandler
})
}
// 选择时间标识
this.timeIdentifying = time
// 显示
this.minPicker.show()
},
// 选择时间确定后 三个参数是不同的时间格式，可能根据自己需求定
selectHandler (selectedTime, selectedText, formatedTime) {
let time = ''
for (let index = 0; index < selectedText.length; index++) {
if (index === (selectedText.length - 1)) {
time += selectedText[index]
} else {
time += selectedText[index] + '-'
}
}
console.log('开始修改')
if (this.timeIdentifying === 'startTime') {
console.log('修改startTime')
this.startTime = time
} else if (this.timeIdentifying === 'endTime') {
console.log('修改endTime')
this.endTime = time
}
console.log('结束修改')
},
// 取消事件
cancelHandler () {
// 清空选择好的时间
this.startTime = ''
this.endTime = ''
}
}
测试效果
三、资料参考
input
TimePicker(时间选择器)
关于怎么解析Vue2 cube-ui时间选择器就分享到这里了，希望
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/153806.html
