ElementUI Dropdown 下拉菜單

一、概述

在后台項目中，使用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中指定不同的指令，就可以做進一步的判斷了。

 

訪問測試頁面，效果如下：

 

 

本文參考鏈接：

https://element.eleme.io/#/zh-CN/component/dropdown