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

相关推荐

  • 我的青春色彩作文800,我的青春一路花香作文。800字

    技术我的青春色彩作文800,我的青春一路花香作文。800字一路花香如果说生命只是一个不能重复的花季,那搏动的心便是一朵永不凋零的春花我的青春色彩作文800。早春二月,乍暖还寒之时,鹅黄隐约,新绿悄绽,昭示着生命的勃勃,那

    生活 2021年10月27日
  • mysql如何查询前10条记录

    技术mysql如何查询前10条记录本篇内容主要讲解“mysql如何查询前10条记录”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“mysql如何查询前10条记录”吧!

    攻略 2021年12月2日
  • SAP GUI里Screen Painter的工作原理是什么

    技术SAP GUI里Screen Painter的工作原理是什么今天就跟大家聊聊有关SAP GUI里Screen Painter的工作原理是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大

    攻略 2021年12月3日
  • 如何修改交易代码SE16中的结果集

    技术怎么实现事务码SE16里的结果集修改怎么实现事务码SE16里的结果集修改,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。注: 这种方法不同

    攻略 2021年12月18日
  • mysql如何解决幻读(mysql2003错误如何解决)

    技术mysql 5.7如何解决忘记密码问题小编给大家分享一下mysql 5.7如何解决忘记密码问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! mysql5.7忘记密码的解

    攻略 2021年12月16日
  • Python如何处理图像特效

    技术Python如何处理图像特效这篇文章主要为大家展示了“Python如何处理图像特效”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Python如何处理图像特效”这篇文章吧。

    攻略 2021年11月24日