如何分析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)

相关推荐

  • 怎么为机器学习工程设计Python接口

    技术怎么为机器学习工程设计Python接口本篇内容主要讲解“怎么为机器学习工程设计Python接口”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么为机器学习工程设计Pyth

    攻略 2021年11月26日
  • 十二节气顺口溜,二十四节气的顺口溜怎么说

    技术十二节气顺口溜,二十四节气的顺口溜怎么说《二十四节气歌》 春雨惊春清谷天十二节气顺口溜,夏满芒夏暑相连, 秋处露秋寒霜降,冬雪雪冬小大寒。 二十四节气,是中国古代人们用来分辨节气的时间及指导农事的一种方法。二十四节气

    生活 2021年10月21日
  • 香港轻量云服务器拥有哪些功能

    技术香港轻量云服务器拥有哪些功能了解轻量云服务器的来龙去脉将使您更容易确定正确的服务类型。下面是我们总结的一些轻量云服务器的功能和用途。1.超高流量网站 如果您管理一个流量超高的网站,轻量云服务器是适合您网站的服务。如果

    礼包 2021年12月9日
  • 如何使用Performance Schema查看Profiling

    技术如何使用Performance Schema查看Profiling小编给大家分享一下如何使用Performance Schema查看Profiling,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!S

    攻略 2021年10月27日
  • CentOS 6.5中如何搭建MySQL集群7.4

    技术CentOS 6.5中如何搭建MySQL集群7.4小编给大家分享一下CentOS 6.5中如何搭建MySQL集群7.4,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!各节点信息如下:管理节点:192.

    攻略 2021年11月15日
  • mysql如何删除唯一约束

    技术mysql如何删除唯一约束本篇内容介绍了“mysql如何删除唯一约束”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!m

    攻略 2021年12月2日