Vue2 cube-ui時(shí)間選擇器詳解
前言
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)文章
深入淺出 Vue 系列 -- 數(shù)據(jù)劫持實(shí)現(xiàn)原理
深入淺出 Vue 系列 -- 數(shù)據(jù)劫持實(shí)現(xiàn)原理2019-04-04
Vue 微信端掃描二維碼蘋果端卻只能保存圖片問題(解決方法)
這幾天在做項(xiàng)目時(shí)遇到微信掃描二維碼的然后進(jìn)入公眾號(hào)網(wǎng)頁巴拉巴拉的,然后就很順利的遇到了在安卓端掃碼的時(shí)候,順利的一塌糊涂,然后到了蘋果端的時(shí)候,就只能出現(xiàn)一個(gè)保存圖片,然后就寫一下記錄一下這問題的解決方法2020-01-01
vue中動(dòng)態(tài)出來返回的時(shí)間秒數(shù)(在多少秒顯示分、小時(shí)等等)
這篇文章主要給大家介紹了關(guān)于vue中動(dòng)態(tài)出來返回的時(shí)間秒數(shù)(在多少秒顯示分、小時(shí)等等)的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對大家學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
VUE實(shí)現(xiàn)token登錄驗(yàn)證
這篇文章主要為大家介紹了VUE實(shí)現(xiàn)token登錄驗(yàn)證,詳細(xì)記錄實(shí)現(xiàn)token登錄驗(yàn)證的步驟,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
手拉手教你如何處理vue項(xiàng)目中的錯(cuò)誤
在項(xiàng)目開發(fā)中經(jīng)常遇到各種報(bào)錯(cuò),每次總是通過這樣或那樣的辦法解決掉,這篇文章主要給大家介紹了關(guān)于如何處理vue項(xiàng)目中錯(cuò)誤的相關(guān)資料,需要的朋友可以參考下2022-06-06

