Web前端之Vue2+Element-Ui自定义select标签样式、背景图片、左右侧、图标、插槽、大小、position、absolute、select、option、deep
web前端之vue2+element-ui自定义select标签样式、背景图片、左右侧、图标、插槽、大小、position、absolute、select、option、deep
·
Html
<template>
<div id="app">
<el-select
class="selsect_box"
v-model="value"
placeholder="请选择"
@change="changeSelectOption"
>
<!-- 自定义左侧图标 -->
<template slot="prefix">
<i class="el-icon-ice-drink"></i>
</template>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</template>
JavaScript
export default {
name: "App",
data() {
return {
options: [
{
value: "1",
label: "黄金糕",
},
{
value: "2",
label: "双皮奶",
},
{
value: "3",
label: "蚵仔煎",
},
{
value: "4",
label: "龙须面",
},
{
value: "5",
label: "北京烤鸭",
},
],
value: "",
};
},
methods: {
changeSelectOption(val) {
console.log("val:", val);
console.log("this.value:", this.value);
},
},
};
Style
.selsect_box {
width: 360px;
}
// 自定义el-input框的一些自定义样式
/deep/ .selsect_box .el-input--small .el-input__inner {
background-color: #e6f0ff;
padding-left: 40px;
height: 50px;
border-radius: 5px;
color: #1890ff;
font-size: 18px;
border: 1px solid #1890ff;
font-weight: 600;
}
// 自定义左侧图标插槽样式
::v-deep .selsect_box .el-input__prefix {
display: flex;
justify-content: center;
align-items: center;
}
// 替换右侧默认图标
/deep/ .selsect_box .el-icon-arrow-up::before {
content: "";
background: url(./assets/icon/upperTriangle.png) center center no-repeat;
background-size: 37px 37px;
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px dotted #1890ff;
}
// placeholder属性的样式
/deep/ .selsect_box .el-input--small input::-webkit-input-placeholder {
font-size: 16px;
color: #2881ff;
}
相关链接
1、element-ui控件el-select如何在前面添加icon图标
2、Vue ElementUI el-select自定义图标,左右任意自定义加图标
更多推荐
已为社区贡献13条内容
所有评论(0)