element-ui 使用Dropdown实现二级菜单
时间: 2023-11-25 18:52:40 浏览: 1183
简单的下拉二级菜单
5星 · 资源好评率100%
element-ui是一款基于Vue.js的组件库,其中包含了Dropdown组件,可以用来实现下拉菜单。下面是使用element-ui实现二级菜单的方法:
1.首先需要在Vue项目中安装element-ui组件库,可以使用npm命令进行安装:
```shell
npm install element-ui --save
```
2.在需要使用Dropdown组件的Vue文件中引入Dropdown组件:
```javascript
import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
```
3.在Vue文件中使用Dropdown组件,并在Dropdown组件中添加DropdownMenu和DropdownItem组件,其中DropdownMenu组件用来包含二级菜单,DropdownItem组件用来添加菜单项:
```html
<template>
<div>
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu>
<el-dropdown-item>菜单项1</el-dropdown-item>
<el-dropdown-item>菜单项2</el-dropdown-item>
<el-dropdown-item>
<span>二级菜单<i class="el-icon-arrow-right el-icon--right"></i></span>
<el-dropdown-menu>
<el-dropdown-item>二级菜单项1</el-dropdown-item>
<el-dropdown-item>二级菜单项2</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
```
4.最后需要在Vue文件中引入element-ui样式:
```javascript
import 'element-ui/lib/theme-chalk/index.css';
```
阅读全文