Element Plus 的下拉选择框需要点击两次才能展开的原因

问题

记录一下ElementPlus在页面中的下拉选择框需要点击两次才能展开的解决方法.

分析

Element Plus 的下拉选择框需要点击两次才能展开的原因可能是因为其使用了一个默认的 click 事件，而不是 mousedown 事件。一些浏览器的行为是在第一次 click 事件中阻止下拉框的显示，直到第二次 click 事件被触发。

解决

方法一

解决这个问题的一种方法是使用 mousedown 事件而不是 click 事件。在 Element Plus 的下拉选择框上添加一个 @mousedown 事件监听器，并调用 event.preventDefault() 来阻止默认的 click 事件。例如：

<template>
  <el-select @mousedown.prevent v-model="selected">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selected: null,
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' }
      ]
    };
  }
};
</script>

方法二

另一个方法是将 click 事件监听器添加到下拉框本身，然后在事件处理程序中手动打开下拉框。例如：

<template>
  <el-select ref="select" v-model="selected" @click="handleClick">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selected: null,
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' }
      ]
    };
  },
  methods: {
    handleClick() {
      this.$refs.select.toggleMenu();
    }
  }
};
</script>

在这个例子中，我们添加了一个 ref 属性来引用下拉框组件，并将 click 事件监听器添加到下拉框上。然后，在 handleClick 方法中，我们调用 toggleMenu 方法来手动打开下拉框。这样，我们就可以通过单击一次打开下拉框了。