Mint-UI 自定義組件

Mint-UI 自定義組件

不按期更新

TimePicker (時間選擇器)

效果:

TimeRangePicker (時間段選擇器)

這個組件是能夠複用的

屬性

props	做用	類型	默認值
startYear	可選最小年份	Number、String	前20年
endYear	可選最大年份	Number、String	後20年
startText	開始時間 labelText	String	開始時間
endText	結束時間 labelText	String	結束時間
okText	確認按鈕文本	String	確認
cancelText	取消按鈕文本	String	取消
toast	當結束時間早於開始時間的提示	String	結束時間不能早於開始時間
dateUnits	時間單位	Array	['','','']

事件

events	做用
ok	點擊確認時的回調
cancel	點擊取消時的回調

例子

<template>
    <range-picker v-show="showTimePicker" :startYear="new Date().getFullYear()-20" :endYear="new Date().getFullYear()" :dateUnits="['年','月','日']" @ok="onOk" @cancel="hideSelector" >
    </range-picker>
</template>
<script> export default { data(){ return { showTimePicker: false, timeRange: '' } }, methods: { toggleTimePicker() { this.showTimePicker = !this.showTimePicker }, onOk(val) { this.timeRange = `${val[0].replace(/-/ig, '/')}-${val[1].replace(/-/ig, '/')}` this.hideSelector() }, hideSelector() { this.toggleTimePicker() this.show = false } } } </script>
複製代碼

效果

源碼