现有问题
现在的问题是点击第二个时间控件，前一个的弹出部分不会自动隐藏，如图所示
vue组件结构大概长这样
<div class="basic_datepicker_contain" v-on:mousedown="datepicker_mousedown($event)">
<input></input>
<div v-show="isShow">
</div>
<div>
isShow控制的是红框部分的显示
隐藏逻辑是这样的
mounted: function() {
var VM = this;
$("body").on("mousedown", function() {//点击空白处
VM.isShow = false;
});
},
methods:{
datepicker_mousedown: function(event) {//input点击事件
var VM = this;
event.stopPropagation();
}
}
原因分析
因为控件中点击阻止冒泡，所以点击其他的日期控件也无法触发body 的mousedown事件，但是要正常显示自身的弹出部分，又不得不阻止冒泡。所以想法是，当除了自身的时间控件点击时，隐藏自身的弹出部分。
解决方案
datepicker_mousedown: function(event) {
var VM = this;
event.stopPropagation();
$('.basic_datepicker_contain')
.not(event.currentTarget)
.off("mousedown")
.on("mousedown", function() {
//点击除了自己的其他日期控件
VM.isShow = false;
});
},
- basic_datepicker_contain 时间控件都是这个类名
- event.currentTarget 获取的是当前组件的DOM节点
- off,on是为了防止重复绑定事件
