如何分析Vue2cube-ui时间选择器

技术怎么解析Vue2 cube-ui时间选择器这篇文章给大家介绍怎么解析Vue2 cube-ui时间选择器,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。前言vue2 整合 cube-ui 时间选择器

本文介绍如何分析Vue2cube-ui时间选择器。内容非常详细。感兴趣的朋友可以参考一下,希望对你有所帮助。

00-1010vue2集成的cube-ui时间选择器(用于一点基础)

前言

一、需求及效果

我们需要将搜索时间添加到原始搜索中。

需求

怎么解析Vue2cube-ui时间选择器

怎么解析Vue2cube-ui时间选择器

怎么解析Vue2cube-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 = ''
    }
  }

测试效果

怎么解析Vue2 cube-ui时间选择器

三、资料参考

input

怎么解析Vue2 cube-ui时间选择器

TimePicker(时间选择器)

怎么解析Vue2 cube-ui时间选择器

怎么解析Vue2 cube-ui时间选择器

关于怎么解析Vue2 cube-ui时间选择器就分享到这里了,希望

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/153806.html

(0)

相关推荐

  • shampoo是什么意思中文翻译,硫磺皂的翻译是:什么意思

    技术shampoo是什么意思中文翻译,硫磺皂的翻译是:什么意思sulfur soap硫磺皂、硫化皂例句shampoo是什么意思中文翻译:1. Wash the hair with shampoo or sulfur so

    生活 2021年10月29日
  • ceph application not enabled 的解决方法

    技术ceph application not enabled 的解决方法 ceph application not enabled 的解决方法ceph application not enabled 的

    礼包 2021年11月9日
  • ajax为什么提示返回error(ajax error是什么意思)

    技术ajax中error该如何使用ajax中error该如何使用,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。error使用情况:1、当后台返回的dataT

    攻略 2021年12月23日
  • jointJS怎么用

    技术jointJS怎么用这篇文章主要为大家展示了“jointJS怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jointJS怎么用”这篇文章吧。最近由于项目需要,开始接

    攻略 2021年11月16日
  • 竹石的写作背景,《竹石》的写作背景和赏析

    技术竹石的写作背景,《竹石》的写作背景和赏析【赏析】 这是一首是在竹石图上的题画诗竹石的写作背景,作者咏的是竹石,但已不是对自然界竹石的一般描写,而是蕴含了作者深刻的思想感情。作者以物喻人,实写竹子,赞颂的却是人。诗人屹

    生活 2021年10月21日
  • 怎么解决数据库查询非常慢问题

    技术怎么解决数据库查询非常慢问题本篇内容主要讲解“怎么解决数据库查询非常慢问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么解决数据库查询非常慢问题”吧!一、cpu lo

    攻略 2021年11月16日