mint-ui之日期选择器事件
2019-12-04 本文已影响0人
小北呀_
代码如下:
<template>
<div>
<div @click="clickPicker">打开日期选择器</div>
<mt-datetime-picker
v-model="pickerValue"
type="date"
ref="picker"
year-format="{value} 年"
month-format="{value} 月"
@cancel="cancel"
@visible-change="handleValueChange"
@confirm="handleConfirm"></mt-datetime-picker>
</div>
</template>
<script>
export default {
data () {
return {
pickerValue:new Date()
}
},
methods:{
clickPicker() {
this.$refs.picker.open();
// 我只需要年月,所以把日隐藏。
this.$refs.picker.$el.getElementsByClassName('picker-slot')[2].style.display = 'none'
},
/**
* 点击确定触发
* */
handleConfirm(val) {
console.log(val,'confirm')
},
/**
* 打开选择器、点击确定、取消、点击蒙层触发
* */
handleValueChange(val) {
console.log(val,'visible')
},
/**
* 点击取消触发
* */
cancel() {
console.log('cancel')
}
}
}
</script>
<style scoped>
</style>
打开选择器需要触发事件clickPicker。因为我只需要年月,所以把日隐藏。
this.$refs.picker.$el.getElementsByClassName('picker-slot')[2].style.display = 'none'