Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
b8356c42
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
b8356c42
编写于
11月 11, 2020
作者:
richard_1015
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
upd: icon name 支持图片链接
上级
5852fb66
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
29 addition
and
12 deletion
+29
-12
src/packages/icon/demo.vue
src/packages/icon/demo.vue
+7
-0
src/packages/icon/doc.md
src/packages/icon/doc.md
+1
-0
src/packages/icon/index.scss
src/packages/icon/index.scss
+6
-0
src/packages/icon/index.vue
src/packages/icon/index.vue
+15
-12
未找到文件。
src/packages/icon/demo.vue
浏览文件 @
b8356c42
...
...
@@ -5,6 +5,13 @@
<nut-icon
name=
"dongdong"
></nut-icon>
<nut-icon
name=
"JD"
></nut-icon>
</nut-cell>
<h2>
图片链接
</h2>
<nut-cell>
<nut-icon
size=
"40px"
name=
"https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
></nut-icon>
</nut-cell>
<h2>
图标颜色
</h2>
<nut-cell>
<nut-icon
name=
"dongdong"
color=
"#fa2c19"
></nut-icon>
...
...
src/packages/icon/doc.md
浏览文件 @
b8356c42
...
...
@@ -24,6 +24,7 @@ app.use(Icon);
```
html
<nut-icon
name=
"dongdong"
></nut-icon>
<nut-icon
name=
"JD"
></nut-icon>
<nut-icon
size=
"40px"
name=
"https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
></nut-icon>
```
### 图标颜色
...
...
src/packages/icon/index.scss
浏览文件 @
b8356c42
...
...
@@ -4,4 +4,10 @@
height
:
20px
;
line-height
:
20px
;
text-align
:
right
;
&
__img
{
width
:
20px
;
height
:
20px
;
object-fit
:
contain
;
}
}
src/packages/icon/index.vue
浏览文件 @
b8356c42
...
...
@@ -26,24 +26,27 @@ export default create({
default
:
'
i
'
}
},
components
:
{},
emits
:
[
'
click
'
],
setup
(
props
,
{
emit
,
slots
})
{
const
handleClick
=
(
event
:
Event
)
=>
{
emit
(
'
click
'
,
event
);
};
return
()
=>
h
(
props
.
tag
,
{
class
:
`
${
props
.
classPrefix
}
${
componentName
}
-
${
props
.
name
}
`
,
style
:
{
color
:
props
.
color
,
fontSize
:
props
.
size
},
onClick
:
handleClick
},
slots
.
default
?.()
);
const
isImage
=
()
=>
{
return
props
.
name
?
props
.
name
.
indexOf
(
'
/
'
)
!==
-
1
:
false
;
};
const
styleOptions
=
{
class
:
`
${
props
.
classPrefix
}
${
componentName
}
-
${
props
.
name
}
`
,
style
:
{
color
:
props
.
color
,
fontSize
:
props
.
size
},
onClick
:
handleClick
}
as
any
;
if
(
isImage
())
{
styleOptions
.
class
=
`
${
componentName
}
__img`
;
styleOptions
.
src
=
props
.
name
;
styleOptions
.
style
[
'
width
'
]
=
props
.
size
;
styleOptions
.
style
[
'
height
'
]
=
props
.
size
;
}
return
()
=>
h
(
isImage
()
?
'
img
'
:
props
.
tag
,
styleOptions
,
slots
.
default
?.());
}
});
</
script
>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录