春风项目四线(合箱线、总装线)
wujian
2024-01-24 78830ddf56a41d16ab440a1ed3019ef77b3db4af
提交 | 用户 | 时间
fd2207 1 <!-- @author zhengjie -->
2 <template>
3   <div class="icon-body">
4     <el-input v-model="name" class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
5       <i slot="suffix" class="el-icon-search el-input__icon" />
6     </el-input>
7     <div class="icon-list">
8       <div class="list-container">
9         <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">
10           <div :class="['icon-item', { active: activeIcon === item }]">
11             <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/>
12             <span>{{ item }}</span>
13           </div>
14         </div>
15       </div>
16     </div>
17   </div>
18 </template>
19
20 <script>
21 import icons from './requireIcons'
22 export default {
23   name: 'IconSelect',
24   props: {
25     activeIcon: {
26       type: String
27     }
28   },
29   data() {
30     return {
31       name: '',
32       iconList: icons
33     }
34   },
35   methods: {
36     filterIcons() {
37       this.iconList = icons
38       if (this.name) {
39         this.iconList = this.iconList.filter(item => item.includes(this.name))
40       }
41     },
42     selectedIcon(name) {
43       this.$emit('selected', name)
44       document.body.click()
45     },
46     reset() {
47       this.name = ''
48       this.iconList = icons
49     }
50   }
51 }
52 </script>
53
54 <style rel="stylesheet/scss" lang="scss" scoped>
55   .icon-body {
56     width: 100%;
57     padding: 10px;
58     .icon-search {
59       position: relative;
60       margin-bottom: 5px;
61     }
62     .icon-list {
63       height: 200px;
64       overflow: auto;
65       .list-container {
66         display: flex;
67         flex-wrap: wrap;
68         .icon-item-wrapper {
69           width: calc(100% / 3);
70           height: 25px;
71           line-height: 25px;
72           cursor: pointer;
73           display: flex;
74           .icon-item {
75             display: flex;
76             max-width: 100%;
77             height: 100%;
78             padding: 0 5px;
79             &:hover {
80               background: #ececec;
81               border-radius: 5px;
82             }
83             .icon {
84               flex-shrink: 0;
85             }
86             span {
87               display: inline-block;
88               vertical-align: -0.15em;
89               fill: currentColor;
90               padding-left: 2px;
91               overflow: hidden;
92               text-overflow: ellipsis;
93               white-space: nowrap;
94             }
95           }
96           .icon-item.active {
97             background: #ececec;
98             border-radius: 5px;
99           }
100         }
101       }
102     }
103   }
104 </style>