chore(Icon): improve perf

This commit is contained in:
陈嘉涵 2019-12-29 08:29:59 +08:00 committed by neverland
parent 3731597520
commit dd8559a2aa
4 changed files with 12 additions and 17 deletions

View File

@ -18,10 +18,8 @@ exports[`renders demo correctly 1`] = `
<div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
<div><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
<!----></i></button> <button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
<!----></i><span class="van-button__text">按钮</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><i class="van-icon van-button__icon">
<div class="van-image van-icon__image"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-image__img" style="object-fit: contain;"></div>
<!---->
</i><span class="van-button__text">按钮</span></button></div>
<!----></i><span class="van-button__text">按钮</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-icon__image">
<!----></i><span class="van-button__text">按钮</span></button></div>
<div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
<div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;"><span class="van-button__text">渐变色按钮</span></button></div>

View File

@ -5,5 +5,6 @@
&__image {
width: 1em;
height: 1em;
object-fit: contain;
}
}

View File

@ -1,7 +1,6 @@
import { createNamespace, addUnit } from '../utils';
import { inherit } from '../utils/functional';
import Info from '../info';
import Image from '../image';
// Types
import { CreateElement, RenderContext } from 'vue/types';
@ -43,7 +42,10 @@ function Icon(
return (
<props.tag
class={[props.classPrefix, imageIcon ? '' : `${props.classPrefix}-${name}`]}
class={[
props.classPrefix,
imageIcon ? '' : `${props.classPrefix}-${name}`
]}
style={{
color: props.color,
fontSize: addUnit(props.size)
@ -51,9 +53,7 @@ function Icon(
{...inherit(ctx, true)}
>
{slots.default && slots.default()}
{imageIcon && (
<Image class={bem('image')} fit="contain" src={name} showLoading={false} />
)}
{imageIcon && <img class={bem('image')} src={name} />}
<Info dot={props.dot} info={props.info} />
</props.tag>
);

View File

@ -17,17 +17,13 @@ exports[`render icon with builtin icon name 1`] = `
`;
exports[`render icon with local image 1`] = `
<i class="van-icon">
<div class="van-image van-icon__image"><img src="/assets/icon.jpg" class="van-image__img" style="object-fit: contain;"></div>
<!---->
</i>
<i class="van-icon"><img src="/assets/icon.jpg" class="van-icon__image">
<!----></i>
`;
exports[`render icon with url name 1`] = `
<i class="van-icon">
<div class="van-image van-icon__image"><img src="https://img.yzcdn.com/icon.jpg" class="van-image__img" style="object-fit: contain;"></div>
<!---->
</i>
<i class="van-icon"><img src="https://img.yzcdn.com/icon.jpg" class="van-icon__image">
<!----></i>
`;
exports[`size without unit 1`] = `