ElementUI 的select下拉框悬停触发下拉框

在ElementUI中，要实现select下拉框的悬停触发，可以使用popper-class属性来自定义下拉框的类名，然后通过CSS来控制悬停行为。

以下是一个简单的示例：

1. 首先，在<el-select>组件中使用popper-class属性来指定一个自定义的类名。

<template>
  <el-select v-model="value" popper-class="custom-select-popper">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      options: [{ value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }]
    };
  }
};
</script>

2. 然后，在CSS中定义悬停行为。这里使用了CSS的:hover伪类来实现悬停时显示下拉框的效果。

<style>
.custom-select-popper {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2000;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 0;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
 
.custom-select-popper:hover {
  display: block;
}
</style>

在这个示例中，.custom-select-popper 类定义了下拉框的基本样式，而.custom-select-popper:hover 则是悬停时显示下拉框的样式。这样，当你将鼠标悬停在<el-select>组件上时，下拉框就会显示出来。