文章目录
嗯，项目开发到后期，甲方提了一个需求，说要一个文章末尾那样子的图标选择器（要求图标基本与它一致），哇哦，这边要求项目基于vue+element开发，甲方后来提的icon的需求却是基于ant,也只好将其集成进项目咯。值得注意的是，这里最好是将antd的组件按需引入，样式一旦全部引入，可能影响原项目中的网页样式。
一、安装 ant-design-vue ，并引入其Icon组件
1. 在项目中安装antd-design-vue
$ yarn add ant-design-vue
2. 按需加载 ，引入并注册它的Icon组件
在main.js中引入ant-design-vue的icon并手动引入其样式
import {
Icon } from "ant-design-vue"; // 引入antd的icon，该icon在项目中已分类，满足需求
import "ant-design-vue/lib/icon/style/index.less";
Vue.component("AIcon", Icon);
二、封装 AntdIcons.vue
<template>
<div class="antd-icons">
<el-dialog
class="comn_dialog"
title="选择功能图标"
:visible.sync="visible"
width="750px"
top="26vh"
>
<el-tabs v-model="activeName">
<el-tab-pane label="方向性图标" name="directionIcons">
<ul>
<li
v-for="icon in icons.directionIcons"
:key="icon"
class="icon_item"
>
<a-icon
:type="icon"
:title="icon"
@click="chooseIcon(icon)"
:class="{ active: activeIndex === icon }"
/>
</li></ul
></el-tab-pane>
<el-tab-pane label="指示性图标" name="suggestionIcons"
><ul>
<li
v-for="icon in icons.suggestionIcons"
:key="icon"
class="icon_item"
>
<a-icon
:type="icon"
:title="icon"
@click="chooseIcon(icon)"
:class="{ active: activeIndex === icon }"
/>
</li></ul
></el-tab-pane>
<el-tab-pane label="编辑类图标" name="editIcons">
<ul>
<li v-for="icon in icons.editIcons" :key="icon" class="icon_item">
<a-icon
:type="icon"
:title="icon"
@click="chooseIcon(icon)"
:class="{ active: activeIndex === icon }"
/>
</li></ul
></el-tab-pane>
<el-tab-pane label="数据类图标" name="dataIcons"
><ul>
<li v-for="icon in icons.dataIcons" :key="icon" class="icon_item">
<a-icon
:type="icon"
:title="icon"
@click="chooseIcon(icon)"
:class="{ active: activeIndex === icon }"
/>
</li></ul
></el-tab-pane>
<el-tab-pane label="网站通用类图标" name="webIcons"
><ul>
<li v-for="icon in icons.webIcons" :key="icon" class="icon_item">
<a-icon
:type="icon"
:title="icon"
@click="chooseIcon(icon)"
:class="{ active: activeIndex === icon }"
/>
</li></ul
></el-tab-pane>
<el-tab-pane label="品牌和标志" name="logoIcons"
><ul>
<li v-for="icon in icons.logoIcons" :key="icon" class="icon_item">
<a-icon
:type="icon"
:title="icon"
@click="chooseIcon(icon)"
:class="{ active: activeIndex === icon }"
/>
</li></ul
></el-tab-pane>
</el-tabs>
<span slot="footer" class="dialog-footer">
<el-button @click="Cancel">取 消</el-button>
<el-button type="primary" @click="Save">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
const directionIcons = [
"step-backward",
"step-forward",
"fast-backward",
"fast-forward",
"shrink",
"arrows-alt",
"down",
"up",
"left",
"right",
"caret-up",
"caret-down",
"caret-left",
"caret-right",
"up-circle",
"down-circle",
"left-circle",
"right-circle",
"up-circle-o",
"down-circle-o",
"right-circle-o",
"left-circle-o",
"double-right",
"double-left",
"vertical-left",
"vertical-right",
"forward",
"backward",
"rollback",
"enter",
"retweet",
"swap",
"swap-left",
"swap-right",
"arrow-up",
"arrow-down",
"arrow-left",
"arrow-right",
"play-circle",
"play-circle-o",
"up-square",
"down-square",
"left-square",
"right-square",
"up-square-o",
"down-square-o",
"left-square-o",
"right-square-o",
"login",
"logout",
"menu-fold",
"menu-unfold",
"border-bottom",
"border-horizontal",
"border-inner",
"border-left",
"border-right",
"border-top",
"border-verticle",
"pic-center",
"pic-left",
"pic-right",
"radius-bottomleft",
"radius-bottomright",
"radius-upleft",
"radius-upright",
"fullscreen",
"fullscreen-exit"
];
const suggestionIcons = [
"question",
"question-circle",
"plus",
"plus-circle",
"pause",
"pause-circle",
"minus",
"minus-circle",
"plus-square",
"minus-square",
"info",
"info-circle",
"exclamation",
"exclamation-circle",
"close",
"close-circle",
"close-square",
"check",
"check-circle",
"check-square",
"clock-circle",
"warning",
"issues-close",
"stop"
];
const editIcons = [
"edit",
"form",
"copy",
"scissor",
"delete",
"snippets",
"diff",
"highlight",
"align-center",
"align-left",
"align-right",
"bg-colors",
"bold",
"italic",
"underline",
"strikethrough",
"redo",
"undo",
"zoom-in",
"zoom-out",
"font-colors",
"font-size",
"line-height",
"column-height",
"dash",
"small-dash",
"sort-ascending",
"sort-descending",
"drag",
"ordered-list",
"radius-setting"
];
const dataIcons = [
"area-chart",
"pie-chart",
"bar-chart",
"dot-chart",
"line-chart",
"radar-chart",
"heat-map",
"fall",
"rise",
"stock",
"box-plot",
"fund",
"sliders"
];
const webIcons = [
"lock",
"unlock",
"bars",
"book",
"calendar",
"cloud",
"cloud-download",
"code",
"copy",
"credit-card",
"delete",
"desktop",
"download",
"ellipsis",
"file",
"file-text",
"file-unknown",
"file-pdf",
"file-word",
"file-excel",
"file-jpg",
"file-ppt",
"file-markdown",
"file-add",
"folder",
"folder-open",
"folder-add",
"hdd",
"frown",
"meh",
"smile",
"inbox",
"laptop",
"appstore",
"link",
"mail",
"mobile",
"notification",
"paper-clip",
"picture",
"poweroff",
"reload",
"search",
"setting",
"share-alt",
"shopping-cart",
"tablet",
"tag",
"tags",
"to-top",
"upload",
"user",
"video-camera",
"home",
"loading",
"loading-3-quarters",
"cloud-upload",
"star",
"heart",
"environment",
"eye",
"camera",
"save",
"team",
"solution",
"phone",
"filter",
"exception",
"export",
"customer-service",
"qrcode",
"scan",
"like",
"dislike",
"message",
"pay-circle",
"calculator",
"pushpin",
"bulb",
"select",
"switcher",
"rocket",
"bell",
"disconnect",
"database",
"compass",
"barcode",
"hourglass",
"key",
"flag",
"layout",
"printer",
"sound",
"usb",
"skin",
"tool",
"sync",
"wifi",
"car",
"schedule",
"user-add",
"user-delete",
"usergroup-add",
"usergroup-delete",
"man",
"woman",
"shop",
"gift",
"idcard",
"medicine-box",
"red-envelope",
"coffee",
"copyright",
"trademark",
"safety",
"wallet",
"bank",
"trophy",
"contacts",
"global",
"shake",
"api",
"fork",
"dashboard",
"table",
"profile",
"alert",
"audit",
"branches",
"build",
"border",
"crown",
"experiment",
"fire",
"money-collect",
"property-safety",
"read",
"reconciliation",
"rest",
"security-scan",
"insurance",
"interaction",
"safety-certificate",
"project",
"thunderbolt",
"block",
"cluster",
"deployment-unit",
"dollar",
"euro",
"pound",
"file-done",
"file-exclamation",
"file-protect",
"file-search",
"file-sync",
"gateway",
"gold",
"robot",
"shopping"
];
const logoIcons = [
"android",
"apple",
"windows",
"ie",
"chrome",
"github",
"aliwangwang",
"dingding",
"weibo-square",
"weibo-circle",
"taobao-circle",
"html5",
"weibo",
"twitter",
"wechat",
"youtube",
"alipay-circle",
"taobao",
"skype",
"qq",
"medium-workmark",
"gitlab",
"medium",
"linkedin",
"google-plus",
"dropbox",
"facebook",
"codepen",
"amazon",
"google",
"codepen-circle",
"alipay",
"ant-design",
"aliyun",
"zhihu",
"slack",
"slack-square",
"behance",
"behance-square",
"dribbble",
"dribbble-square",
"instagram",
"yuque",
"alibaba",
"yahoo"
];
export default {
name: "AntdIcons",
props: {
iconChooseVisible: {
default: false
}
},
data() {
return {
icons: {
directionIcons,
suggestionIcons,
editIcons,
dataIcons,
webIcons,
logoIcons
},
choosedIcon: "",
activeIndex: "",
activeName: "directionIcons" // 当前活跃的选项卡名
};
},
computed: {
visible: {
get: function() {
return this.iconChooseVisible;
},
set(val) {
this.$emit("updateIconVisible", val);
}
}
},
methods: {
reset() {
this.activeIndex = "";
},
chooseIcon(icon) {
this.activeIndex = icon;
this.choosedIcon = icon;
this.$message.success(`选中的图标名为： ${
icon}`);
},
Save() {
if (this.choosedIcon === "") {
this.$message.warning("尚未选择任何图标");
return;
}
this.reset();
this.$emit("handleIconChoose", this.choosedIcon);
},
Cancel() {
this.reset();
this.$emit("handleIconCancel");
}
}
};
</script>
<style lang="scss">
.antd-icons {
.icon_item {
display: inline-block;
font-size: 26px;
margin-right: 6px;
line-height: 55px;
}
.active {
color: $icon_color;
background: rgba(247, 243, 243, 0.1);
}
}
</style>
四、使用刚刚封装的 AntdIcons.vue
test.vue
<template>
<div class="test" style="margin: 10%;">
<el-button type="primary" @click="iconPopupVisible = true"
>点击显示</el-button
>
<a-icon
style="color:#005d42;font-size:30px;margin-left:50px;"
v-if="currIcon"
:type="currIcon"
/>
<antd-icons
:iconChooseVisible="iconPopupVisible"
@handleIconChoose="handleIconChoose"
@handleIconCancel="handleIconCancel"
@updateIconVisible="updateIconVisible"
></antd-icons>
</div>
</template>
<script>
import AntdIcons from "@/components/common/AntdIcons.vue";
export default {
components: {
AntdIcons
},
data() {
return {
iconPopupVisible: false,
currIcon: ""
};
},
methods: {
updateIconVisible(val) {
this.iconPopupVisible = val;
},
handleIconChoose(value) {
this.currIcon = value; //选中图标后， 设置进当前的icon值
this.iconPopupVisible = false;
},
handleIconCancel() {
this.iconPopupVisible = false;
}
}
};
</script>
测试结果：
参考 ：vue+ant-design-vue 项目，参考：jeecg项目