feat: add icon-selector component

Author: sendya

src/components/IconSelector/IconSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <a-tabs>
+      <a-tab-pane v-for="(v, i) in icons" :tab="v.title" :key="i">
+        <ul>
+          <li v-for="(icon, key) in v.icons" :key="`${v.title}-${key}`" :class="{ 'active': selectedIcon==icon }">
+            <a-icon :type="icon" :style="{ fontSize: '36px' }" @click="handleSelectedIcon(icon)" />
+          </li>
+        </ul>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script>
+import icons from './icons'
+
+export default {
+  name: 'IconSelect',
+  data () {
+    return {
+      selectedIcon: '',
+      icons
+    }
+  },
+  methods: {
+    handleSelectedIcon (icon) {
+      this.selectedIcon = icon
+      this.$emit('change', icon)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  ul{
+    list-style: none;
+    padding: 0;
+    overflow-y: scroll;
+    height: 250px;
+    li{
+      display: inline-block;
+      padding:5px;
+      margin:5px;
+      &:hover {
+        cursor: pointer;
+      }
+      &.active{
+        box-shadow: 0px 0px 5px 2px #888888;
+      }
+    }
+  }
+</style>

src/components/IconSelector/README.md

@@ -0,0 +1,48 @@
+IconSelector
+====
+
+> 图标选择组件，常用于为某一个数据设定一个图标时使用
+> eg: 设定菜单列表时，为每个菜单设定一个图标
+
+该组件由 [@AraragiTsukihiz](https://github.com./araragitsukihiz) 封装
+
+
+
+### 使用方式
+
+```vue
+<template>
+	<div>
+       <icon-selector @change="handleIconChange"/>
+    </div>
+</template>
+
+<script>
+import IconSelector from '@/components/IconSelector'
+
+export default {
+  name: 'YourView',
+  components: {
+    IconSelector
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+    handleIconChange (icon) {
+      console.log('change Icon', icon)
+    }
+  }
+}
+</script>
+```
+
+
+
+### 事件
+
+
+| 名称   | 说明                       | 类型   | 默认值 |
+| ------ | -------------------------- | ------ | ------ |
+| change | 当改变了 `icon` 选中项触发 | String | -      |

src/components/IconSelector/icons.js

@@ -0,0 +1,2 @@
+import IconSelector from './IconSelector'
+export default IconSelector

src/components/IconSelector/index.js

@@ -308,6 +308,23 @@ export const asyncRouterMap = [
             ]
           }
         ]
+      },
+
+      // other
+      {
+        path: '/other',
+        name: 'otherPage',
+        component: PageView,
+        meta: { title: '其他组件', icon: 'slack', permission: [ 'dashboard' ] },
+        redirect: '/other/icon-selector',
+        children: [
+          {
+            path: '/other/icon-selector',
+            name: 'TestIconSelect',
+            component: () => import('@/views/other/IconSelectorView'),
+            meta: { title: 'IconSelector', keepAlive: true, permission: [ 'dashboard' ] }
+          }
+        ]
       }
     ]
   },

src/config/router.config.js

@@ -0,0 +1,27 @@
+<template>
+  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+    <icon-selector @change="handleIconChange"/>
+  </a-card>
+</template>
+
+<script>
+import IconSelector from '@/components/IconSelector'
+
+export default {
+  name: 'IconSelectorView',
+  components: {
+    IconSelector
+  },
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    handleIconChange (icon) {
+      console.log('change Icon', icon)
+      this.$message.info(<span>选中图标 <code>{icon}</code></span>)
+    }
+  }
+}
+</script>