图标选择器

基础用法

名称：

<template>
  <div style="margin: 0 auto;width: 500px">
    <e-icon-picker v-model="icon"/>
    名称： {{icon}}
    <e-icon :icon-name="icon"/>
  </div>
</template>

<script>
export default {
  name: "example1",
  data() {
    return {
      icon: '',
    }
  },
}
</script>

显示代码 复制代码 复制代码

高级用法

名称：

<template>
  <div style="margin: 0 auto;width: 500px">
    <e-icon-picker v-model="icon" :options="options" :disabled="disabled" :readonly="readonly"
                   :placement="placement" :styles="style" :width="width"/>
    名称： {{icon}}
    <e-icon :icon-name="icon"/>
  </div>
</template>

<script>
export default {
  name: "example2",
  data() {
    return {
      icon: '',
      options: {FontAwesome: false, ElementUI: true, addIconList: [], removeIconList: []},
      disabled: false,
      readonly: false,
      placement: 'bottom',
      style: {},
      width: 800
    }
  },
}
</script>

显示代码 复制代码 复制代码

组件内动态设置以及方法展示

名称：

<template>
  <div style="margin: 0 auto;width: 500px">
    <e-icon-picker ref="iconPicker" v-model="icon" :options="options" default-icon="el-icon-edit" placeholder="请选择"
                   size="medium"/>
    名称：{{icon}}
    <e-icon :icon-name="icon"/>
  </div>
</template>

<script>
export default {
  name: "example3",
  data() {
    return {
      icon: '',
      options: {FontAwesome: false, ElementUI: false, addIconList: [], removeIconList: []},
    }
  },
  mounted() {
    this.$refs['iconPicker'].addIcon("fa fa-slack");//组件内动态添加图标
    this.$refs['iconPicker'].removeIcon("fa fa-slack");//组件内动态删除图标

    let self = this;
    setTimeout(() => {//通过修改参数进行重新设置组件
      self.options.addIconList.push('el-icon-message-solid');
      self.options.removeIconList.push('removeIconList');
      self.options.addIconList.push('http://www.icosky.com/images/wj/baidu.gif');
      self.options.addIconList.push(require("../.vuepress/assets/img/img.png"));//名称会是文件的base64内容，所有会很长
      console.log("定时任务触发");
    }, 5000);
  }
}
</script>

显示代码 复制代码 复制代码

组件内使用iconfont彩色图标展示

<template>
  <div style="margin: 0 auto;width: 500px">
    <e-icon-picker ref="iconPicker" v-model="icon" :options="options"/>
    名称：{{ icon }}
    <e-icon :icon-name="icon"/>
  </div>
</template>

<script>
import "../public/js/iconfont.js"; //首先引入iconfont.js文件
import {eIconSymbol} from '../../../lib/index.js'; //引入彩色图标处理函数
import iconfont from "../public/css/iconfont.json"; //引入彩色图标名称json

export default {
  name: "example4",
  data() {
    return {
      icon: '',
      options: {
        FontAwesome: false,
        ElementUI: false,
        eIcon: true,//自带的图标，来自阿里妈妈
        eIconSymbol: true,//是否开启彩色图标
        addIconList: [],
        removeIconList: []
      },
    }
  },
  mounted() {
    this.addIcon();
  },
  methods: {
    addIcon() {
      let icon = eIconSymbol(iconfont);//处理彩色图标
      this.options.addIconList = icon.list;//将彩色图标列表加入到图标选择器
    }
  }
}
</script>

组件内使用iconfont图标展示

<template>
  <div style="margin: 0 auto;width: 500px">
    <e-icon-picker ref="iconPicker" v-model="icon" :options="options"/>
    名称：{{ icon }}
    <e-icon :icon-name="icon"/>
  </div>
</template>

<script>

import {analyzingIconForIconfont} from '../../../lib/index.js';
import iconfont from "../public/css/iconfont.json";

export default {
  name: "example5",
  data() {
    return {
      icon: '',
      options: {
        FontAwesome: false,
        ElementUI: false,
        eIcon: false,//自带的图标，来自阿里妈妈
        eIconSymbol: false,//是否开启彩色图标
        addIconList: [],
        removeIconList: []
      },
    }
  },
  mounted() {
    this.addIcon();
  },
  methods: {
    addIcon() {
      let icon = analyzingIconForIconfont(iconfont);
      this.options.addIconList = icon.list;
    }
  }
}
</script>
<style scoped>
@import "../public/css/iconfont.css";
</style>

组件内使用svg图标展示

<template>
  <div style="margin: 0 auto;width: 500px">
    <h2>组件内使用svg图标展示</h2>
    <e-icon-picker ref="iconPicker" v-model="icon" :options="options"/>
    名称：{{ icon }}
    <e-icon :icon-name="icon"/>
  </div>
</template>

<script>
//svgIcons 对应的就是图标列表，将图标列表添加到选择器就可以了
import svgIcons from 'e-icon-picker/lib/getSvg';
export default {
  name: "example6",
  data() {
    return {
      icon: '',
      options: {
        FontAwesome: false,
        ElementUI: false,
        eIcon: false,//自带的图标，来自阿里妈妈
        eIconSymbol: false,//是否开启彩色图标
        addIconList: [],
        removeIconList: []
      },
    }
  },
  mounted() {
    this.addIcon();
  },
  methods: {
    addIcon() {
      this.options.addIconList = svgIcons;
    }
  }
}
</script>

在dialog中使用

<template>
  <div style="margin: 0 auto;width: 500px">
    <h2>在dialog中使用</h2>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    名称：{{ icon }}
    <e-icon :icon-name="icon" />
    <el-dialog
        title="在dialog中使用"
        :visible.sync="dialogVisible"
        width="30%">
      <e-icon-picker ref="eIconPicker" v-model="icon" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//svgIcons 对应的就是图标列表，将图标列表添加到选择器就可以了
export default {
  name: "example7",
  data() {
    return {
      icon: '',
      dialogVisible: false
    }
  },
  watch: {
    dialogVisible(val) {
      if (!val && this.$refs.eIconPicker) {
        this.$refs.eIconPicker.destroyIconList()
      }
    }
  }
}
</script>

自定义触发器

<template>
  <div style="margin: 0 auto;width: 500px">
    <h2>自定义触发器</h2>
    <e-icon-picker ref="e-icon-picker" v-model="icon" :width="500" :highLightColor="highLightColor" :options="options"
                   :zIndex="zIndex">
      <template v-slot:default="{data}">
        <el-button @click="show">{{ data.placeholder }}</el-button>
      </template>
    </e-icon-picker>
    名称： {{ icon }}
    <e-icon :icon-name="icon" />
  </div>
</template>

<script>
import {EIcon, EIconPicker,} from 'e-icon-picker';

export default {
  name: "example8",
  components: {
    EIconPicker, EIcon
  },
  data() {
    return {
      icon: '',
      highLightColor: "#fc1944",
      options: {FontAwesome: true, ElementUI: true},
      zIndex: 3500
    }
  },
  methods: {
    show() {
      this.$refs['e-icon-picker'].show()
    }
  }
}
</script>

<style lang="css" scoped>
@import '~e-icon-picker/lib/index.css';
@import '~font-awesome/css/font-awesome.min.css';
@import '~element-ui/lib/theme-chalk/icon.css';
</style>

属性

参数	说明	默认值	可选值
value / v-model	绑定值	空	—
disabled	是否禁用	false	true/false
size	组件大小	medium	large/medium/small/mini
width	组件宽度	-1	number
readonly	原生属性，是否只读	false	true/false
defaultIcon	默认图标	eiconfont e-icon-bi	图标名
clearable	是否可清空	true	true/false
placement	弹窗位置	bottom	top/bottom
placeholder	输入框提示信息	请选择图标	任意
styles	组件自定义样式	空	无
emptyText	图标列表为空时默认显示的文本	暂无可选图标	任意
highLightColor	图标选中高亮（对svg图标无效）	空	任意（hex）
zIndex	显示的弹窗层数（会全局影响）	空	数字
options	图标参数	{FontAwesome: true, ElementUI: true, addIconList: [], removeIconList: []}	无
options.FontAwesome	是否使用FontAwesome图标	true	true/false
options.ElementUI	是否使用ElementUI图标	true	true/false
options.eIcon	自带彩色图标	true	true/false
options.eIconSymbol	是否使用彩色图标（false：则eIcon图标为单色）	true	true/false
options.addIconList	自定义新增图标列表	[]	无
options.removeIconList	自定义删除图标列表	[]	无

事件

事件名称	说明	回调参数
change	数值发生改变时回调	新状态的值

方法

方法名	说明	参数
addIcon	添加一个或多个图标	String / Array
removeIcon	删除一个或多个图标	String / Array
destroyIconList	销毁图标列表，不销毁输入框	-
createIconList	重新创建图标列表	-
show	触发选择器	-
hide	隐藏选择器	-

插槽

名称	说明	参数
-	触发器插槽	data 为触发器相关参数
prepend	input 输入框前缀组件	icon 参数为图标名称
icon	图标列表显示组件	icon 参数为图标名称