el-dropdown改变大小
时间: 2023-10-14 22:09:00 浏览: 91
vue+element搭建后台小总结 el-dropdown下拉功能
你可以使用 `size` 属性来更改 `el-dropdown` 组件的大小。该属性可以设置为 `'medium'`、`'small'` 或者 `'mini'`,分别对应中等、小型和迷你尺寸。例如:
```html
<el-dropdown size="small">
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
```
你也可以在 `el-dropdown` 组件上添加自定义样式来更改其大小。例如:
```html
<el-dropdown class="my-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>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
```
然后在你的 CSS 文件中增加 `.my-dropdown` 类的样式:
```css
.my-dropdown .el-dropdown-link {
font-size: 12px;
padding: 5px;
}
.my-dropdown .el-dropdown-menu {
font-size: 12px;
min-width: 100px;
}
```
你可以自由调整字体大小和内边距等属性来更改 `el-dropdown` 组件的大小。
阅读全文