1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 Dropdown：
在你的 Vue 组件中导入 Dropdown，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<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>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
export default {
components: {
ElDropdown,
ElDropdownMenu,
ElDropdownItem,
},
};
</script>
在上述代码中，我们导入了 ElDropdown、ElDropdownMenu 和 ElDropdownItem 组件，并在模板中使用它们来创建一个简单的下拉菜单。
3. 自定义 Dropdown：
你可以根据需要自定义 Dropdown，例如，添加图标、修改触发方式等：
<template>
<div>
<el-dropdown trigger="click">
<i class="el-icon-more"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit">编辑</el-dropdown-item>
<el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item>
<el-dropdown-item icon="el-icon-info">详情</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
export default {
components: {
ElDropdown,
ElDropdownMenu,
ElDropdownItem,
},
};
</script>
在这个例子中，我们通过在 el-dropdown-item 中使用 icon 属性添加了图标，并通过 trigger 属性指定了触发方式为点击（默认是鼠标悬停）。
这是一个简单的例子，你可以根据实际需求进一步定制 Dropdown 的样式和行为。
转载请注明出处：http://www.zyzy.cn/article/detail/5572/ElementPlus