vue 中引入阿里图标库，封装iconPicker组件

一.引入阿里图标库

1.vue项目引入阿里图标库

二.封装iconPicker组件

1.子组件

<template>
  <el-popover
    placement="bottom"
    title=""
    width="200"
    trigger="manual"
    v-model="visible"
    @mouseleave="mouseleave"
  >
    <div class="icon_box">
      <template v-if="showTooltip">
        <el-tooltip
          v-for="item in iconJsonList"
          :key="item.font_class"
          effect="light"
          :content="item.name"
          placement="top"
        >
          <span
            :class="`iconfont icon-${item.font_class}`"
            @click="checkIcon(item)"
          ></span>
        </el-tooltip>
      </template>
      <template v-if="!showTooltip">
        <span
          v-for="item in iconJsonList"
          :key="item.font_class"
          :class="`iconfont icon-${item.font_class}`"
          @click="checkIcon(item)"
        ></span>
      </template>
    </div>
    <el-input
      ref="input"
      :value="value"
      slot="reference"
      @focus="visible = true"
      @blur="inputBlur"
      @input="inputBlur"
      ><template slot="prepend"> <i :class="value"></i> </template
    ></el-input>
  </el-popover>
</template>
  
  <script>
import iconJson from "@/assets/icon-font/iconfont.json";
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
    showTooltip: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      iconJsonList: iconJson.glyphs,
    };
  },
  watch: {
    value(val) {
      if (typeof val == "string") {
        this.$emit("update:value", val);
        this.visible = false;
      }
    },
  },
  mounted() {
    // console.log(iconJson);
  },
  methods: {
    inputBlur(val) {
      if (typeof val == "string") {
        this.$emit("update:value", val);
        this.visible = false;
      }
    },
    checkIcon(item) {
      let iconCode = `iconfont icon-${item.font_class}`;
      this.$emit("update:value", iconCode);
    },
    mouseleave() {
      this.visible = false;
      this.$refs.input.blur();
    },
  },
};
</script>
  
  <style lang="less" scoped>
/deep/ .el-popover {
  width: 300px !important;
}
.icon_box {
  width: 100%;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow-y: auto;
  .iconfont {
    width: 25%;
    flex-basis: auto;
    margin: 5px 0;
    cursor: pointer;
  }
}
</style>
  

2.父组件调用

<template>
  <div class="achieves-check">
      <iconPicker :value.sync="value"></iconPicker>
  </div>
</template>

<script>
import iconPicker from "@/components/iconPicker/index.vue";
export default {
  components: {
    iconPicker,
  },
  data() {
    return {
      value: "",
    };
  },
  watch: {
    value(val) {
      console.log(val);
    },
  },
};
</script>

三.效果图