vue 中引入阿里图标库，封装iconPicker组件

一.引入阿里图标库

1.vue项目引入阿里图标库

二.封装iconPicker组件

1.子组件

<template><el-popoverplacement="bottom"title=""width="200"trigger="manual"v-model="visible"@mouseleave="mouseleave"><div class="icon_box"><template v-if="showTooltip"><el-tooltipv-for="item in iconJsonList":key="item.font_class"effect="light":content="item.name"placement="top"><span:class="`iconfont icon-${item.font_class}`"@click="checkIcon(item)"></span></el-tooltip></template><template v-if="!showTooltip"><spanv-for="item in iconJsonList":key="item.font_class":class="`iconfont icon-${item.font_class}`"@click="checkIcon(item)"></span></template></div><el-inputref="input":value="value"slot="reference"@focus="visible = true"@blur="inputBlur"@input="inputBlur"><template slot="prepend"> <i :class="value"></i> </template></el-input></el-popover>
</template><script>
import iconJson from "@/assets/icon-font/iconfont.json";
export default {props: {value: {type: String,default: "",},showTooltip: {type: Boolean,default: false,},},data() {return {visible: false,iconJsonList: iconJson.glyphs,};},watch: {value(val) {if (typeof val == "string") {this.$emit("update:value", val);this.visible = false;}},},mounted() {// console.log(iconJson);},methods: {inputBlur(val) {if (typeof val == "string") {this.$emit("update:value", val);this.visible = false;}},checkIcon(item) {let iconCode = `iconfont icon-${item.font_class}`;this.$emit("update:value", iconCode);},mouseleave() {this.visible = false;this.$refs.input.blur();},},
};
</script><style lang="less" scoped>
/deep/ .el-popover {width: 300px !important;
}
.icon_box {width: 100%;height: 200px;display: flex;flex-wrap: wrap;justify-content: flex-start;overflow-y: auto;.iconfont {width: 25%;flex-basis: auto;margin: 5px 0;cursor: pointer;}
}
</style>

2.父组件调用

<template><div class="achieves-check"><iconPicker :value.sync="value"></iconPicker></div>
</template><script>
import iconPicker from "@/components/iconPicker/index.vue";
export default {components: {iconPicker,},data() {return {value: "",};},watch: {value(val) {console.log(val);},},
};
</script>

三.效果图

vue 中引入阿里图标库，封装iconPicker组件相关推荐

如何在React中引入阿里图标库的图标
一.周所周知在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
【小程序】小程序中使用阿里图标库
文章目录 1.学会在阿里图标库中图标添加进项目 2.引用图标库资源 1.学会在阿里图标库中图标添加进项目相关文章 2.引用图标库资源 1.复制代码,浏览器搜索 2.搜素后复制代码,新建一个.wxss ...
前端学习笔记系列一：5 在项目中引入阿里图标icon
进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...
uniapp中引入阿里图标
一.在uniapp中发现,以往H5的阿里使用步骤失效了: 1.把图标加入购物车,在购物车里添加至项目,选择下载至本地 2.把文件夹里除了html和demo的全部粘贴至软件 3.link引入iconfo ...
Vue中引入字体图标失败，显示方框（已解决）
问题描述: 在vue开发中,main中引入iconfont.css后,给标签添加相应类名后却不能正常显示,如下图解决方案: 其实问题很明显,就是忘了给i标签加上iconfont类名 <div ...
在微信小程序中使用阿里图标库Iconfont
点击 '下载至本地',并解压文件夹把这几个文件放在小程序项目中, 在app.wxss(图片上用的是taro和taro-UI框架的格式)中引入iconfont.css,然后其他地方就可以使用了
css使用font-face引入阿里图标库的图标 - Kaiqisan
大家好,都吃了吗?我是Kaiqisan,是一个不善言辞的羞射男孩,今天讲讲font-face的使用方法,它其实在项目中相当常见. 首先打开阿里云官网搜索随意一个图标(我这里的搜索关键词是收藏) 把图 ...
引入阿里图标库（iconfont）后图标黑白问题
Font Class引入方式不支持彩色图标. 想要运用彩色图标得通过Symbol方式引入,得以SVG的方式展示. <svg class="icon" aria-hidden= ...
Three.js中引入dat.gui库实现界面组件控制动画速度变量
场景 Three.js中使用requestAnimationFrame方法实现立方体转动和小球跳动的动画: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/arti ...

vue 中引入阿里图标库，封装iconPicker组件

一.引入阿里图标库

1.vue项目引入阿里图标库

二.封装iconPicker组件

1.子组件

2.父组件调用

三.效果图

vue 中引入阿里图标库，封装iconPicker组件相关推荐

最新文章

热门文章