无需额外代码！利用 el-select 组件让选择框收放自如

前端

2023-11-18 06:00:51

让 Element UI 的 El-Select 组件在选择或点击其他元素后自动关闭

介绍

在使用 Element UI 的 El-Select 组件时，我们经常遇到选择框无法在选择选项或点击其他元素后自动关闭的问题。这可能会给用户带来困惑和不便，因为他们需要手动关闭选择框。

解决方法

为了解决这个问题，我们引入了一个巧妙的技巧。通过添加一行代码，我们可以让 El-Select 组件在满足特定条件后自动关闭。

实现步骤

1. 引入 El-Select 组件

首先，在 Vue.js 应用程序中引入 El-Select 组件：

import { ElSelect } from 'element-ui';

2. 定义 SelectRef

在 Vue.js 组件中定义一个名为 selectRef 的 ref，以便访问 El-Select 组件的实例：

export default {
  data() {
    return {
      selectRef: null,
    };
  },
  ...
};

3. 添加事件监听器

在 mounted() 生命周期钩子中，为 El-Select 组件的 DOM 元素添加一个 blur 事件监听器：

mounted() {
  this.$refs.selectRef.$el.addEventListener('blur', () => {
    this.$refs.selectRef.blur();
  });
}

当选择了一个选项或点击了其他元素时，此事件监听器将触发。

4. 调用 blur() 方法

在事件监听器中，调用 blur() 方法使 El-Select 组件失去焦点，从而导致选择框关闭。

示例代码

<template>
  <el-select ref="selectRef">
    <el-option label="选项一" value="1"></el-option>
    <el-option label="选项二" value="2"></el-option>
    <el-option label="选项三" value="3"></el-option>
  </el-select>
</template>

<script>
import { ElSelect } from 'element-ui';

export default {
  components: { ElSelect },
  mounted() {
    this.$refs.selectRef.$el.addEventListener('blur', () => {
      this.$refs.selectRef.blur();
    });
  },
};
</script>