element-ui DatePicker 点击外部取消下拉框

记录项目遇到的问题： 1：DatePicker 时间选择器，官网没有具体实例，以下是项目具体用法：

template中的code:

<el-date-picker
ref="datePicker" 
class="dateTest"
:picker-options="pickerOptions" 
v-model="selectInfo.value" 
format="yyyy-MM-dd" 
value-format="yyyy-MM-dd" 
type="daterange" 
range-separator="~" 
start-placeholder="开始日期" 
end-placeholder="结束日期">
</el-date-picker>

data中的code:

data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();//只能选择今日之前
        },
      },
    }
  },

mounted中的获取点击位置与弹框区域比较code:

  document.addEventListener("click", function (e) {
    // 下面这句代码是获取 点击的区域是否包含你的弹框，如果包含，说明点击的是弹框以外，不包含则为弹框以内
    let flag = e.target.contains(
      document.getElementsByClassName("dateTest")[0]
    );
    if (flag) {
      bus.$emit("unFocus", true);
    }
  });
  this.getAlarms();

methods中的code:

unFocus() {
     	this.$refs.datePicker.hidePicker();
    },
getAlarms() {
     bus.$on("btfocus", (msg) => {
        this.unFocus();
      });
    },