自定义el-select，纯图片Select选择器

最新推荐文章于 2024-06-14 10:39:01 发布

石金泽

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量543

点赞数

文章标签：前端 vue elementui

本文链接：https://blog.csdn.net/weixin_42568343/article/details/126438994

版权

本文介绍如何使用Element UI的el-select组件实现在下拉选择时，根据选中的选项动态更改背景图片并隐藏文字显示。通过JavaScript遍历数据，设置选中项的CSS样式，展示了清空功能的实现。

摘要由CSDN通过智能技术生成

效果如下

HTML

<el-select v-model="searchForm['status']" clearable @change="changeSelection">
    <el-option v-for="item in emoList" :key="item.id" :value="item.text">
        <img :src="item.src" style="width: 16px;height: 16px;vertical-align: text-bottom;">
    </el-option>
</el-select>

data:

emoList: [
	{
		id: 1,
		src: 'src/assets/img/xmgl/red__face.png',
		text: '1'
	},
	{
		id: 2,
		src: 'src/assets/img/xmgl/yellow_face.png',
		text: '2'
	},
	{
		id: 3,
		src: 'src/assets/img/xmgl/green_face.png',
		text: '3'
	}
]

methods:

changeSelection(val) {
	for (let index in this.emoList) {
		let obj = this.emoList[index]
		if (val !== "") {
			if (obj.id == val) {
				this.$refs['select'].$el.children[0].children[0].setAttribute(
					'style',
					`background: url(${obj.src}) no-repeat; 
                    //将文字移走
				     text-indent:-9999px;
				     background-position: 25% center;`
				)
			}
		} else {
            //这里是为了实现清空功能
			this.$refs['select'].$el.children[0].children[0].removeAttribute(
				'style',
				`background: url(${obj.src}) no-repeat; 
				text-indent:-9999px;
			    background-position: 25% center;`
			)
		}

	}

},