elementui Select 选择器 鼠标离开后关闭弹窗
时间: 2023-07-08 09:15:24 浏览: 140
elementUI select组件默认选中效果实现的方法
您可以通过监听 Select 组件的 `blur` 事件来实现鼠标离开后关闭弹窗的效果。具体的做法是,在 `Select` 组件上添加 `@blur` 监听器,并在监听器中调用 `this.$refs.select.blur()` 方法来关闭弹窗。示例代码如下:
```vue
<template>
<div>
<el-select ref="select" @blur="handleBlur">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'Option1', label: 'Option1' },
{ value: 'Option2', label: 'Option2' },
{ value: 'Option3', label: 'Option3' },
],
};
},
methods: {
handleBlur() {
this.$refs.select.blur();
},
},
};
</script>
```
这样,当用户鼠标离开 Select 组件时,就会自动关闭弹窗。
阅读全文