vue3 @command 使用方法

在 Vue 3 中，如果你想在模板中使用 @command 事件处理方式，通常是在使用一些基于 Vue 3 的 UI 组件库时遇到的场景，比如 Element Plus 或 Vuetify。在这些组件库中，@command 通常用于处理例如菜单项选择、下拉列表选择等场景中的命令事件。

示例 1：Element Plus 中的 Dropdown 菜单

假设你正在使用 Element Plus，并且想要在 Dropdown 菜单中选择项时执行一些操作。

首先，确保你已经安装并引入了 Element Plus：

npm install element-plus --save

在你的 Vue 组件中引入并注册 Element Plus：

import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import 'element-plus/dist/index.css';
 
export default {
  components: {
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem
  }
}

然后，在模板中使用 Dropdown 组件，并监听 @command 事件：

<template>
  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      点击下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <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 divided command="e">蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
 
<script>
export default {
  methods: {
    handleCommand(command) {
      console.log('Selected command:', command);
      // 根据 command 执行相应的操作
    }
  }
}
</script>

示例 2：Vuetify 中的 Menu（类似场景）

如果你在使用 Vuetify，处理类似的事件会有些不同，但基本思路相同。首先，确保安装并引入 Vuetify：

npm install vuetify@next --save

在你的 Vue 组件中引入并注册 Vuetify：

import { createVuetify } from 'vuetify';
import 'vuetify/styles'; // 确保导入样式文件，根据你的项目结构可能需要调整路径
import * as components from 'vuetify/components'; // 引入所有组件（可选）
import * as directives from 'vuetify/directives'; // 引入所有指令（可选）
 
const vuetify = createVuetify({ components, directives }); // 创建 Vuetify 实例（根据你的项目配置可能需要调整）

在模板中使用 Vuetify 的 <v-menu> 组件并监听事件：

<template>
  <v-menu>
    <template v-slot:activator="{ on, attrs }">
      <v-btn color="primary" v-bind="attrs" v-on="on">点击我</v-btn>
    </template>
    <v-list>
      <v-list-item @click="handleCommand('a')">黄金糕</v-list-item>
      <v-list-item @click="handleCommand('b')">狮子头</v-list-item>
      <!-- 更多菜单项 -->
    </v-list>
  </v-menu>
</template>
 
<script>
export default {
  methods: {
    handleCommand(command) {
      console.log('Selected command:', command);
      // 根据 command 执行相应的操作
    }
  }
}
</script>