Vue2 cube-ui时间选择器详解

极客

　　这篇文章主要为大家介绍了Vue2 cube-ui时间选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

前言
　　vue2 整合 cube-ui 时间选择器(供有点点基础的看)

一、需求及效果

需求
　　我们要在原搜索的情况下，加搜索时间

效果

二、代码实现

index.vue(html)

2. ‹div class="header">
3.       ‹cube-input v-on:focus="showMinPicker('startTime')" v-model="startTime" placeholder="开始时间" :maxlength=30>‹/cube-input>
4.       ‹span>到‹/span>
5.       ‹cube-input v-on:focus="showMinPicker('endTime')" v-model="endTime" placeholder="结束时间" :maxlength=30>‹/cube-input>
6. ‹/div>

复制代码

　　解析：

   

• cube-input cube自带的输入框。   
  
• v-on:focus=“showMinPicker(‘startTime')” v-on监听事件，focus指的是输入框聚焦后触发此事件，如果禁用状态，则不触发。   
  
• v-model 双向绑定(用于时间显示)   
  
• maxlength 最大长度
  

date

2. data () {
3.     return {
4.       // 开始时间
5.       startTime: '',
6.       // 结束时间
7.       endTime: '',
8.       // 时间标识
9.       timeIdentifying: ''
10.     }
11.   }

复制代码

methods

2. methods: {
3.     // 监听出发选择时间
4.     showMinPicker (time) {
5.       if (!this.minPicker) {
6.         this.minPicker = this.$createDatePicker({
7.           title: '选择时间',
8.           visible: true,
9.           // 最小时间
10.           min: new Date(2000, 0, 1),
11.           // 最大时间
12.           max: new Date(2099, 12, 1),
13.           // 当前时间
14.           value: new Date(),
15.           // 显示的格式
16.           format: {
17.             year: 'YYYY',
18.             month: 'MM',
19.             date: 'DD'
20.           },
21.           // 显示多少列
22.           columnCount: 3,
23.           // 选择时间确定后
24.           onSelect: this.selectHandler,
25.           // 选择时间取消后
26.           onCancel: this.cancelHandler
27.         })
28.       }
29.       // 选择时间标识
30.       this.timeIdentifying = time
31.       // 显示
32.       this.minPicker.show()
33.     },
34.     // 选择时间确定后 三个参数是不同的时间格式，可能根据自己需求定
35.     selectHandler (selectedTime, selectedText, formatedTime) {
36.       let time = ''
37.       for (let index = 0; index ‹ selectedText.length; index++) {
38.         if (index === (selectedText.length - 1)) {
39.           time += selectedText[index]
40.         } else {
41.           time += selectedText[index] + '-'
42.         }
43.       }
44.       console.log('开始修改')
45.       if (this.timeIdentifying === 'startTime') {
46.         console.log('修改startTime')
47.         this.startTime = time
48.       } else if (this.timeIdentifying === 'endTime') {
49.         console.log('修改endTime')
50.         this.endTime = time
51.       }
52.       console.log('结束修改')
53.     },
54.     // 取消事件
55.     cancelHandler () {
56.       // 清空选择好的时间
57.       this.startTime = ''
58.       this.endTime = ''
59.     }
60.   }

复制代码

测试效果

三、资料参考

input

TimePicker(时间选择器)

详细在官网地址：

　　官网地址：https://didi.github.io/cube-ui/#/zh-CN

　　Cube-ui中文文档地址：https://www.bookstack.cn/read/Cube-UI-zh/30.md

总结

　　本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

---