耀极客论坛

 找回密码
 立即注册
查看: 519|回复: 0

Vue2 cube-ui时间选择器详解

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 01:20:07 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了Vue2 cube-ui时间选择器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

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

一、需求及效果

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

效果






二、代码实现

index.vue(html)
  1. ‹div class="header">
  2.       ‹cube-input v-on:focus="showMinPicker('startTime')" v-model="startTime" placeholder="开始时间" :maxlength=30>‹/cube-input>
  3.       ‹span>到‹/span>
  4.       ‹cube-input v-on:focus="showMinPicker('endTime')" v-model="endTime" placeholder="结束时间" :maxlength=30>‹/cube-input>
  5. ‹/div>
复制代码
  解析:
       
  • cube-input cube自带的输入框。   
  • v-on:focus=“showMinPicker(‘startTime')” v-on监听事件,focus指的是输入框聚焦后触发此事件,如果禁用状态,则不触发。   
  • v-model 双向绑定(用于时间显示)   
  • maxlength 最大长度

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


三、资料参考

input


TimePicker(时间选择器)





详细在官网地址:

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

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

总结

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 18:40 , Processed in 0.069375 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表