elementUi的el-menu 导航菜单 怎么关闭点击开启下拉框
时间: 2023-08-25 11:19:28 浏览: 79
xm-select,一款简单多选的select插件
5星 · 资源好评率100%
要实现关闭点击开启下拉框的功能,可以使用 `before-dropdown-toggle` 事件来实现。具体操作如下:
1. 在 `el-menu` 组件上添加 `@before-dropdown-toggle="handleToggle"` 监听事件。
2. 在 `methods` 中定义 `handleToggle` 方法来处理点击事件。
3. 在 `handleToggle` 方法中使用 `event.stopPropagation()` 方法来阻止事件冒泡,然后根据当前菜单项的状态来切换下拉框的显示状态。
示例代码如下:
```html
<template>
<el-menu :default-active="activeIndex" mode="horizontal" @before-dropdown-toggle="handleToggle">
<el-submenu index="1">
<template slot="title">导航一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
<el-menu-item index="1-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">导航二</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1-1',
isOpen: false
};
},
methods: {
handleToggle(event, submenu) {
event.stopPropagation();
submenu.isOpened ? submenu.handleCollapse() : submenu.handleExpand();
}
}
};
</script>
```
在上述示例中,我们在 `methods` 中定义了 `handleToggle` 方法来处理点击事件。该方法接收 `event` 和 `submenu` 两个参数,其中 `event` 是当前点击事件对象,`submenu` 是当前菜单项的子菜单对象。
在 `handleToggle` 方法中,我们调用了 `event.stopPropagation()` 方法来阻止事件冒泡,然后使用 `submenu.isOpened` 属性来判断当前菜单项的状态。如果菜单项已经打开,则调用 `submenu.handleCollapse()` 方法来关闭下拉框;否则调用 `submenu.handleExpand()` 方法来打开下拉框。这样就可以实现关闭点击开启下拉框的功能了。
阅读全文