e-icon-picker

Appearance

Return to top
本页目录

e-icon-picker 图标选择器

基本用法

名称： 
<template>
  
    <e-icon-picker v-model="icon" clearable highLightColor="#ff0000" size="large" @change="change"/>
  
  名称： {{ icon }}
  <e-icon :icon-name="icon"/>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'e-icon-picker-demo',
  setup() {
    let icon = ref("");
    const change = (val: string) => {
      console.log(val)
    }
    return {icon, change};
  },
});
</script>

高级用法

名称： 
<template>
  
    <e-icon-picker ref="iconPicker" v-model="icon" :options="options" :disabled="disabled" :readonly="readonly"
                   :placement="placement" :styles="style" :width="width" clearable/>
  
  名称： {{ icon }}
  <e-icon :icon-name="icon"/>
</template>
<script lang="ts">
import {defineComponent, reactive, toRefs, ref} from 'vue';
import eIconList from 'e-icon-picker/icon/default-icon/eIconList.js'

export default defineComponent({
  name: 'e-icon-picker-demo2',
  setup() {
    let iconPicker = ref(null);
    let state = reactive({
      icon: '',
      options: {addIconList: [...eIconList], removeIconList: []},
      disabled: false,
      readonly: false,
      placement: 'bottom',
      style: {},
      width: 800
    });
    return {...toRefs(state), iconPicker};
  },
});
</script>

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

名称： 
<template>
  
    <e-icon-picker ref="iconPicker" v-model="icon" :options="options" default-icon="component EditPen" placeholder="请选择"/>
  
  名称：{{icon}}
  <e-icon :icon-name="icon"/>
</template>
<script lang="ts">
import {defineComponent, reactive, toRefs, ref, onMounted} from 'vue';
import element from 'e-icon-picker/icon/ele/element-plus.js';

export default defineComponent({
  name: 'e-icon-picker-demo3',
  setup() {
    let iconPicker = ref(null);
    let state = reactive({
      icon: '',
      options: {addIconList: [...element], removeIconList: []}
    });
    //因为vite导入静态图片无法实现，所以才用这种方式
    const getImageUrl = (name) => {
      return new URL(`../../public/img/${name}`, import.meta.url).href
    }
    onMounted(() => {
      iconPicker.value?.addIcon("fa fa-slack");
      iconPicker.value?.removeIcon("fa fa-slack");//组件内动态删除图标

      setTimeout(() => {//通过修改参数进行重新设置组件
        state.options.addIconList.push('fa fa-slack');
        state.options.removeIconList.push('removeIconList');
        state.options.addIconList.push('http://www.icosky.com/images/wj/baidu.gif');
        state.options.addIconList.push(getImageUrl("img.png"));//动态导入图片
        state.options.addIconList.push("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAA2klEQVR4Xo1SiQ0DIQzLTreTd8pO7ETtPJSoalWEIICd2IA9z+q+P+KNjtE7xmn/3Qg2TAIXjqWJMdt9JoIqjC1HlIYoKePmqMIh5AEgHKDkIX1USYI2lA/CieMFclefhJbEA4ur6NOaiVbBFvY2nQJI9hWgrLaUKGTs5U041yoBEPVJ3/a2rqRRAzchm57JAh2cdH+Mz1uiKhAkM8bR8picYyxMn4erF+jcNUZwVbi+Bglmyk1QFolAo/sXSVTMTmEkE5Tu87puwjD9uyE9zA+s7xBBLatOba4XX3AVCHee8yAAAAAASUVORK5CYII=");//base64形式
        console.log("定时任务触发");
      }, 5000);
    })
    return {...toRefs(state), iconPicker};
  },
});
</script>

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

名称： 
<template>
  
    <e-icon-picker ref="iconPicker" v-model="icon" :options="options" placeholder="请选择"/>
  
  名称：{{icon}}
  <e-icon :icon-name="icon"/>
</template>
<script lang="ts">
import {defineComponent, onMounted, reactive, ref, toRefs} from 'vue';
import {eIconSymbol} from 'e-icon-picker';
import '../../public/js/iconfont.js'
import iconfont from '../../public/css/iconfont.json' //引入图标名称json

export default defineComponent({
  name: 'e-icon-picker-demo4',
  setup() {
    let iconPicker = ref(null);
    let state = reactive({
      icon: '',
      options: {}
    });

    const addIcon = () => {
      let icon = eIconSymbol(iconfont);//处理彩色图标
      state.options.addIconList = icon.list;//将彩色图标列表加入到图标选择器
    }
    onMounted(() => {
      addIcon();
    })
    return {...toRefs(state), iconPicker};
  },
});
</script>

组件内使用iconfont图标展示

名称： 
<template>
  
    <e-icon-picker ref="iconPicker" v-model="icon" :options="options" placeholder="请选择"/>
  
  名称：{{icon}}
  <e-icon :icon-name="icon"/>
</template>
<script lang="ts">
import {defineComponent, onMounted, reactive, ref, toRefs} from 'vue';
import {analyzingIconForIconfont} from 'e-icon-picker';
import iconfont from '../../public/css/iconfont.json' //引入图标名称json

export default defineComponent({
  name: 'e-icon-picker-demo5',
  setup() {
    let iconPicker = ref(null);
    let state = reactive({
      icon: '',
      options: {}
    });

    const addIcon = () => {
      let icon = analyzingIconForIconfont(iconfont);//处理图标
      state.options.addIconList = icon.list;//将图标列表加入到图标选择器
    }
    onMounted(() => {
      addIcon();
    })
    return {...toRefs(state), iconPicker};
  },
});
</script>
<style lang="scss" scoped>
@import '../../public/css/iconfont.css';
</style>

组件内使用svg图标展示

名称： 
<template>
  
    <e-icon-picker ref="iconPicker" v-model="icon" :options="options" placeholder="请选择"/>
  
  名称：{{icon}}
  <e-icon :icon-name="icon"/>
</template>
<script lang="ts">
import {defineComponent, onMounted, reactive, ref, toRefs} from 'vue';
import svgNames from 'virtual:svg-icons-names';//获取图标名称
import 'virtual:svg-icons-register';//将图标注册到dom中

export default defineComponent({
  name: 'e-icon-picker-demo6',
  setup() {
    let iconPicker = ref(null);
    let state = reactive({
      icon: '',
      options: {}
    });

    const addIcon = () => {
      state.options.addIconList = svgNames.map(it => `#${it}`);//svg图标是以‘#’开头的，所以对名称进行处理，将处理完的图标列表加入到图标选择器
    }
    onMounted(() => {
      addIcon();
    })
    return {...toRefs(state), iconPicker};
  },
});
</script>

在dialog中使用

名称： 
<template>
  <el-button type="primary" @click="dialogVisible = true">点击打开 Dialog</el-button>
  
    <el-dialog
        title="在dialog中使用"
        v-model="dialogVisible"
        width="30%">
      <e-icon-picker ref="iconPicker" v-model="icon" placeholder="请选择"/>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  
  名称：{{icon}}
  <e-icon :icon-name="icon"/>
</template>
<script lang="ts">
import {defineComponent, reactive, ref, toRefs, watch} from 'vue';

export default defineComponent({
  name: 'e-icon-picker-demo7',
  setup() {
    let iconPicker = ref(null);
    const dialogVisible = ref(false)
    let state = reactive({
      icon: ''
    });

    watch(dialogVisible, (val, old) => {
      if (!val && iconPicker.value) {
        iconPicker.value.destroyIconList()//销毁图标列表，防止页面节点太多
      }
    })
    return {...toRefs(state), dialogVisible, iconPicker};
  },
});
</script>
<style lang="scss" scoped>
.dialog-footer button {
  margin-right: 10px;
}
</style>

自定义触发器

名称： 
<template>
  
    <e-icon-picker ref="iconPicker" v-model="icon" :options="options" :zIndex="zIndex" :width="width">
      <template v-slot="{data}">
        <el-button @click="show">{{ data.placeholder }}</el-button>
      </template>
    </e-icon-picker>
  
  名称：{{icon}}
  <e-icon :icon-name="icon"/>
</template>
<script lang="ts">
import {defineComponent, reactive, ref, toRefs, shallowRef} from 'vue';
import eIconList from 'e-icon-picker/icon/default-icon/eIconList.js'
import {IconPickerInstance} from 'e-icon-picker'

export default defineComponent({
  name: 'e-icon-picker-demo8',
  setup() {
    let iconPicker = shallowRef<IconPickerInstance>();
    const dialogVisible = ref(false)
    let state = reactive({
      icon: '',
      zIndex: 3500,
      width: 800,
      options: {addIconList: [...eIconList], removeIconList: []},
    });

    const show = () => {
      iconPicker.value.show()
    }
    return {...toRefs(state), dialogVisible, iconPicker, show};
  },
});
</script>
<style lang="scss" scoped>
.dialog-footer button {
  margin-right: 10px;
}
</style>

主题切换

名称： 
<template>
  <div class="popper-container" :class="theme">
    <div>
      <input type="radio" v-model="theme" id="light" value="light"/>
      <label for="light">Light theme</label>
      <input type="radio" v-model="theme" id="dark" value="dark"/>
      <label for="dark">Dark theme</label>
    </div>
    <div class="popper-container-icon">
      
        <e-icon-picker v-model="icon" :content-class="theme"/>
      
      名称： {{ icon }}
      <e-icon :icon-name="icon"/>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'e-icon-picker-demo9',
  components: {},
  setup() {
    let theme = ref("light");
    let icon = ref("");
    return {
      theme,
      icon
    };
  },
});
</script>
<style scoped lang="scss">
@import '~e-icon-picker/theme/theme.css';

.popper-container {
  padding: 20px;
  border: 2px dashed #dadada;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: space-around;

  &-icon {
    width: 100%;
  }
}

.dark {
  background-color: #312a2a;
  color: #fff;
}

.light {
  background-color: #fff;
  color: #000;
}

</style>

属性

参数说明默认值可选值
model-value / v-model绑定值空—
disabled是否禁用falsetrue/false
size组件大小mediumlarge/medium/small/mini
width组件宽度-1number
readonly原生属性，是否只读falsetrue/false
defaultIcon默认图标eiconfont e-icon-bi图标名
clearable是否可清空falsetrue/false
placement弹窗位置bottomtop/bottom
placeholder输入框提示信息请选择图标任意
styles组件自定义样式空无
emptyText图标列表为空时默认显示的文本暂无可选图标任意
highLightColor图标选中高亮（对svg图标无效）空任意（hex）
zIndex显示的弹窗层数（会全局影响）空数字
appendBody弹窗内容追加到body删除falsetrue/false
contentClass弹窗内容类样式空
options图标参数object无

options

参数说明默认值可选值
options.addIconList自定义新增图标列表[]无
options.removeIconList自定义删除图标列表[]无

事件

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

方法

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

插槽

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