task(任务)
将el-date-picker根据业务需求封装为自己的base-date-picker控件, 封装的控件对外也要可以通过v-model綁值
situation(情景 or 问题)
其它控件,比如select, 可以通过
<el-select :value="value" @change="emit('change',$event)"></el-select>
实现v-model的双重绑定
但是调用el-date-picker组件时, 使用:value="value"却没有办法给value赋值,也不走change事件,只能通过v-model赋值.
action(行动 or 解决方案)
因为具体原因也不是很确定, 扒了一下源码可能跟pickerVisible这个属性有关, date-picker内部更多的是emit了 blur事件, change事件走的并不多.
Anyway, 用了一个取巧的办法解决了:
思路: el-date-picker还是绑定v-model, @change的时候对外提交this.model
<el-date-picker v-model="model" @change="handleChange"></el-date-picker>
<script>
export default {
methods:{
handleChange(){
this.$emit('change', this.model)
}
}
}
</script>
回显暂时用不到,先不实现了
网友评论