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>
复制代码

效果

源码