vue 日期控件下拉隐藏显示问题

2019-08-07  本文已影响0人  鹿啦啦zz

现有问题

现在的问题是点击第二个时间控件,前一个的弹出部分不会自动隐藏,如图所示


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是为了防止重复绑定事件
上一篇下一篇

猜你喜欢

热点阅读