使用实例

<computerIcon :img.sync="ruleForm.imgPath"></computerIcon>

代码

/**
* @Author: 858834013@qq.com
* @Name: ComputerIcon
* @Date: 2022-05-15
* @Desc: 图标选择
*/
<template>
  <div>
    <el-popover
      placement="bottom"
      width="350"
      trigger="click">
      <div class="iconsBody">
        <div
          v-for="(item,index) in list"
          :key="index"
          class="icons"
          :class="{borderColor:img===item.img}"
          @click="getActive(item.img)">
          <img :src="item.img" alt="">
        </div>
      </div>
      <div class="pictureIcon" slot="reference">
        <img :src="img" alt="">
        <el-link :underline="false" type="primary">更改图标</el-link>
      </div>
    </el-popover>

  </div>
</template>

<script>

export default {
  name: 'ComputerIcon',
  props: {
    img: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      active: 0,
      list: [
        {
          img: '/icons/icon_x1.png'
        },
        {
          img: '/icons/icon_x2.png'
        },
        {
          img: '/icons/icon_x3.png'
        },
        {
          img: '/icons/icon_x4.png'
        },
        {
          img: '/icons/icon_x5.png'
        },
        {
          img: '/icons/icon_x6.png'
        },
        {
          img: '/icons/icon_x7.png'
        },
        {
          img: '/icons/icon_x9.png'
        },
        {
          img: '/icons/icon_x10.png'
        },
        {
          img: '/icons/icon_x11.png'
        },
        {
          img: '/icons/icon_x12.png'
        }
      ]
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    getActive(img) {
      this.$emit('update:img', img)
    }
  }
}
</script>

<style lang="scss" scoped>
.icons {
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  border: 1px solid #fff;
  box-sizing: border-box;

  img {
    width: 55px;
    height: 55px;
  }
}

.icons.borderColor {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.iconsBody {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
}

.pictureIcon {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  img {
    width: 60px;
    height: 60px;
    margin-right: 0px;
  }
}
</style>