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

相关推荐

  • linux 搭载yum私有仓库

    技术linux 搭载yum私有仓库 linux 搭载yum私有仓库yum私有仓库本地版
    @目录yum私有仓库本地版1.下载必须的软件包2.创建软件仓库3.下载对应的软件yum私有仓库本地版插图1)4.初

    礼包 2021年12月17日
  • PHP TronTool开发包有哪些特性

    技术PHP TronTool开发包有哪些特性本篇内容主要讲解“PHP TronTool开发包有哪些特性”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“PHP TronTool开

    攻略 2021年11月26日
  • 在IDEA中如何部署一个简单的考勤补签功能

    技术在IDEA中如何部署一个简单的考勤补签功能这篇文章主要介绍了在IDEA中如何部署一个简单的考勤补签功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 

    攻略 2021年11月24日
  • 如何优化wpf性能

    技术如何优化wpf性能这篇文章主要介绍了如何优化wpf性能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1,布局 时候能用Canvas尽量用Canvas。

    攻略 2021年11月23日
  • vscode怎样引入vuejs框架

    技术vscode怎样引入vuejs框架今天就跟大家聊聊有关vscode怎样引入vuejs框架,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。vscode引入vuej

    攻略 2021年11月2日
  • vue+elementui如何实现下拉表格多选和搜索功能

    技术vue+elementui如何实现下拉表格多选和搜索功能这篇文章主要介绍“vue+elementui如何实现下拉表格多选和搜索功能”,在日常操作中,相信很多人在vue+elementui如何实现下拉表格多选和搜索功能

    攻略 2021年11月26日