【Vue2 + ElementUI】更改el-select的自带的下拉图标为倒三角,并设置相关文字颜色和大小

  1. 效果图

  2. 实现

bash 复制代码
<template>
      <div class="search_resources">
          <div class="search-content">
              <el-select class="search-select" v-model="query.channel" placeholder="请选择" @change="handleResource">
                  <el-option v-for="item in channelList" :key="item.id" :label="item.dictValue" :value="item.dictKey"></el-option>
              </el-select>
              <div class="search-input">
                  <div class="line"></div>
                  <el-input class="search-keyword" v-model="query.keyword" clearable placeholder="请输入您要搜索的信息"></el-input>
              </div>
              <div class="search-icon" @click="handleSearch">
                  <el-image :src="require('@/assets/home/search.svg')"></el-image>
              </div>
          </div>
      </div>
</template>

<script>
import { getDictionary } from "@/api/xxx";
export default{
	data(){
		return{
		 	channelList: [
		 		{ dictValue: "全部资源", dictKey: "" }
		 	],
		 	query:{
                keyword: "", // 搜索关键词
                channel: "", // 选择的资源
		 	}
		}
	},
	mounted(){
		this.fetchData()
	},
	methods:{
        /**
         * 获取所有资源
         */
        fetchData() {
            getDictionary("channel").then(res => {
                this.channelList = res.data;
            });
        },

		 /**
         * 选择资源
         */
        handleResource(val) {
            this.query.channel = val;
        },
        
        /**
         * 搜索
         */
        handleSearch() {
            if (this.query.channel == "") {
                this.query.channel = "0";
            }
            this.$router.push({
                path: "/industrySearch",
                query: this.query
            });
        },
	}
}
</script>

<style lang="less" scoped>
.search-content {
    width: 800px;
    height: 80px;
    display: flex;
    align-items: center;
    margin: 12px auto;
}

.search-select {
    width: 162px;
    height: 80px;
}

.search-input {
    display: flex;
    align-items: center;
    background-color: #fff;
}

.line {
    width: 1px;
    height: 60px;
    background: #E3E3E3;
    margin: 0 12px;
}

.search-keyword {
    width: 556px;
    height: 80px;
}

.search-icon {
    display: flex;
    width: 120px;
    height: 80px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 0px 4px 4px 0px;
    background: linear-gradient(0deg, #EF5432 -12.5%, #F90 85.71%);
}

.el-select-dropdown__item {
    font-size: 18px;
    margin: 5px 0;
}
</style>

<style lang="less">

.search_resources {
    min-height: 400px;
    background-color: rgb(42, 132, 206);
    background-size: cover;
    margin-top: 10px;

    .search-keyword>input {
        width: 556px;
        height: 100% !important;
        border-radius: 0;
        border: 0;
        color: #333;
        font-family: "Source Han Sans CN";
        font-size: 18px;
        font-style: normal;
        font-weight: 350;
        line-height: 16px;
        /* 88.889% */
    }

    .search-select {
        .el-input {
            .el-input__inner {
                height: 80px;
                border: 0;
                border-radius: 0;
                color: #333;
                font-family: "Source Han Sans CN";
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }

            .el-input__suffix {
                .el-input__suffix-inner {
                    .el-input__icon {
                        display: flex;
                        align-items: center;
                    }

                    .el-input__icon::before {
                        // content: '\e78f';
                        content: '';
                        background-image: url("~@/assets/home/expand.svg");
                        background-size: cover;
                        width: 24px;
                        height: 24px;
                        display: inline-block;
                        transform: rotate(180deg);
                        padding-left: 10px;
                    }
                }
            }
        }
    }
}
</style>
  1. 总结

将el-select自带的下拉选择图标(如下图 1- 箭头),替换成自定义图标(如下图 2- 倒三角)


(1)利用控制台找到 图 1 所在的位置,如下该图标是通过伪类元素添加的。

(2) 替换为 图 2

① 只更改图标,不更改大小
在图标库(例 elementUI)找对应的图标,通过控制台找 content,最后设置即可

bash 复制代码
content: '\e78f';

② 既更改图标,又更改大小
将自定义图片引入项目,通过background-image设置。此处content:''且display: inline-block;

bash 复制代码
.el-input__icon::before {
	content: '';
    background-image: url("~@/assets/home/expand.svg");
    background-size: cover;
    width: 24px;
    height: 24px;
    display: inline-block;
    transform: rotate(180deg);
    padding-left: 10px;
}
相关推荐
旧林84325 分钟前
第八章 利用CSS制作导航菜单
前端·css
yngsqq36 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css