Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
啊嘞嘞EC
vue-vben-admin
提交
e8fe6a92
V
vue-vben-admin
项目概览
啊嘞嘞EC
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
e8fe6a92
编写于
3月 09, 2021
作者:
V
Vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf(icon): icon and SvgIcon integration
上级
9e3adaa3
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
33 addition
and
21 deletion
+33
-21
src/components/Icon/src/index.vue
src/components/Icon/src/index.vue
+33
-21
未找到文件。
src/components/Icon/src/index.vue
浏览文件 @
e8fe6a92
<
template
>
<span
ref=
"elRef"
:class=
"[$attrs.class, 'app-iconify anticon']"
:style=
"getWrapStyle"
></span>
<SvgIcon
:size=
"size"
:name=
"getSvgIcon"
v-if=
"isSvgIcon"
:class=
"[$attrs.class]"
/>
<span
v-else
ref=
"elRef"
:class=
"[$attrs.class, 'app-iconify anticon']"
:style=
"getWrapStyle"
></span>
</
template
>
<
script
lang=
"ts"
>
import
type
{
PropType
}
from
'
vue
'
;
...
...
@@ -13,12 +19,16 @@
computed
,
CSSProperties
,
}
from
'
vue
'
;
import
SvgIcon
from
'
./SvgIcon.vue
'
;
import
Iconify
from
'
@purge-icons/generated
'
;
import
{
isString
}
from
'
/@/utils/is
'
;
import
{
propTypes
}
from
'
/@/utils/propTypes
'
;
const
SVG_END_WITH_FLAG
=
'
|svg
'
;
export
default
defineComponent
({
name
:
'
GIcon
'
,
components
:
{
SvgIcon
},
props
:
{
// icon name
icon
:
propTypes
.
string
,
...
...
@@ -34,28 +44,30 @@
setup
(
props
)
{
const
elRef
=
ref
<
ElRef
>
(
null
);
const
getIconRef
=
computed
(()
=>
{
const
{
icon
,
prefix
}
=
props
;
return
`
${
prefix
?
prefix
+
'
:
'
:
''
}${
icon
}
`
;
});
const
isSvgIcon
=
computed
(()
=>
props
.
icon
?.
endsWith
(
SVG_END_WITH_FLAG
));
const
getSvgIcon
=
computed
(()
=>
props
.
icon
.
replace
(
SVG_END_WITH_FLAG
,
''
));
const
getIconRef
=
computed
(()
=>
`
${
props
.
prefix
?
props
.
prefix
+
'
:
'
:
''
}${
props
.
icon
}
`
);
const
update
=
async
()
=>
{
if
(
unref
(
isSvgIcon
))
return
;
const
el
=
unref
(
elRef
);
if
(
el
)
{
await
nextTick
();
const
icon
=
unref
(
getIconRef
);
if
(
!
icon
)
return
;
const
svg
=
Iconify
.
renderSVG
(
icon
,
{});
if
(
svg
)
{
el
.
textContent
=
''
;
el
.
appendChild
(
svg
);
}
else
{
const
span
=
document
.
createElement
(
'
span
'
);
span
.
className
=
'
iconify
'
;
span
.
dataset
.
icon
=
icon
;
el
.
textContent
=
''
;
el
.
appendChild
(
span
);
}
if
(
!
el
)
return
;
await
nextTick
();
const
icon
=
unref
(
getIconRef
);
if
(
!
icon
)
return
;
const
svg
=
Iconify
.
renderSVG
(
icon
,
{});
if
(
svg
)
{
el
.
textContent
=
''
;
el
.
appendChild
(
svg
);
}
else
{
const
span
=
document
.
createElement
(
'
span
'
);
span
.
className
=
'
iconify
'
;
span
.
dataset
.
icon
=
icon
;
el
.
textContent
=
''
;
el
.
appendChild
(
span
);
}
};
...
...
@@ -78,7 +90,7 @@
onMounted
(
update
);
return
{
elRef
,
getWrapStyle
};
return
{
elRef
,
getWrapStyle
,
isSvgIcon
,
getSvgIcon
};
},
});
</
script
>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录