vue自定义实现icon选择器_vue图标选择器

<template>

  <div>

    <span class="iconStyle" @click="selectIcon">

      <i :class="value" />

    </span>

    <div class="iconTitle">选择图标</div>

    <el-dialog

      title=""

      :visible.sync="dialogVisible"

      width="40%"

      :close-on-click-modal="false"

      :modal="false"

      :show-close="false"

    >

      <div class="iconList">

        <el-tabs v-model="activeName">

          <el-tab-pane

            v-for="item in list"

            :key="item.label"

            :name="item.label"

            :label="item.label"

          >

            <el-scrollbar wrap-class="scrollbar-wrapper">

              <span class="icon" v-for="(item, index) in item.list" :key="item">

                <i

                  :key="item"

                  :class="[item]"

                  :style="{ color: showIndex == index ? '#3a84ff' : '' }"

                  @click="setIcon(item, index)"

                ></i>

              </span>

            </el-scrollbar>

          </el-tab-pane>

        </el-tabs>

      </div>

      <span slot="footer" class="dialog-footer">

        <el-button type="primary" @click="dialogVisible = false"

          >确定</el-button

        >

        <el-button @click="cancel">取消</el-button>

      </span>

    </el-dialog>

  </div>

</template>

  <script>

export default {

  name: "selectIcon",

  model: {

    prop: "value",

    event: "input",

  },

  props: {

    value: {

      type: String,

      default: "",

    },

  },

  data() {

    return {

      dialogVisible: false,

      activeName: "系统图标",

      showIndex: 0,

      list: [

        // {

        //   label: "线框",

        //   list: [

        //     "el-icon-eleme",

        //     "el-icon-delete",

        //     "el-icon-setting",

        //     "el-icon-user",

        //     "el-icon-phone-outline",

        //     "el-icon-more-outline",

        //     "el-icon-star-off",

        //     "el-icon-goods",

        //     "el-icon-warning-outline",

        //     "el-icon-zoom-in",

        //     "el-icon-zoom-out",

        //     "el-icon-remove-outline",

        //     "el-icon-circle-plus-outline",

        //     "el-icon-circle-check",

        //     "el-icon-circle-close",

        //     "el-icon-help",

        //     "el-icon-minus",

        //     "el-icon-plus",

        //     "el-icon-check",

        //     "el-icon-close",

        //     "el-icon-picture-outline",

        //     "el-icon-picture-outline-round",

        //     "el-icon-upload2",

        //     "el-icon-download",

        //     "el-icon-camera",

        //     "el-icon-video-camera",

        //     "el-icon-bell",

        //     "el-icon-bottom-left",

        //     "el-icon-bottom-right",

        //     "el-icon-back",

        //     "el-icon-right",

        //     "el-icon-bottom",

        //     "el-icon-top",

        //     "el-icon-top-left",

        //     "el-icon-top-right",

        //     "el-icon-arrow-left",

        //     "el-icon-arrow-right",

        //     "el-icon-arrow-down",

        //     "el-icon-arrow-up",

        //     "el-icon-d-arrow-left",

        //     "el-icon-d-arrow-right",

        //     "el-icon-video-pause",

        //     "el-icon-video-play",

        //     "el-icon-refresh",

        //     "el-icon-refresh-right",

        //     "el-icon-refresh-left",

        //     "el-icon-finished",

        //     "el-icon-sort",

        //     "el-icon-sort-up",

        //     "el-icon-sort-down",

        //     "el-icon-rank",

        //     "el-icon-loading",

        //     "el-icon-view",

        //     "el-icon-c-scale-to-original",

        //     "el-icon-date",

        //     "el-icon-edit",

        //     "el-icon-edit-outline",

        //     "el-icon-folder",

        //     "el-icon-folder-opened",

        //     "el-icon-folder-add",

        //     "el-icon-folder-remove",

        //     "el-icon-folder-delete",

        //     "el-icon-folder-checked",

        //     "el-icon-tickets",

        //     "el-icon-document-remove",

        //     "el-icon-document-delete",

        //     "el-icon-document-copy",

        //     "el-icon-document-checked",

        //     "el-icon-document",

        //     "el-icon-document-add",

        //     "el-icon-printer",

        //     "el-icon-paperclip",

        //     "el-icon-takeaway-box",

        //     "el-icon-search",

        //     "el-icon-monitor",

        //     "el-icon-attract",

        //     "el-icon-mobile",

        //     "el-icon-scissors",

        //     "el-icon-umbrella",

        //     "el-icon-headset",

        //     "el-icon-brush",

        //     "el-icon-mouse",

        //     "el-icon-coordinate",

        //     "el-icon-magic-stick",

        //     "el-icon-reading",

        //     "el-icon-data-line",

        //     "el-icon-data-board",

        //     "el-icon-pie-chart",

        //     "el-icon-data-analysis",

        //     "el-icon-collection-tag",

        //     "el-icon-film",

        //     "el-icon-suitcase",

        //     "el-icon-suitcase-1",

        //     "el-icon-receiving",

        //     "el-icon-collection",

        //     "el-icon-files",

        //     "el-icon-notebook-1",

        //     "el-icon-notebook-2",

        //     "el-icon-toilet-paper",

        //     "el-icon-office-building",

        //     "el-icon-school",

        //     "el-icon-table-lamp",

        //     "el-icon-house",

        //     "el-icon-no-smoking",

        //     "el-icon-smoking",

        //     "el-icon-shopping-cart-full",

        //     "el-icon-shopping-cart-1",

        //     "el-icon-shopping-cart-2",

        //     "el-icon-shopping-bag-1",

        //     "el-icon-shopping-bag-2",

        //     "el-icon-sold-out",

        //     "el-icon-sell",

        //     "el-icon-present",

        //     "el-icon-box",

        //     "el-icon-bank-card",

        //     "el-icon-money",

        //     "el-icon-coin",

        //     "el-icon-wallet",

        //     "el-icon-discount",

        //     "el-icon-price-tag",

        //     "el-icon-news",

        //     "el-icon-guide",

        //     "el-icon-male",

        //     "el-icon-female",

        //     "el-icon-thumb",

        //     "el-icon-cpu",

        //     "el-icon-link",

        //     "el-icon-connection",

        //     "el-icon-open",

        //     "el-icon-turn-off",

        //     "el-icon-set-up",

        //     "el-icon-chat-round",

        //     "el-icon-chat-line-round",

        //     "el-icon-chat-square",

        //     "el-icon-chat-dot-round",

        //     "el-icon-chat-dot-square",

        //     "el-icon-chat-line-square",

        //     "el-icon-message",

        //     "el-icon-postcard",

        //     "el-icon-position",

        //     "el-icon-turn-off-microphone",

        //     "el-icon-microphone",

        //     "el-icon-close-notification",

        //     "el-icon-bangzhu",

        //     "el-icon-time",

        //     "el-icon-odometer",

        //     "el-icon-crop",

        //     "el-icon-aim",

        //     "el-icon-switch-button",

        //     "el-icon-full-screen",

        //     "el-icon-copy-document",

        //     "el-icon-mic",

        //     "el-icon-stopwatch",

        //     "el-icon-medal-1",

        //     "el-icon-medal",

        //     "el-icon-trophy",

        //     "el-icon-trophy-1",

        //     "el-icon-first-aid-kit",

        //     "el-icon-discover",

        //     "el-icon-place",

        //     "el-icon-location",

        //     "el-icon-location-outline",

        //     "el-icon-location-information",

        //     "el-icon-add-location",

        //     "el-icon-delete-location",

        //     "el-icon-map-location",

        //     "el-icon-alarm-clock",

        //     "el-icon-timer",

        //     "el-icon-watch-1",

        //     "el-icon-watch",

        //     "el-icon-lock",

        //     "el-icon-unlock",

        //     "el-icon-key",

        //     "el-icon-service",

        //     "el-icon-mobile-phone",

        //     "el-icon-bicycle",

        //     "el-icon-truck",

        //     "el-icon-ship",

        //     "el-icon-basketball",

        //     "el-icon-football",

        //     "el-icon-soccer",

        //     "el-icon-baseball",

        //     "el-icon-wind-power",

        //     "el-icon-light-rain",

        //     "el-icon-lightning",

        //     "el-icon-heavy-rain",

        //     "el-icon-sunrise",

        //     "el-icon-sunrise-1",

        //     "el-icon-sunset",

        //     "el-icon-sunny",

        //     "el-icon-cloudy",

        //     "el-icon-partly-cloudy",

        //     "el-icon-cloudy-and-sunny",

        //     "el-icon-moon",

        //     "el-icon-moon-night",

        //     "el-icon-dish",

        //     "el-icon-dish-1",

        //     "el-icon-food",

        //     "el-icon-chicken",

        //     "el-icon-fork-spoon",

        //     "el-icon-knife-fork",

        //     "el-icon-burger",

        //     "el-icon-tableware",

        //     "el-icon-sugar",

        //     "el-icon-dessert",

        //     "el-icon-ice-cream",

        //     "el-icon-hot-water",

        //     "el-icon-water-cup",

        //     "el-icon-coffee-cup",

        //     "el-icon-cold-drink",

        //     "el-icon-goblet",

        //     "el-icon-goblet-full",

        //     "el-icon-goblet-square",

        //     "el-icon-goblet-square-full",

        //     "el-icon-refrigerator",

        //     "el-icon-grape",

        //     "el-icon-watermelon",

        //     "el-icon-cherry",

        //     "el-icon-apple",

        //     "el-icon-pear",

        //     "el-icon-orange",

        //     "el-icon-coffee",

        //     "el-icon-ice-tea",

        //     "el-icon-ice-drink",

        //     "el-icon-milk-tea",

        //     "el-icon-potato-strips",

        //     "el-icon-lollipop",

        //     "el-icon-ice-cream-square",

        //     "el-icon-ice-cream-round",

        //   ],

        // },

        {

          label: "系统图标",

          list: [

            "el-icon-question",

            "el-icon-platform-eleme",

            "el-icon-delete-solid",

            "el-icon-s-tools",

            "el-icon-user-solid",

            "el-icon-phone",

            "el-icon-more",

            "el-icon-star-on",

            "el-icon-s-goods",

            "el-icon-warning",

            "el-icon-info",

            "el-icon-remove",

            "el-icon-circle-plus",

            "el-icon-success",

            "el-icon-error",

            "el-icon-s-help",

            "el-icon-picture",

            "el-icon-upload",

            "el-icon-camera-solid",

            "el-icon-video-camera-solid",

            "el-icon-message-solid",

            "el-icon-s-cooperation",

            "el-icon-s-order",

            "el-icon-s-platform",

            "el-icon-s-fold",

            "el-icon-s-unfold",

            "el-icon-s-operation",

            "el-icon-s-promotion",

            "el-icon-s-home",

            "el-icon-s-release",

            "el-icon-s-ticket",

            "el-icon-s-management",

            "el-icon-s-open",

            "el-icon-s-shop",

            "el-icon-s-marketing",

            "el-icon-s-flag",

            "el-icon-s-comment",

            "el-icon-s-finance",

            "el-icon-s-claim",

            "el-icon-s-custom",

            "el-icon-s-opportunity",

            "el-icon-s-data",

            "el-icon-s-check",

            "el-icon-s-grid",

            "el-icon-menu",

            "el-icon-share",

            "el-icon-d-caret",

            "el-icon-caret-left",

            "el-icon-caret-right",

            "el-icon-caret-bottom",

            "el-icon-caret-top",

          ],

        },

      ],

    };

  },

  methods: {

    setIcon(row, index) {

      this.showIndex = index;

      this.$emit("input", row);

    },

    cancel() {

        this.dialogVisible = false

        this.showIndex = 0;

        this.$emit('cancelIcon')

    },

    selectIcon() {

      this.dialogVisible = true;

    },

  },

};

</script>

  <style scoped lang="scss">

.iconList {

  .el-tab-pane {

    .el-scrollbar {

      width: 600px;

      height: 388px;

      overflow-x: hidden !important;

      .icon {

        display: inline-block;

        width: calc((100% - 60px) / 6);

        height: 40px;

        border: 1px solid #ededed;

        text-align: center;

        box-sizing: border-box;

        line-height: 38px;

        margin-right: 10px;

        border-radius: 3px;

        margin-top: 10px;

        cursor: pointer;

        &:nth-child(-n + 6) {

          margin-top: 0;

        }

        i {

          font-size: 16px;

          color: #303133;

          transition: all 100ms;

        }

        &:hover {

          box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);

          i {

            transform: scale(1.5);

          }

        }

      }

    }

  }

}

.iconStyle {

  display: inline-block;

  width: 85px;

  height: 85px;

  border-radius: 50%;

  border: 1px solid #ccc;

  text-align: center;

  line-height: 116px;

  cursor: pointer;

  i {

    font-size: 60px;

    color: #3a84ff;

  }

}

.iconTitle {

    margin-left: 15px;

    margin-top: 3px;

}

</style>