一、el-dropdown-menu基本用法
el-dropdown-menu是element-ui中的下拉菜单组件,它可以作为下拉菜单的容器来使用,我们可以在这个容器中放置一些el-dropdown-item或其他的元素来构建我们需要的下拉菜单。以下是el-dropdown-menu的基本用法:
<el-dropdown>
<span class="el-dropdown-link">下拉菜单</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>菜单1</el-dropdown-item>
<el-dropdown-item>菜单2</el-dropdown-item>
<el-dropdown-item>菜单3</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
上述代码会生成一个下拉菜单,当我们点击“下拉菜单”链接文字时,会弹出一个下拉菜单,里面有三个菜单项:菜单1、菜单2和菜单3。
二、el-dropdown-menu的样式
el-dropdown-menu的样式可以通过修改CSS来自定义。以下是一些常用的样式修改:
1. 修改下拉菜单宽度
我们可以通过修改下拉菜单的宽度来改变下拉菜单的显示效果。例如,我们可以将下拉菜单的宽度设置为300像素:
.el-dropdown-menu {
width: 300px;
}
2. 修改下拉菜单的背景色
默认情况下,下拉菜单的背景色为白色。我们可以通过修改background-color来改变下拉菜单的背景色。以下代码将下拉菜单的背景色改为灰色:
.el-dropdown-menu {
background-color: #f5f5f5;
}
3. 修改下拉菜单的字体颜色
下拉菜单中菜单项的字体颜色默认为黑色。我们可以通过修改color属性来改变下拉菜单中菜单项的字体颜色。以下代码将下拉菜单中菜单项的字体颜色改为蓝色:
.el-dropdown-item {
color: blue;
}
4. 修改下拉菜单的边框
下拉菜单的边框默认为无。我们可以通过修改border属性来添加边框。以下代码将下拉菜单的边框设置为1像素的实线:
.el-dropdown-menu {
border: 1px solid #ccc;
}
5. 修改下拉菜单的阴影
默认情况下,下拉菜单的阴影为无。我们可以通过box-shadow属性来添加阴影效果。例如,以下代码会在下拉菜单周围添加黑色的阴影:
.el-dropdown-menu {
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
三、el-dropdown-menu的高级用法
1. 添加图标
我们可以在下拉菜单中添加图标来美化我们的下拉菜单。以下代码在每个菜单项前添加一个图标:
.el-dropdown-item:before {
font-family: "iconfont";
content: "\e600";
margin-right: 10px;
}
2. 使用自定义菜单项
除了使用el-dropdown-item来作为菜单项,我们还可以使用我们自己定义的HTML元素来作为菜单项。例如,下面的代码使用a元素作为菜单项:
<el-dropdown>
<span class="el-dropdown-link">下拉菜单</span>
<el-dropdown-menu slot="dropdown">
<a href="#" class="menu-item">菜单1</a>
<a href="#" class="menu-item">菜单2</a>
<a href="#" class="menu-item">菜单3</a>
</el-dropdown-menu>
</el-dropdown>
3. 使用slot自行定制菜单项
除了使用el-dropdown-item和HTML元素作为菜单项,我们还可以使用slot来自定义菜单项。以下代码使用一个包含checkbox的自定义元素作为菜单项:
<el-dropdown>
<span class="el-dropdown-link">下拉菜单</span>
<el-dropdown-menu slot="dropdown">
<template v-slot:dropdown-item>
<label class="el-checkbox">
<input type="checkbox" class="el-checkbox-input">
<span class="el-checkbox-label">菜单1</span>
</label>
</template>
</el-dropdown-menu>
</el-dropdown>
四、总结
本文主要介绍了el-dropdown-menu的基本用法和样式,同时还介绍了一些高级用法,包括添加图标、使用自定义菜单项和使用slot自行定制菜单项。