Vue ElementUI el-select 图片选择效果

AvatarGiser

已于 2023-02-24 10:47:10 修改

阅读量2.1k

点赞数 1

分类专栏：《ElementUI 基础知识》文章标签： vue.js elementui javascript

于 2023-02-24 10:28:01 首次发布

本文链接：https://blog.csdn.net/sinat_31213021/article/details/129195721

版权

《ElementUI 基础知识》专栏收录该内容

36 篇文章 7 订阅

订阅专栏

该文章展示了如何利用ElementUI的el-select组件结合Vue.js，创建一个显示图片的下拉选择列表，选中后还能展示已选图片的效果。通过在HTML中嵌入图片，并用CSS预处理语言Stylus进行样式调整，实现了选中项的高亮和定位。

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

概述

使用 Element UI el-select 组件制作图片选择效果。两个要点：

拉下列表option展示图片；
选中后展示已选图片；

效果

在这里插入图片描述

实现

Html

代码第 4-19 行，这是一个整体；
代码第 6-13 行，select 选择界面；
代码第 15-18 行，选中后的展示界面；

<template>
<div class="main">
    <!-- 这是一个整体 -->
    <div class="img-select">
        <!-- select 效果 -->
        <el-select v-model="selectedIdx">
            <el-option v-for="index in iconIdxs" :key='index' :value="index">
                <div class="img-option">
                    <img :src="require(`@images/select/zoomin${index}.png`)"/>
                    <img :src="require(`@images/select/zoomout${index}.png`)"/>
                </div>
            </el-option>
        </el-select>
        <!-- 选中后的列表 -->
        <div class="img-option img-selected">
            <img :src="require(`@images/select/zoomin${selectedIdx}.png`)"/>
            <img :src="require(`@images/select/zoomout${selectedIdx}.png`)"/>
        </div>
    </div>
</div>
</template>

CSS

使用 CSS预处理语言 stylus，也可以是其它语言，如：sass，scss等；
代码第 4 行，必须使用 position: relative，为选中样式做准备；
代码第 19 行，选中样式必须使用 position: absolute，相对class="img-select"做定位；
代码第 8 行，将选中值颜色做透明，特别是图片有透明背景的情况下；

<style lang="stylus" scoped>
.img-select {
    margin:30px;
    position: relative;
    .el-select {
        width:150px
        >>> .el-input__inner {
            color: rgba(0,0,0,0);
        }
    }
    .img-option {
        img {
            width: 30px;
            height: 30px;
            margin-right: 2px;
        }
    }
    .img-selected {
        position:absolute;
        top:5px;
        left:10px
    }
}
</style>

完整代码

<template>
<div class="main">
    <!-- 这是一个整体 -->
    <div class="img-select">
        <!-- select 效果 -->
        <el-select v-model="selectedIdx">
            <el-option v-for="index in iconIdxs" :key='index' :value="index">
                <div class="img-option">
                    <img :src="require(`@images/select/zoomin${index}.png`)"/>
                    <img :src="require(`@images/select/zoomout${index}.png`)"/>
                </div>
            </el-option>
        </el-select>
        <!-- 选中后的列表 -->
        <div class="img-option img-selected">
            <img :src="require(`@images/select/zoomin${selectedIdx}.png`)"/>
            <img :src="require(`@images/select/zoomout${selectedIdx}.png`)"/>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            // 图片下标数组
            iconIdxs: [0,1,2,3],
            // 选中的下标
            selectedIdx: 0,
        }
    },
    watch: {
        selectedIdx(i) {
            console.log(`当前选中第 ${i+1} 个`);
        }
    },
}
</script>
<style lang="stylus" scoped>
.img-select {
    margin:30px;
    position: relative;
    .el-select {
        width:150px
        >>> .el-input__inner {
            color: rgba(0,0,0,0);
        }
    }
    .img-option {
        img {
            width: 30px;
            height: 30px;
            margin-right: 2px;
        }
    }
    .img-selected {
        position:absolute;
        top:5px;
        left:10px
    }
}
</style>