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

article/2025/6/28 9:25:05

一.引入阿里图标库

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

下载并解压阿里图标zip包
main.js引入

二.封装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>