现有问题

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

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