Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
InJoyU
vue-element-admin
提交
8f45dbe3
V
vue-element-admin
项目概览
InJoyU
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
8f45dbe3
编写于
4月 09, 2019
作者:
花
花裤衩
提交者:
GitHub
4月 09, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feature[Icons]: add element-ui icons demo (#1865)
上级
342b7b42
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
43 addition
and
23 deletion
+43
-23
src/views/svg-icons/element-icon.json
src/views/svg-icons/element-icon.json
+1
-0
src/views/svg-icons/index.vue
src/views/svg-icons/index.vue
+42
-22
src/views/svg-icons/requireIcons.js
src/views/svg-icons/requireIcons.js
+0
-1
未找到文件。
src/views/svg-icons/element-icon.json
0 → 100644
浏览文件 @
8f45dbe3
[
"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
浏览文件 @
8f45dbe3
...
@@ -4,7 +4,8 @@
...
@@ -4,7 +4,8 @@
<a
href=
"https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html"
target=
"_blank"
>
Add and use
<a
href=
"https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html"
target=
"_blank"
>
Add and use
</a>
</a>
</p>
</p>
<div
class=
"icons-wrapper"
>
<el-tabs
type=
"border-card"
>
<el-tab-pane
label=
"Icons"
>
<div
v-for=
"item of iconsMap"
:key=
"item"
@
click=
"handleClipboard(generateIconCode(item),$event)"
>
<div
v-for=
"item of iconsMap"
:key=
"item"
@
click=
"handleClipboard(generateIconCode(item),$event)"
>
<el-tooltip
placement=
"top"
>
<el-tooltip
placement=
"top"
>
<div
slot=
"content"
>
<div
slot=
"content"
>
...
@@ -16,25 +17,44 @@
...
@@ -16,25 +17,44 @@
</div>
</div>
</el-tooltip>
</el-tooltip>
</div>
</div>
</el-tab-pane>
<el-tab-pane
label=
"Element-UI Icons"
>
<div
v-for=
"item of elementIcons"
:key=
"item"
@
click=
"handleClipboard(generateElementIconCode(item),$event)"
>
<el-tooltip
placement=
"top"
>
<div
slot=
"content"
>
{{
generateElementIconCode
(
item
)
}}
</div>
<div
class=
"icon-item"
>
<i
:class=
"'el-icon-' + item"
/>
<span>
{{
item
}}
</span>
</div>
</el-tooltip>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
import
icons
from
'
./requireIcons
'
import
clipboard
from
'
@/utils/clipboard
'
import
clipboard
from
'
@/utils/clipboard
'
import
icons
from
'
./requireIcons
'
import
elementIcons
from
'
./element-icon.json
'
export
default
{
export
default
{
name
:
'
Icons
'
,
name
:
'
Icons
'
,
data
()
{
data
()
{
return
{
return
{
iconsMap
:
icons
iconsMap
:
icons
,
elementIcons
:
elementIcons
}
}
},
},
methods
:
{
methods
:
{
generateIconCode
(
symbol
)
{
generateIconCode
(
symbol
)
{
return
`<svg-icon icon-class="
${
symbol
}
" />`
return
`<svg-icon icon-class="
${
symbol
}
" />`
},
},
generateElementIconCode
(
symbol
)
{
return
`<i class="el-icon-
${
symbol
}
" />`
},
handleClipboard
(
text
,
event
)
{
handleClipboard
(
text
,
event
)
{
clipboard
(
text
,
event
)
clipboard
(
text
,
event
)
}
}
...
@@ -46,25 +66,25 @@ export default {
...
@@ -46,25 +66,25 @@ export default {
.icons-container
{
.icons-container
{
margin
:
10px
20px
0
;
margin
:
10px
20px
0
;
overflow
:
hidden
;
overflow
:
hidden
;
.icons-wrapper
{
margin
:
0
auto
;
}
.icon-item
{
.icon-item
{
margin
:
20px
;
margin
:
20px
;
height
:
110
px
;
height
:
85
px
;
text-align
:
center
;
text-align
:
center
;
width
:
1
1
0px
;
width
:
1
0
0px
;
float
:
left
;
float
:
left
;
font-size
:
30px
;
font-size
:
30px
;
color
:
#24292e
;
color
:
#24292e
;
cursor
:
pointer
;
cursor
:
pointer
;
}
}
span
{
span
{
display
:
block
;
display
:
block
;
font-size
:
24
px
;
font-size
:
16
px
;
margin-top
:
10px
;
margin-top
:
10px
;
}
}
.disabled
{
.disabled
{
pointer-events
:
none
;
pointer-events
:
none
;
}
}
}
}
...
...
src/views/svg-icons/requireIcons.js
浏览文件 @
8f45dbe3
const
req
=
require
.
context
(
'
../../icons/svg
'
,
false
,
/
\.
svg$/
)
const
req
=
require
.
context
(
'
../../icons/svg
'
,
false
,
/
\.
svg$/
)
const
requireAll
=
requireContext
=>
requireContext
.
keys
()
const
requireAll
=
requireContext
=>
requireContext
.
keys
()
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录