提交 b8356c42 编写于 作者: richard_1015's avatar richard_1015

upd: icon name 支持图片链接

上级 5852fb66
...@@ -5,6 +5,13 @@ ...@@ -5,6 +5,13 @@
<nut-icon name="dongdong"></nut-icon> <nut-icon name="dongdong"></nut-icon>
<nut-icon name="JD"></nut-icon> <nut-icon name="JD"></nut-icon>
</nut-cell> </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> <h2>图标颜色</h2>
<nut-cell> <nut-cell>
<nut-icon name="dongdong" color="#fa2c19"></nut-icon> <nut-icon name="dongdong" color="#fa2c19"></nut-icon>
......
...@@ -24,6 +24,7 @@ app.use(Icon); ...@@ -24,6 +24,7 @@ app.use(Icon);
```html ```html
<nut-icon name="dongdong"></nut-icon> <nut-icon name="dongdong"></nut-icon>
<nut-icon name="JD"></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>
``` ```
### 图标颜色 ### 图标颜色
......
...@@ -4,4 +4,10 @@ ...@@ -4,4 +4,10 @@
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
text-align: right; text-align: right;
&__img {
width: 20px;
height: 20px;
object-fit: contain;
}
} }
...@@ -26,24 +26,27 @@ export default create({ ...@@ -26,24 +26,27 @@ export default create({
default: 'i' default: 'i'
} }
}, },
components: {},
emits: ['click'], emits: ['click'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const handleClick = (event: Event) => { const handleClick = (event: Event) => {
emit('click', event); emit('click', event);
}; };
const isImage = () => {
return () => return props.name ? props.name.indexOf('/') !== -1 : false;
h( };
props.tag, const styleOptions = {
{ class: `${props.classPrefix} ${componentName}-${props.name}`,
class: `${props.classPrefix} ${componentName}-${props.name}`, style: { color: props.color, fontSize: props.size },
style: { color: props.color, fontSize: props.size }, onClick: handleClick
onClick: handleClick } as any;
}, if (isImage()) {
slots.default?.() 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> </script>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册