vue项目图标处理工具
1、vue项目中的png、svg图片统一处理工具类,图片正常放在对应的目录下(images中放png图片,ui-icon中放svg图片):2、在style文件夹下新建一个ui-page.less工具类类:// 图标.ui-icon {.common {display: inline-block;width: 24px;height: 24px;background-size: contain;ve
·
1、vue项目中的png、svg图片统一处理工具类,图片正常放在对应的目录下(images中放png图片,ui-icon中放svg图片):
2、在style文件夹下新建一个ui-page.less工具类类:
// 图标
.ui-icon {
.common {
display: inline-block;
width: 24px;
height: 24px;
background-size: contain;
vertical-align: middle;
}
// 生成ui-icon子图标
.svg-fac(@name) {
&-@{name} {
.common();
background: url("~@/assets/ui-icon/@{name}.svg") no-repeat center;
}
}
.png-fac(@name) {
&-@{name} {
.common();
background: url("~@/assets/images/@{name}.png") no-repeat center;
}
}
.svg-fac(import); // 导入
.svg-fac(export); // 导出
.svg-fac(filter); // 筛选 / 过滤
.svg-fac(detail); // 详情
.svg-fac(archives); // 全息档案
.svg-fac(trackAnalysis); // 轨迹分析
.svg-fac(alert); // 预警
.svg-fac(delete); // 删除
.svg-fac(search); // 搜索
.svg-fac(camera); // 摄像头
.svg-fac(signReceipt); // 签收 / 编辑任务
.svg-fac(h_guanz); // 关注
.svg-fac(h_jiancbg); // 检测报告
.svg-fac(h_zaiz); // 在住
.svg-fac(h_buzz); // 不在住
.svg-fac(h_qians); // 签收
.svg-fac(h_qus); // 趋势
.svg-fac(h_reny); // 人员
.svg-fac(h_zhuap); // 抓拍
// png
.png-fac(diz);
.png-fac(guangz_s);
.png-fac(guanz_l_nor);
.png-fac(guanz_l_sel);
.png-fac(guanz_nor);
.png-fac(guanz_sel);
.png-fac(jied); // 街道
.png-fac(key_l_nor);
.png-fac(key_l_sel);
.png-fac(key_s);
.png-fac(point);
.png-fac(quh); // 区
.png-fac(tianj);
.png-fac(wenjj);
.png-fac(wus);
.png-fac(xiangq);
.png-fac(xiangs);
.png-fac(xiangx);
.png-fac(xuanz_hov);
.png-fac(xuanz_nor);
.png-fac(zhengc_l_nor);
.png-fac(zhengc_l_sel);
.png-fac(zhengc_s);
.png-fac(zhuap);
.png-fac(h_tianj);
}
3、在main.js中引入:
import '@/style/ui-page.less'
4、在用到图标或图标按钮的地方使用:
<el-button class="ui-icon-button" icon="ui-icon-export">
导出
</el-button>
5、效果:
更多推荐
所有评论(0)