Vue ElementUI el-select 图片选择效果

概述

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

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

效果

实现

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>

重点

可在此下载项目资源