# 图标选择器

# 基础用法

名称:
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
显示代码 复制代码

# 高级用法

名称:

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
显示代码 复制代码

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

名称:
<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');
      console.log("定时任务触发");
    }, 5000);
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
显示代码 复制代码

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

# 组件内使用iconfont图标展示

# 组件内使用svg图标展示

# 在dialog中使用

# 属性

参数 说明 默认值 可选值
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

# 插槽

名称 说明 参数
prepend input 输入框前缀组件 icon 参数为图标名称
icon 图标列表显示组件 icon 参数为图标名称
上次更新: 2021/7/9 下午6:29:17