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>
複製程式碼

效果

原始碼