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

chore(Icon): improve perf

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/button/test/__snapshots__/demo.spec.js.snap
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 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"> <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></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"> <!----></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">
<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></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--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--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> <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>

1
src/icon/index.less
View File

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

10
src/icon/index.tsx
View File

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

12
src/icon/test/__snapshots__/index.spec.js.snap
View File

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