ElementUI Dropdown 下拉菜单

py3study

发布于 2021-03-07 10:24:42

3K0

发布于 2021-03-07 10:24:42

文章被收录于专栏：python3python3

一、概述

在后台项目中，使用Dropdown 下拉菜单时，发现对el-dropdown-item绑定点击事件时，一直没有触发，比如：

<el-dropdown-item?@click="password()">修改密码</el-dropdown-item>

后来查阅官方文档，原来是使用方式不对。接下来，介绍一下正确使用方法。

二、指令事件

点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作

test.vue

<template>
??<div?style="width:?70%;margin-left:?30px;margin-top:?30px;">
????<el-dropdown?@command="handleCommand">
??????<i?class="el-icon-user-solid"?style="margin-right:?15px"></i>
??????<el-dropdown-menu?slot="dropdown">
????????<el-dropdown-item?command="password">修改密码</el-dropdown-item>
????????<el-dropdown-item?command="logout">退出</el-dropdown-item>
??????</el-dropdown-menu>
????</el-dropdown>
??</div>
</template>

<script>
??export?default?{
????data()?{
??????return?{
??????}
????},
????methods:?{
??????//?判断下拉菜单指令
??????handleCommand(command)?{
????????//?this.$message('click?on?item?'?+?command);
????????if?(command?==?"password"){
??????????this.changePassword()
????????}else?{
??????????this.logout()
????????}
??????},
??????//?退出
??????async?logout()?{
????????this.$message("点击退出");
??????},
??????//?修改密码
??????changePassword(){
????????this.$message("点击修改密码");
??????},
????}
??}
</script>

<style>
??.el-dropdown?i{
????display:?inline-block;
????position:?relative;
????color:?#606266;
????font-size:?30px;
??}
</style>

注意：在command中指定不同的指令，就可以做进一步的判断了。

访问测试页面，效果如下：