elementui下拉框不消失、element的下拉列表

在使用ElementUI时，有时会遇到下拉框（如el-select）在点击其他地方时不会自动收起的问题。本文将介绍几种解决这一问题的方法，并提供相应的代码示例。

解决方案概述

使用visible-change事件：通过监听visible-change事件来手动控制下拉框的显示和隐藏。
使用blur事件：通过监听输入框的blur事件来隐藏下拉框。
自定义指令：通过自定义Vue指令来实现更灵活的控制。

使用`visible-change`事件

el-select组件提供了visible-change事件，可以在下拉框显示或隐藏时触发。我们可以通过这个事件来手动控制下拉框的显示状态。

html

  <div>
    
      
      
    
  </div>
</p>


export default {
  data() {
    return {
      value: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      isDropdownVisible: false
    };
  },
  methods: {
    handleVisibleChange(visible) {
      this.isDropdownVisible = visible;
      if (!visible) {
        // 执行其他逻辑，例如清除搜索条件等
      }
    }
  }
};


<p>

使用`blur`事件

el-select组件内部包含一个输入框，我们可以监听这个输入框的blur事件来隐藏下拉框。

html

  <div>
    
      
      
    
  </div>
</p>


export default {
  data() {
    return {
      value: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    };
  },
  methods: {
    handleBlur() {
      this.$refs.select.blur();
    }
  }
};


<p>

自定义指令

如果上述方法不能满足需求，可以考虑使用自定义Vue指令来实现更灵活的控制。

html

  <div>
    
      
      
    
  </div>
</p>


export default {
  data() {
    return {
      value: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    };
  },
  directives: {
    clickOutside: {
      bind(el, binding, vnode) {
        el.clickOutsideEvent = function(event) {
          if (!(el === event.target || el.contains(event.target))) {
            vnode.context[binding.expression](event);
          }
        };
        document.body.addEventListener('click', el.clickOutsideEvent);
      },
      unbind(el) {
        document.body.removeEventListener('click', el.clickOutsideEvent);
      }
    }
  },
  methods: {
    hideDropdown() {
      this.$refs.select.blur();
    }
  }
};


<p>