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

upd: icon name 支持图片链接

上级 5852fb66
......@@ -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>
......
......@@ -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>
```
### 图标颜色
......
......@@ -4,4 +4,10 @@
height: 20px;
line-height: 20px;
text-align: right;
&__img {
width: 20px;
height: 20px;
object-fit: contain;
}
}
......@@ -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.
先完成此消息的编辑!
想要评论请 注册