blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 02:16:12 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Icon: use image component to display image (#3515)

Browse Source
This commit is contained in:
neverland 2019-06-14 20:16:55 +08:00 committed by GitHub
parent 7fbf943a2d
commit 09707479eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/icon/index.less
View File

@ -2,19 +2,8 @@
@import '@vant/icons/src/index.less'; @import '@vant/icons/src/index.less';
.van-icon { .van-icon {
&--image { &__image {
width: 1em; width: 1em;
height: 1em; height: 1em;
img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
}
} }
} }

14
packages/icon/index.tsx
View File

@ -1,6 +1,7 @@
import { use, suffixPx } from '../utils'; import { use, suffixPx } from '../utils';
import { inherit } from '../utils/functional'; import { inherit } from '../utils/functional';
import Info from '../info'; import Info from '../info';
import Image from '../image';
// Types // Types
import { CreateElement, RenderContext } from 'vue/types'; import { CreateElement, RenderContext } from 'vue/types';
@ -19,7 +20,7 @@ export type IconEvents = {
onClick?(event: Event): void; onClick?(event: Event): void;
}; };
const [sfc] = use('icon'); const [sfc, bem] = use('icon');
function isImage(name?: string): boolean { function isImage(name?: string): boolean {
return name ? name.indexOf('/') !== -1 : false; return name ? name.indexOf('/') !== -1 : false;
@ -31,14 +32,11 @@ function Icon(
slots: DefaultSlots, slots: DefaultSlots,
ctx: RenderContext<IconProps> ctx: RenderContext<IconProps>
) { ) {
const urlIcon = isImage(props.name); const imageIcon = isImage(props.name);
return ( return (
<props.tag <props.tag
class={[ class={[props.classPrefix, imageIcon ? '' : `${props.classPrefix}-${props.name}`]}
props.classPrefix,
urlIcon ? 'van-icon--image' : `${props.classPrefix}-${props.name}`
]}
style={{ style={{
color: props.color, color: props.color,
fontSize: suffixPx(props.size) fontSize: suffixPx(props.size)
@ -46,7 +44,7 @@ function Icon(
{...inherit(ctx, true)} {...inherit(ctx, true)}
> >
{slots.default && slots.default()} {slots.default && slots.default()}
{urlIcon && <img src={props.name} />} {imageIcon && <Image class={bem('image')} src={props.name} />}
<Info info={props.info} /> <Info info={props.info} />
</props.tag> </props.tag>
); );
@ -63,7 +61,7 @@ Icon.props = {
}, },
classPrefix: { classPrefix: {
type: String, type: String,
default: 'van-icon' default: bem()
} }
}; };

18
packages/icon/test/__snapshots__/index.spec.js.snap
View File

@ -11,13 +11,23 @@ exports[`render icon with builtin icon name 1`] = `
`; `;
exports[`render icon with local image 1`] = ` exports[`render icon with local image 1`] = `
<i class="van-icon van-icon--image"><img src="/assets/icon.jpg"> <i class="van-icon">
<!----></i> <div class="van-image van-icon__image"><img src="/assets/icon.jpg" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<!---->
</i>
`; `;
exports[`render icon with url name 1`] = ` exports[`render icon with url name 1`] = `
<i class="van-icon van-icon--image"><img src="https://img.yzcdn.com/icon.jpg"> <i class="van-icon">
<!----></i> <div class="van-image van-icon__image"><img src="https://img.yzcdn.com/icon.jpg" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<!---->
</i>
`; `;
exports[`size without unit 1`] = ` exports[`size without unit 1`] = `