Vue2 cube-ui时间选择器详解

目录

• 前言
• 一、需求及效果
• 需求
• 效果
• 二、代码实现
• index.vue(html)
• date
• methods
• 测试效果
• 三、资料参考
• input
• timepicker(时间选择器)
• 详细在官网地址：
• 总结

前言

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

一、需求及效果

需求

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

效果

二、代码实现

index.vue(html)

<div class="header">
      <cube-input v-on:focus="showminpicker('starttime')" v-model="starttime" placeholder="开始时间" :maxlength=30 style="width: 50%;"></cube-input>
      <span>到</span>
      <cube-input v-on:focus="showminpicker('endtime')" v-model="endtime" placeholder="结束时间" :maxlength=30 style="width: 50%;"></cube-input>
</div>

解析：

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

date

data () {
    return {
      // 开始时间
      starttime: '',
      // 结束时间
      endtime: '',
      // 时间标识
      timeidentifying: ''
    }
  }

methods

methods: {
    // 监听出发选择时间
    showminpicker (time) {
      if (!this.minpicker) {
        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(时间选择器)

详细在官网地址：

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

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

总结

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