春风项目四线(合箱线、总装线)
懒羊羊
2024-01-15 7f1dbf4296013a4b15fbc2748de072f7c7ad4388
提交 | 用户 | 时间
fd2207 1 <template>
2   <div class="icons-container">
3     <aside>
4       <a href="#" target="_blank">Add and use
5       </a>
6     </aside>
7     <el-tabs type="border-card">
8       <el-tab-pane label="Icons">
9         <div v-for="item of svgIcons" :key="item">
10           <el-tooltip placement="top">
11             <div slot="content">
12               {{ generateIconCode(item) }}
13             </div>
14             <div class="icon-item">
15               <svg-icon :icon-class="item" class-name="disabled" />
16               <span>{{ item }}</span>
17             </div>
18           </el-tooltip>
19         </div>
20       </el-tab-pane>
21       <el-tab-pane label="Element-UI Icons">
22         <div v-for="item of elementIcons" :key="item">
23           <el-tooltip placement="top">
24             <div slot="content">
25               {{ generateElementIconCode(item) }}
26             </div>
27             <div class="icon-item">
28               <i :class="'el-icon-' + item" />
29               <span>{{ item }}</span>
30             </div>
31           </el-tooltip>
32         </div>
33       </el-tab-pane>
34     </el-tabs>
35   </div>
36 </template>
37
38 <script>
39 import svgIcons from './svg-icons'
40 import elementIcons from './element-icons'
41
42 export default {
43   name: 'Icons',
44   data() {
45     return {
46       svgIcons,
47       elementIcons
48     }
49   },
50   methods: {
51     generateIconCode(symbol) {
52       return `<svg-icon icon-class="${symbol}" />`
53     },
54     generateElementIconCode(symbol) {
55       return `<i class="el-icon-${symbol}" />`
56     }
57   }
58 }
59 </script>
60
61 <style lang="scss" scoped>
62 .icons-container {
63   margin: 10px 20px 0;
64   overflow: hidden;
65
66   .icon-item {
67     margin: 20px;
68     height: 85px;
69     text-align: center;
70     width: 100px;
71     float: left;
72     font-size: 30px;
73     color: #24292e;
74     cursor: pointer;
75   }
76
77   span {
78     display: block;
79     font-size: 16px;
80     margin-top: 10px;
81   }
82
83   .disabled {
84     pointer-events: none;
85   }
86 }
87 </style>