初始化

src/components/IconSelect/index.vue

+<template>
+  <!-- <div style="width:80px;height:40px;" class="chooseIcons"> -->
+
+  <div>
+    <el-popover
+      v-model="flag"
+      placement="bottom"
+      width="450"
+      trigger="click"
+      @show="show"
+      @hide="hide"
+    >
+      <div slot="reference" style="margin-top: 5px; cursor: pointer">
+        <img
+          v-if="!iconLogo"
+          style="width: 24px; height: 24px"
+          src="@/assets/index/icon_add.png"
+          alt=""
+          srcset=""
+        />
+
+        <i :class="iconLogo" style="font-size: 20px" />
+      </div>
+      <!-- 选择图标 -->
+      <div class="iconList">
+        <i
+          v-for="item in iconList"
+          :key="item"
+          :class="'el-icon-' + item"
+          style="font-size: 20px"
+          @click="setIcon(item)"
+        />
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+// import elementIcons from '@/utils/element-icons'
+export default {
+  props: {
+    logoValue: {
+      type: String,
+      default: "",
+    },
+  },
+  // model:{
+  //   prop:'value',
+  //   event:'changes'
+  // },
+  data() {
+    return {
+      flag: false,
+      iconLogo: this.logoValue,
+      iconList: [
+        "platform-eleme",
+        "eleme",
+        "delete-solid",
+        "delete",
+        "s-tools",
+        "setting",
+        "user-solid",
+        "user",
+        "phone",
+        "phone-outline",
+        "more",
+        "more-outline",
+        "star-on",
+        "star-off",
+        "s-goods",
+        "goods",
+        "warning",
+        "warning-outline",
+        "question",
+        "info",
+        "remove",
+        "circle-plus",
+        "success",
+        "error",
+        "zoom-in",
+        "zoom-out",
+        "remove-outline",
+        "circle-plus-outline",
+        "circle-check",
+        "circle-close",
+        "s-help",
+        "help",
+        "minus",
+        "plus",
+        "check",
+        "close",
+        "picture",
+        "picture-outline",
+        "picture-outline-round",
+        "upload",
+        "upload2",
+        "download",
+        "camera-solid",
+        "camera",
+        "video-camera-solid",
+        "video-camera",
+        "message-solid",
+        "bell",
+        "s-cooperation",
+        "s-order",
+        "s-platform",
+        "s-fold",
+        "s-unfold",
+        "s-operation",
+        "s-promotion",
+        "s-home",
+        "s-release",
+        "s-ticket",
+        "s-management",
+        "s-open",
+        "s-shop",
+        "s-marketing",
+        "s-flag",
+        "s-comment",
+        "s-finance",
+        "s-claim",
+        "s-custom",
+        "s-opportunity",
+        "s-data",
+        "s-check",
+        "s-grid",
+        "menu",
+        "share",
+        "d-caret",
+        "caret-left",
+        "caret-right",
+        "caret-bottom",
+        "caret-top",
+        "bottom-left",
+        "bottom-right",
+        "back",
+        "right",
+        "bottom",
+        "top",
+        "top-left",
+        "top-right",
+        "arrow-left",
+        "arrow-right",
+        "arrow-down",
+        "arrow-up",
+        "d-arrow-left",
+        "d-arrow-right",
+        "video-pause",
+        "video-play",
+        "refresh",
+        "refresh-right",
+        "refresh-left",
+        "finished",
+        "sort",
+        "sort-up",
+        "sort-down",
+        "rank",
+        "view",
+        "c-scale-to-original",
+        "date",
+        "edit",
+        "edit-outline",
+        "folder",
+        "folder-opened",
+        "folder-add",
+        "folder-remove",
+        "folder-delete",
+        "folder-checked",
+        "tickets",
+        "document-remove",
+        "document-delete",
+        "document-copy",
+        "document-checked",
+        "document",
+        "document-add",
+        "printer",
+        "paperclip",
+        "takeaway-box",
+        "search",
+        "monitor",
+        "attract",
+        "mobile",
+        "scissors",
+        "umbrella",
+        "headset",
+        "brush",
+        "mouse",
+        "coordinate",
+        "magic-stick",
+        "reading",
+        "data-line",
+        "data-board",
+        "pie-chart",
+        "data-analysis",
+        "collection-tag",
+        "film",
+        "suitcase",
+        "suitcase-1",
+        "receiving",
+        "collection",
+        "files",
+        "notebook-1",
+        "notebook-2",
+        "toilet-paper",
+        "office-building",
+        "school",
+        "table-lamp",
+        "house",
+        "no-smoking",
+        "smoking",
+        "shopping-cart-full",
+        "shopping-cart-1",
+        "shopping-cart-2",
+        "shopping-bag-1",
+        "shopping-bag-2",
+        "sold-out",
+        "sell",
+        "present",
+        "box",
+        "bank-card",
+        "money",
+        "coin",
+        "wallet",
+        "discount",
+        "price-tag",
+        "news",
+        "guide",
+        "male",
+        "female",
+        "thumb",
+        "cpu",
+        "link",
+        "connection",
+        "open",
+        "turn-off",
+        "set-up",
+        "chat-round",
+        "chat-line-round",
+        "chat-square",
+        "chat-dot-round",
+        "chat-dot-square",
+        "chat-line-square",
+        "message",
+        "postcard",
+        "position",
+        "turn-off-microphone",
+        "microphone",
+        "close-notification",
+        "bangzhu",
+        "time",
+        "odometer",
+        "crop",
+        "aim",
+        "switch-button",
+        "full-screen",
+        "copy-document",
+        "mic",
+        "stopwatch",
+        "medal-1",
+        "medal",
+        "trophy",
+        "trophy-1",
+        "first-aid-kit",
+        "discover",
+        "place",
+        "location",
+        "location-outline",
+        "location-information",
+        "add-location",
+        "delete-location",
+        "map-location",
+        "alarm-clock",
+        "timer",
+        "watch-1",
+        "watch",
+        "lock",
+        "unlock",
+        "key",
+        "service",
+        "mobile-phone",
+        "bicycle",
+        "truck",
+        "ship",
+        "basketball",
+        "football",
+        "soccer",
+        "baseball",
+        "wind-power",
+        "light-rain",
+        "lightning",
+        "heavy-rain",
+        "sunrise",
+        "sunrise-1",
+        "sunset",
+        "sunny",
+        "cloudy",
+        "partly-cloudy",
+        "cloudy-and-sunny",
+        "moon",
+        "moon-night",
+        "dish",
+        "dish-1",
+        "food",
+        "chicken",
+        "fork-spoon",
+        "knife-fork",
+        "burger",
+        "tableware",
+        "sugar",
+        "dessert",
+        "ice-cream",
+        "hot-water",
+        "water-cup",
+        "coffee-cup",
+        "cold-drink",
+        "goblet",
+        "goblet-full",
+        "goblet-square",
+        "goblet-square-full",
+        "refrigerator",
+        "grape",
+        "watermelon",
+        "cherry",
+        "apple",
+        "pear",
+        "orange",
+        "coffee",
+        "ice-tea",
+        "ice-drink",
+        "milk-tea",
+        "potato-strips",
+        "lollipop",
+        "ice-cream-square",
+        "ice-cream-round",
+      ],
+    };
+  },
+  mounted() {
+    // this.iconList=elementIcons
+  },
+  methods: {
+    setIcon(icon) {
+      this.iconLogo = "el-icon-" + icon; // 将i的样式设为选中的样式el-icon-xxx
+      this.flag = !this.flag;
+      this.$emit("update:logoValue", this.iconLogo);
+    },
+    show() {},
+    hide() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chooseIcons {
+  border: #e6e6e6 solid 1px;
+  text-align: center;
+  border-radius: 5px;
+}
+.iconList {
+  width: 400px;
+  height: 300px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  i {
+    display: inline-block;
+    width: 60px;
+    height: 45px;
+    color: #000000;
+    font-size: 50px;
+    border: 1px solid #e6e6e6;
+    border-radius: 4px;
+    cursor: pointer;
+    text-align: center;
+    line-height: 45px;
+    margin: 5px;
+    &:hover {
+      color: rgb(184, 62, 62);
+      border-color: rgb(148, 46, 46);
+    }
+  }
+}
+</style>

src/components/ImageCropper/utils/data2blob.js

+/**
+ * database64文件格式转换为2进制
+ *
+ * @param  {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
+ * @param  {[String]} mime [description]
+ * @return {[blob]}      [description]
+ */
+export default function(data, mime) {
+  data = data.split(',')[1]
+  data = window.atob(data)
+  var ia = new Uint8Array(data.length)
+  for (var i = 0; i < data.length; i++) {
+    ia[i] = data.charCodeAt(i)
+  }
+  // canvas.toDataURL 返回的默认格式就是 image/png
+  return new Blob([ia], {
+    type: mime
+  })
+}

src/components/ImageCropper/utils/mimes.js

+export default {
+  'jpg': 'image/jpeg',
+  'png': 'image/png',
+  'gif': 'image/gif',
+  'svg': 'image/svg+xml',
+  'psd': 'image/photoshop'
+}