直接上代码:
dropdown | 下拉列表,通常是 <el-dropdown-menu> 组件 |
<template>
<div>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">注销</el-dropdown-item>
<el-dropdown-item command="b">狮子头</el-dropdown-item>
<el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
<el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
<el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409eff;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script>
export default {
methods: {
handleCommand(command) {
if (command === "a") {
this.$router.push("/");
this.$message.success("注销成功");
localStorage.removeItem("status");
}
},
},
};
</script>
command | 点击菜单项触发的事件回调 | dropdown-item 的指令 |
标签:el,dropdown,Dropdown,element,command,下拉菜单 From: https://www.cnblogs.com/ZhuAo/p/16886464.html