vue2 - 解决treeselect树形组件获取焦点后无法关闭element的选择器和日期选择器的问题

Posted 2022-06-01 会飞の小蜜蜂

问题：

 

 

解决：

treeselect添加@open="openFun"

/**
       * 菜单打开时发出
       */
      openFun() 
        this.$bus.$emit("closeSelect");
        this.$bus.$emit("closeDatePicker");
      ,

选择器el-select添加ref="elSelect"

mounted() 
      /**
       * 收起下拉菜单
       * this.$bus.$emit("closeSelect");
       */
      this.$bus.on("closeSelect",()=>
        if(this.$refs.elSelect) 
          this.$refs.elSelect.blur();
        
      )
    ,
    beforeDestroy() 
      this.$bus.off(closeSelect);
    ,

日期选择器el-date-picker添加ref="elDatePicker"

mounted() 
        /**
         * 关闭日期时间选择器
         * this.$bus.$emit("closeDatePicker");
         */
        this.$bus.on("closeDatePicker",()=>
            if(this.$refs.elDatePicker) 
                this.$refs.elDatePicker.pickerVisible = false;
            
        )
    ,
    beforeDestroy() 
      this.$bus.off(closeDatePicker);
    ,

 

前端菜鸟一枚，习惯记录平时遇到的一些问题和学习笔记，觉得有用的可以点个支持！