自定义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“ 这个自己去文件里面看

效果图

自定义icon图标和背景色相关推荐

在项目中增加自定义icon图标
以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...
HBuilder webApp开发(十五)MUI增加自定义icon图标
前段时间有朋友问我,MUI里面怎么添加字体图标.后来下班后给他做了一个小的Demo,其实这个看卡MUI的文档就有.mui如何增加自定义icon图标. 其实这个不仅限于MUI,其他项目比如PC项目也可以 ...
【Layui】layui 自定义icon 图标
layui 自定义icon 图标 Layui 提供的图标较少,通常不能满足个性化的需求,阿里,font-awesome等提供免费的图库,那么如何扩展呢? 准备工作前提工作,自己下载好layui,注册 ...
在iview + vue项目中使用自定义icon图标
最近做一个后台管理系统,是用iview+vue cli2做的,在做的过程中需要将左侧的导航栏加入icon图标,但是iview库里的图标和UI要求不符,这就需要引入自己的图标库. 1. UI设计师会把自 ...
为BlueLake主题增加自定义icon图标
一.前言 hexo 的 Bluelake 主题是我一直在用的,简单大方,很喜欢.但最近有了添加自定义 icon 图标的需求,比如,添加 "地址"."扫一扫".& ...
vue项目改图标_vue使用自定义icon图标的方法
首先因为elementUI提供的icon太少了,所有自己找找有没有矢量图可以补充的,尝试多种方法,觉得下面方法简单易懂,分享给大家效果图: 推荐使用阿里爸爸矢量图标管理,iconfont 使用方法 ...
uniapp 使用自定义icon图标
1.下载图标文件阿里图标库位置:iconfont-阿里巴巴矢量图标库 eg: 搜索 "书签" 图标,点击加入购物车,再进入购物车,填写加入项目,也可以直接下载,点击编辑编辑可以 ...
【ElementUI组件优化】自定义icon图标的使用
风雨里做个大人,阳光下做个小孩. 前端经常会用到UI提供的各种图表,推荐阿里的图标库.如果UI要求不是很严格,我们可以自己在图标库中找到想要的图标. 搜索之后可以点击下载. 在ElementUI中使用 ...
vue项目中自定义icon图标
vue项目中有时需要用到自定义图标,用法如下新建icon.css文件,定义图标及其名称 /*指针图标*/ .icon-pointer {background: url('../assets/imag ...

自定义icon图标和背景色

自定义icon图标和背景色相关推荐

最新文章

热门文章