el-dropdown-menu 点击事件
时间: 2023-11-12 08:59:02 浏览: 79
el-dropdown-menu 是 Element UI 中的下拉菜单组件,它的点击事件可以通过绑定 @command 属性来实现。具体实现方式如下:
1. 在 el-dropdown-menu 上绑定 @command 事件,指定一个方法名,例如 handleCommand。
2. 在下拉菜单中的每个 el-dropdown-item 上设置 command 属性,值为一个字符串,表示该项的命令。
3. 在 handleCommand 方法中,接收一个参数,即当前点击的命令字符串。
示例代码如下:
```
<el-dropdown-menu @command="handleCommand">
<el-dropdown-item command="item1">菜单项1</el-dropdown-item>
<el-dropdown-item command="item2">菜单项2</el-dropdown-item>
<el-dropdown-item command="item3">菜单项3</el-dropdown-item>
</el-dropdown-menu>
...
methods: {
handleCommand(command) {
console.log('点击了命令:', command);
}
}
```
相关问题
el-dropdown-item点击事件
el-dropdown-item 点击事件可以通过绑定 click 事件来实现,例如:
```html
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click="handleClick('item1')">选项一</el-dropdown-item>
<el-dropdown-item @click="handleClick('item2')">选项二</el-dropdown-item>
<el-dropdown-item @click="handleClick('item3')">选项三</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
```
```javascript
methods: {
handleClick(item) {
console.log(item);
}
}
```
在上面的代码中,我们给 el-dropdown-item 组件绑定了 click 事件,并且在点击时调用了 handleClick 方法,该方法会输出当前点击的选项。
el-dropdown-menu
el-dropdown-menu是Element UI中的一个下拉菜单组件,用于在el-dropdown中显示下拉列表的选项。[1]在使用el-dropdown-menu时,需要将其作为el-dropdown的子组件,并使用slot="dropdown"来指定其位置。[3]el-dropdown-menu可以嵌套el-dropdown-item来设置具体的下拉菜单项,可以通过设置icon属性来显示左侧的图标,通过设置command属性来与el-dropdown的@command事件相对应。[3]此外,还可以通过设置divided属性来在菜单选项上方显示分割线,通过设置disabled属性来禁用某个菜单选项。[3]el-dropdown-menu还可以通过设置size属性来控制下拉菜单的大小。[3]