el-select旁边蓝色小图标
时间: 2023-10-06 20:07:13 浏览: 89
您可以在 el-select 组件旁边添加一个蓝色小图标,可以使用 Element UI 提供的 el-icon 组件来实现。首先,在 el-select 的外部包裹一个 div 元素,然后在该 div 元素内部添加 el-select 和 el-icon 组件。具体代码如下所示:
```html
<template>
<div class="select-wrapper">
<el-select v-model="selectedValue" placeholder="请选择">
<!-- select options -->
</el-select>
<el-icon class="blue-icon" name="xxx"></el-icon>
</div>
</template>
<style>
.select-wrapper {
position: relative;
}
.blue-icon {
color: blue;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
</style>
```
在上面的代码中,我们首先创建了一个 div 元素,使用 CSS 中的 `position: relative;` 让该元素成为定位上下文。然后在该 div 元素内部,我们放置了 el-select 组件和 el-icon 组件。
`<el-icon>` 组件通过 `name` 属性指定要显示的图标,您可以根据需求替换 `"xxx"` 为您想要的图标名称。此外,我们通过添加 `.blue-icon` 类来设置蓝色图标的样式。
最后,我们使用 CSS 设置蓝色图标的位置,通过 `position: absolute;` 将其脱离文档流,并使用 `right`、`top` 和 `transform` 属性来定位图标在右侧且垂直居中。
您可以根据实际需求调整代码中的样式和图标名称来适应您的项目。
阅读全文