element UI的icon组件库使用方法

南栀@F

已于 2024-06-17 17:35:31 修改

阅读量1.5k

点赞数 3

分类专栏： vue JavaScript 文章标签： ui elementui css vue.js

于 2022-02-11 08:55:22 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_37971962/article/details/122873166

版权

JavaScript 同时被 2 个专栏收录

11 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

这篇博客展示了如何在Vue应用中使用`e-icon-picker`库来引入和使用图标选择器。通过示例代码，作者详细介绍了组件的基本用法，包括v-model绑定、高亮颜色设置、选项配置以及z-index调整，同时还引入了Font Awesome和Element UI的图标库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按需引入----自行安装

npm install e-icon-picker

<template>
  <div style="margin: 0 auto;width: 500px">
    <h2>基础用法</h2>
    <e-icon-picker v-model="icon" :highLightColor="highLightColor" :options="options" :zIndex="zIndex" />
    名称： {{ icon }}
    <e-icon :icon-name="icon"/>
  </div>
</template>

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

export default {
  name: "example1",
  components: {
    EIconPicker, EIcon
  },
  data() {
    return {
      icon: '',
      highLightColor: "#fc1944",
      options: {FontAwesome: true, ElementUI: true},
      zIndex:3500
    }
  },
}
</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>