快速上手

全局注册

在引入组件时，可以传入一个全局配置对象，该配置对象目前支持FontAwesome、ElementUI和addIconList，FontAwesome和ElementUI可选值有true和false，表示是否使用该组件图标。 addIconList是自定义新增图标名称的数组，removeIconList则是自定义删除图标名称的数组。

在main.js中加入：

import iconPicker from 'e-icon-picker';
import 'e-icon-picker/dist/index.css';//基础样式
import 'e-icon-picker/dist/main.css'; //fontAwesome 图标库样式

//使用时必须引用ElementUI相关的组件以及css
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(iconPicker);//使用e-icon-picker
Vue.use(ElementUI); //使用ElementUI

局部注册

引入e-icon-picker组件

import {EIconPicker} from 'e-icon-picker';
import 'e-icon-picker/dist/index.css'; //基础样式
import 'e-icon-picker/dist/main.css';  //fontAwesome 图标库样式

在组件components中声明

export default {
    name: 'app',
    components: { EIconPicker},
    data() {
        return {
            icon: '',
            options: {FontAwesome: false, ElementUI: true, addIconList: ['fa fa-slack'], removeIconList: []},
        }
    }
}

注：options参数会是全局样式失效，请合理应用。

使用

<e-icon-picker v-model="icon" :options="options"/>

完整示例请参考example项目简单使用请参考example1.vue文件

高级

全局设置

在main.js中全局注册是可以加入以下参数：

Vue.use(eIconPicker, {FontAwesome: true, ElementUI: true});

具体参数信息，请参考参数配置

全局添加图标或者删除图标

通过全局配置添加或者删除

Vue.use(eIconPicker, {FontAwesome: true, ElementUI: true, addIconList: [], removeIconList: []});

通过提供的函数进行配置

import eIconPicker, {iconList} from 'e-icon-picker';
Vue.use(eIconPicker);

iconList.addIcon(["el-icon-s-ticket", "el-icon-s-help", "el-icon-s-help"]);//添加图标
iconList.removeIcon(["el-icon-s-ticket"]);//删除图标

使用示例请参考main.js文件

局部添加图标或者删除图标

使用时添加一个ref属性：

<e-icon-picker ref="iconPicker" v-model="icon" :options="options"/>

通过ref获取e-icon-picker组件，再调用组件方法：

mounted() {
        this.$refs['iconPicker'].addIcon("fa fa-slack");//组件内动态添加图标
        this.$refs['iconPicker'].removeIcon("fa fa-slack");//组件内动态删除图标
        setTimeout(() => {//通过修改参数进行重新设置组件
           this.options.addIconList.push('el-icon-message-solid');
           this.options.removeIconList.push('removeIconList');
           console.log("定时任务触发")
        }, 5000);
    }

使用示例请参考example3.vue文件

使用iconfont图标

将图标导入到项目中（iconfont.json文件也要导入）
删除iconfont.css中多余的css样式

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

获取css的名称

import {analyzingIconForIconfont} from 'e-icon-picker';//引入解析json的函数
import iconfont from "./css/iconfont.json";//引入json文件
import "./css/iconfont.css";//引入css

let forIconfont = analyzingIconForIconfont(iconfont);//解析class
//全局删除增加图标
Vue.use(eIconPicker, {FontAwesome: true, ElementUI: true, addIconList: forIconfont.list, removeIconList: []});//全局注册图标

属性配置

具体配置项请参考参数配置，对应的示例请参考example2.vue文件

dyenigma / e-icon-picker

快速上手

全局注册

局部注册

使用

高级

全局设置

全局添加图标或者删除图标

局部添加图标或者删除图标

使用iconfont图标

属性配置

简介

发行版

贡献者

近期动态

dyenigma / e-icon-picker .gitee-modal { width: 500px !important; }

快速上手

全局注册

局部注册

使用

高级

全局设置

全局添加图标或者删除图标

局部添加图标或者删除图标

使用iconfont图标

属性配置

简介

发行版

贡献者

近期动态

搜索帮助

dyenigma / e-icon-picker