inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div :class="prefixCls">
3     <a-tabs v-model="currentTab" @change="handleTabChange">
4       <a-tab-pane v-for="v in icons" :tab="v.title" :key="v.key">
5         <ul>
6           <li v-for="(icon, key) in v.icons" :key="`${v.key}-${key}`" :class="{ 'active': selectedIcon==icon }" @click="handleSelectedIcon(icon)" >
7             <a-icon :type="icon" :style="{ fontSize: '36px' }" />
8           </li>
9         </ul>
10       </a-tab-pane>
11     </a-tabs>
12   </div>
13 </template>
14
15 <script>
16 import icons from './icons'
17
18 export default {
19   name: 'IconSelect',
20   props: {
21     prefixCls: {
22       type: String,
23       default: 'ant-pro-icon-selector'
24     },
25     // eslint-disable-next-line
26     value: {
27       type: String
28     }
29   },
30   data () {
31     return {
32       selectedIcon: this.value || '',
33       currentTab: 'directional',
34       icons
35     }
36   },
37   watch: {
38     value (val) {
39       this.selectedIcon = val
40       this.autoSwitchTab()
41     }
42   },
43   created () {
44     if (this.value) {
45       this.autoSwitchTab()
46     }
47   },
48   methods: {
49     handleSelectedIcon (icon) {
50       this.selectedIcon = icon
51       this.$emit('change', icon)
52     },
53     handleTabChange (activeKey) {
54       this.currentTab = activeKey
55     },
56     autoSwitchTab () {
57       icons.some(item => item.icons.some(icon => icon === this.value) && (this.currentTab = item.key))
58     }
59   }
60 }
61 </script>
62
63 <style lang="less" scoped>
64   @import "../index.less";
65
66   ul{
67     list-style: none;
68     padding: 0;
69     overflow-y: scroll;
70     height: 250px;
71
72     li{
73       display: inline-block;
74       padding: @padding-sm;
75       margin: 3px 0;
76       border-radius: @border-radius-base;
77
78       &:hover, &.active{
79         // box-shadow: 0px 0px 5px 2px @primary-color;
80         cursor: pointer;
81         color: @white;
82         background-color: @primary-color;
83       }
84     }
85   }
86 </style>