Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit8f45dbe

Browse files
authored
feature[Icons]: add element-ui icons demo (PanJiaChen#1865)
1 parent342b7b4 commit8f45dbe

File tree

3 files changed

+43
-23
lines changed

3 files changed

+43
-23
lines changed

‎src/views/svg-icons/element-icon.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"]

‎src/views/svg-icons/index.vue

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,57 @@
44
<ahref="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html"target="_blank">Add and use
55
</a>
66
</p>
7-
<divclass="icons-wrapper">
8-
<divv-for="item of iconsMap":key="item"@click="handleClipboard(generateIconCode(item),$event)">
9-
<el-tooltipplacement="top">
10-
<divslot="content">
11-
{{ generateIconCode(item) }}
12-
</div>
13-
<divclass="icon-item">
14-
<svg-icon:icon-class="item"class-name="disabled" />
15-
<span>{{ item }}</span>
16-
</div>
17-
</el-tooltip>
18-
</div>
19-
</div>
7+
<el-tabstype="border-card">
8+
<el-tab-panelabel="Icons">
9+
<divv-for="item of iconsMap":key="item"@click="handleClipboard(generateIconCode(item),$event)">
10+
<el-tooltipplacement="top">
11+
<divslot="content">
12+
{{ generateIconCode(item) }}
13+
</div>
14+
<divclass="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-panelabel="Element-UI Icons">
22+
<divv-for="item of elementIcons":key="item"@click="handleClipboard(generateElementIconCode(item),$event)">
23+
<el-tooltipplacement="top">
24+
<divslot="content">
25+
{{ generateElementIconCode(item) }}
26+
</div>
27+
<divclass="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>
2035
</div>
2136
</template>
2237

2338
<script>
24-
importiconsfrom'./requireIcons'
2539
importclipboardfrom'@/utils/clipboard'
40+
importiconsfrom'./requireIcons'
41+
importelementIconsfrom'./element-icon.json'
2642
2743
exportdefault {
2844
name:'Icons',
2945
data() {
3046
return {
31-
iconsMap: icons
47+
iconsMap: icons,
48+
elementIcons: elementIcons
3249
}
3350
},
3451
methods: {
3552
generateIconCode(symbol) {
3653
return`<svg-icon icon-class="${symbol}" />`
3754
},
55+
generateElementIconCode(symbol) {
56+
return`<i class="el-icon-${symbol}" />`
57+
},
3858
handleClipboard(text,event) {
3959
clipboard(text,event)
4060
}
@@ -46,25 +66,25 @@ export default {
4666
.icons-container {
4767
margin:10px20px0;
4868
overflow:hidden;
49-
.icons-wrapper {
50-
margin:0auto;
51-
}
69+
5270
.icon-item {
5371
margin:20px;
54-
height:110px;
72+
height:85px;
5573
text-align:center;
56-
width:110px;
74+
width:100px;
5775
float:left;
5876
font-size:30px;
5977
color:#24292e;
6078
cursor:pointer;
6179
}
80+
6281
span {
6382
display:block;
64-
font-size:24px;
83+
font-size:16px;
6584
margin-top:10px;
6685
}
67-
.disabled{
86+
87+
.disabled {
6888
pointer-events:none;
6989
}
7090
}

‎src/views/svg-icons/requireIcons.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
constreq=require.context('../../icons/svg',false,/\.svg$/)
32
constrequireAll=requireContext=>requireContext.keys()
43

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp