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'
上一篇 下一篇

猜你喜欢

热点阅读