亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue2 cube-ui時(shí)間選擇器詳解

 更新時(shí)間:2021年12月20日 16:56:47   作者:貝塔-突突  
這篇文章主要為大家介紹了Vue2 cube-ui時(shí)間選擇器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助

前言

vue2 整合 cube-ui 時(shí)間選擇器(供有點(diǎn)點(diǎn)基礎(chǔ)的看)

一、需求及效果

需求

我們要在原搜索的情況下,加搜索時(shí)間

效果

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

二、代碼實(shí)現(xiàn)

index.vue(html)

<div class="header">
      <cube-input v-on:focus="showMinPicker('startTime')" v-model="startTime" placeholder="開始時(shí)間" :maxlength=30 style="width: 50%;"></cube-input>
      <span>到</span>
      <cube-input v-on:focus="showMinPicker('endTime')" v-model="endTime" placeholder="結(jié)束時(shí)間" :maxlength=30 style="width: 50%;"></cube-input>
</div>

解析:

  • cube-input cube自帶的輸入框。
  • v-on:focus=“showMinPicker(‘startTime')” v-on監(jiān)聽事件,focus指的是輸入框聚焦后觸發(fā)此事件,如果禁用狀態(tài),則不觸發(fā)。
  • v-model 雙向綁定(用于時(shí)間顯示)
  • maxlength 最大長度

date

data () {
    return {
      // 開始時(shí)間
      startTime: '',
      // 結(jié)束時(shí)間
      endTime: '',
      // 時(shí)間標(biāo)識(shí)
      timeIdentifying: ''
    }
  }

methods

methods: {
    // 監(jiān)聽出發(fā)選擇時(shí)間
    showMinPicker (time) {
      if (!this.minPicker) {
        this.minPicker = this.$createDatePicker({
          title: '選擇時(shí)間',
          visible: true,
          // 最小時(shí)間
          min: new Date(2000, 0, 1),
          // 最大時(shí)間
          max: new Date(2099, 12, 1),
          // 當(dāng)前時(shí)間
          value: new Date(),
          // 顯示的格式
          format: {
            year: 'YYYY',
            month: 'MM',
            date: 'DD'
          },
          // 顯示多少列
          columnCount: 3,
          // 選擇時(shí)間確定后
          onSelect: this.selectHandler,
          // 選擇時(shí)間取消后
          onCancel: this.cancelHandler
        })
      }
      // 選擇時(shí)間標(biāo)識(shí)
      this.timeIdentifying = time
      // 顯示
      this.minPicker.show()
    },
    // 選擇時(shí)間確定后 三個(gè)參數(shù)是不同的時(shí)間格式,可能根據(jù)自己需求定
    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('結(jié)束修改')
    },
    // 取消事件
    cancelHandler () {
      // 清空選擇好的時(shí)間
      this.startTime = ''
      this.endTime = ''
    }
  }

測試效果

在這里插入圖片描述

三、資料參考

input

在這里插入圖片描述

TimePicker(時(shí)間選擇器)

在這里插入圖片描述

在這里插入圖片描述

詳細(xì)在官網(wǎng)地址:

官網(wǎng)地址:https://didi.github.io/cube-ui/#/zh-CN

Cube-ui中文文檔地址:https://www.bookstack.cn/read/Cube-UI-zh/30.md

總結(jié)

本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

最新評論