Mint-UI 自定义组件
不定期更新
TimePicker (时间选择器)
效果:
time-picker.jpg
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>
效果
image
