Skip to content

Commit

Permalink
upd: icon name 支持图片链接
Browse files Browse the repository at this point in the history
  • Loading branch information
richard1015 committed Nov 11, 2020
1 parent 5852fb6 commit b8356c4
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 12 deletions.
7 changes: 7 additions & 0 deletions src/packages/icon/demo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/packages/icon/doc.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```

### 图标颜色
Expand Down
6 changes: 6 additions & 0 deletions src/packages/icon/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,10 @@
height: 20px;
line-height: 20px;
text-align: right;

&__img {
width: 20px;
height: 20px;
object-fit: contain;
}
}
27 changes: 15 additions & 12 deletions src/packages/icon/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit b8356c4

Please sign in to comment.