update 新增图标选择组件,优化菜单编辑功能

Web/src/components/yoIconSelector/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <a-drawer :visible="visible" @close="onClose" class="yo-icon-selector" title="选择图标" width="600">
+    <a-tabs tab-position="left" v-model="active">
+      <a-tab-pane :key="iconGroup.key" :tab="iconGroup.title" v-for="iconGroup in icons">
+        <a-card>
+          <a-card-grid
+            :class="{ 'yo-icon--selected': selected == icon }"
+            :key="icon"
+            @click="onSelectIcon(icon)"
+            v-for="icon in iconGroup.icons"
+          >
+            <a-icon :style="{ fontSize: '36px' }" :type="icon" />
+            <span>{{ icon }}</span>
+          </a-card-grid>
+        </a-card>
+      </a-tab-pane>
+    </a-tabs>
+  </a-drawer>
+</template>
+<script>
+import icons from './icons';
+
+export default {
+  model: {
+    prop: 'selected',
+    event: 'select',
+  },
+  props: {
+    selected: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+
+      icons,
+
+      active: icons[0].key,
+    };
+  },
+
+  methods: {
+    onOpen() {
+      this.visible = true;
+      if (this.selected) {
+        this.active = (icons.find((p) => p.icons.indexOf(this.selected) > -1) || icons[0]).key;
+      } else {
+        this.active = icons[0].key;
+      }
+    },
+
+    onClose() {
+      this.visible = false;
+    },
+
+    onSelectIcon(icon) {
+      this.$emit('select', icon);
+      this.onClose();
+    },
+  },
+};
+</script>