el-dropdown取消下拉
时间: 2023-07-18 17:39:50 浏览: 257
vue+element搭建后台小总结 el-dropdown下拉功能
要取消 el-dropdown 组件下拉,可以使用 `hide()` 方法来手动关闭下拉菜单。可以通过设置 ref 属性来获取 el-dropdown 组件的实例,然后调用 `hide()` 方法来关闭下拉菜单。例如:
```html
<template>
<el-dropdown ref="dropdown">
<span class="el-dropdown-link" @click="handleDropdownClick">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>菜单项一</el-dropdown-item>
<el-dropdown-item>菜单项二</el-dropdown-item>
<el-dropdown-item>菜单项三</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
methods: {
handleDropdownClick() {
this.$refs.dropdown.hide();
}
}
};
</script>
```
在上面的代码中,我们在 el-dropdown 组件上设置了 ref 属性为 "dropdown",然后在点击下拉菜单时调用 `handleDropdownClick` 方法,该方法通过 `$refs` 获取 el-dropdown 组件的实例,然后调用 `hide()` 方法来关闭下拉菜单。
阅读全文