自定义icon图标和背景色

<template>
    <div class="icon box">
        <el-popover width="200" pacemente="right" tige=cdicxi @hide="hide">
            <!-- 选择图标图案和背景色 -->
            <div>
                <div>
                    <el-color-picker  style="vertical-align:middle" v-model="color" :predefine="predefineColors"></el-color-picker>
                    <div  style="vertical-align:middle;line-height:40px">背景色选择</div>
                </div>
                <span class="allicon" v-for="(item,index) in optionsone" :key="index">
                    <i class="tsz_zg_icon" :class="item.font_class" @click="iconeChange"></i>
                </span>
            </div> 
            <!--展示的图标  -->
            <div slot="reference" style="line-height:40px;text-align:center;height:40px;width:40px;border-radius:8px" :style="background">
                <i style="color:#FFFFFF;font-size:30px" class="tsz_cg_icon" :class="font_class"></i>
            </div>
        </el-popover>
    </div>
</template>
<script>
import cgIconfont from '@assets/iconfont/iconfont.json' //iconfont阿里巴巴图标库的下载路径
export default {
    watch:{
       //监听颜色变化改变背景色
       color(n){
          this.background={backgroundColor:n}
       }
    },
    data(){
        return{
            font_class:"tsz_cg1",//初始默认图标
            background:{backgroundColor:'#409EFF'},//初始默认背景色
            color:'409EFF',
            optionsone:[],//转载备选图标对象
            predefineColors:[
              '#ff4500',
              '#ff8c00',
              '#409EFF',
              '#ddf700'
            ],//写好的备选颜色
        }
    },
    mounted(){
        //再选好的图标库文件截取自己想要的图标
        const arr=cgIconfont.glyphs.slice(1,34)
        this.optionsone=JSON.parse(JSON.stringify(arr))
        this.optionsone.forEach(item=>{
            item.font_class=`tsz_cg${item.font_class}`
        })
    },
    methods:{
        //获取图标的class名字
        iconeChange(e){
            this.font_class=e.target.classList[1]
        },
        hide(){
            //当el-popover失去焦点给接口提交需要的字段
            console.log('提交更改的数据')
        }
    }
}

</script> 
<style lang="scss" scoped>
.icon_box{
    margin-top:15px
}
.allicon{
    display:inline-block;
    height:40px;
    width: 40px;
    text-align: center;
    line-height:40px;
    i{
        font-size: 25px;
    } 
}
</style> 

这里的icon图标基础类名是class="tsz_zg_icon“ 这个自己去文件里面看

效果图