[Improvement] Button: optimize loading (#1756)

This commit is contained in:
neverland 2018-09-05 17:47:15 +08:00 committed by GitHub
parent a2ff47f398
commit ca91a1b498
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 72 additions and 136 deletions

View File

@ -3,18 +3,15 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">弹出 Actionsheet</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出 Actionsheet</span></button>
<!---->
</div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">弹出带取消按钮的 Actionsheet</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带取消按钮的 Actionsheet</span></button>
<!---->
</div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">弹出带标题的 Actionsheet</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带标题的 Actionsheet</span></button>
<!---->
</div>
</div>

View File

@ -103,12 +103,10 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-address-edit__buttons">
<button class="van-button van-button--danger van-button--normal van-button--block">
<!----><span class="van-button__text">
<button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">
保存
</span></button>
<button class="van-button van-button--default van-button--normal van-button--block">
<!----><span class="van-button__text">
<button class="van-button van-button--default van-button--normal van-button--block"><span class="van-button__text">
删除
</span></button>
</div>

View File

@ -73,8 +73,7 @@ exports[`create a AddressEdit 1`] = `
<!---->
</div>
<div class="van-address-edit__buttons">
<button class="van-button van-button--danger van-button--normal van-button--block">
<!----><span class="van-button__text">
<button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">
保存
</span></button>
<!---->
@ -207,8 +206,7 @@ exports[`create a AddressEdit with props 1`] = `
</div>
</div>
<div class="van-address-edit__buttons">
<button class="van-button van-button--danger van-button--normal van-button--block">
<!----><span class="van-button__text">
<button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">
保存
</span></button>
<!---->

View File

@ -41,8 +41,7 @@ exports[`renders demo correctly 1`] = `
</i>
</div>
</div>
<button class="van-button van-button--danger van-button--large van-button--square van-address-list__add">
<!----><span class="van-button__text">新增地址</span></button>
<button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button>
</div>
</div>
</div>

View File

@ -19,7 +19,7 @@
@click="onClick"
>
<loading v-if="loading" size="20px" :color="type === 'default' ? 'black' : 'white'" />
<span :class="b('text')">
<span v-else :class="b('text')">
<slot>{{ text }}</slot>
</span>
</component>

View File

@ -4,52 +4,39 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="demo-button-row">
<button class="van-button van-button--default van-button--normal">
<!----><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--default van-button--normal"><span class="van-button__text">默认按钮</span></button>
<button class="van-button van-button--primary van-button--normal"><span class="van-button__text">主要按钮</span></button>
</div>
<button class="van-button van-button--warning van-button--normal">
<!----><span class="van-button__text">警告按钮</span></button>
<button class="van-button van-button--danger van-button--normal">
<!----><span class="van-button__text">危险按钮</span></button>
<button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
<button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button>
</div>
<div>
<div class="demo-button-row">
<button class="van-button van-button--default van-button--normal van-button--plain">
<!----><span class="van-button__text">默认按钮</span></button>
<button class="van-button van-button--primary van-button--normal van-button--plain">
<!----><span class="van-button__text">主要按钮</span></button>
<button class="van-button van-button--default van-button--normal van-button--plain"><span class="van-button__text">默认按钮</span></button>
<button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">主要按钮</span></button>
</div>
<button class="van-button van-button--warning van-button--normal van-button--plain">
<!----><span class="van-button__text">警告按钮</span></button>
<button class="van-button van-button--danger van-button--normal van-button--plain">
<!----><span class="van-button__text">危险按钮</span></button>
<button class="van-button van-button--warning van-button--normal van-button--plain"><span class="van-button__text">警告按钮</span></button>
<button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">危险按钮</span></button>
</div>
<div>
<button class="van-button van-button--default van-button--large">
<!----><span class="van-button__text">大号按钮</span></button>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">普通按钮</span></button>
<button class="van-button van-button--default van-button--small">
<!----><span class="van-button__text">小型按钮</span></button>
<button class="van-button van-button--default van-button--mini">
<!----><span class="van-button__text">迷你按钮</span></button>
<button class="van-button van-button--default van-button--large"><span class="van-button__text">大号按钮</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">普通按钮</span></button>
<button class="van-button van-button--default van-button--small"><span class="van-button__text">小型按钮</span></button>
<button class="van-button van-button--default van-button--mini"><span class="van-button__text">迷你按钮</span></button>
</div>
<div>
<button disabled="disabled" class="van-button van-button--default van-button--normal van-button--disabled van-button--unclickable">
<!----><span class="van-button__text">禁用状态</span></button>
<button disabled="disabled" class="van-button van-button--default van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">禁用状态</span></button>
</div>
<div>
<button class="van-button van-button--default van-button--normal van-button--loading van-button--unclickable">
<div class="van-loading van-loading--circular van-loading--black" style="color:#c9c9c9;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span class="van-button__text"></span></button>
<button
class="van-button van-button--primary van-button--normal van-button--loading van-button--unclickable">
<div class="van-loading van-loading--circular van-loading--white" style="color:white;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span class="van-button__text"></span></button>
<div class="van-loading van-loading--circular van-loading--black" style="color:#c9c9c9;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</button>
<button class="van-button van-button--primary van-button--normal van-button--loading van-button--unclickable">
<div class="van-loading van-loading--circular van-loading--white" style="color:white;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</button>
</div>
<div>
<a href="https://www.youzan.com" target="_blank" class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">
<a href="https://www.youzan.com" target="_blank" class="van-button van-button--default van-button--normal"><span class="van-button__text">
按钮
</span></a>
</div>

View File

@ -37,10 +37,8 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-card__footer">
<div>
<button class="van-button van-button--default van-button--mini">
<!----><span class="van-button__text">按钮</span></button>
<button class="van-button van-button--default van-button--mini">
<!----><span class="van-button__text">按钮</span></button>
<button class="van-button van-button--default van-button--mini"><span class="van-button__text">按钮</span></button>
<button class="van-button van-button--default van-button--mini"><span class="van-button__text">按钮</span></button>
</div>
</div>
</div>

View File

@ -18,10 +18,8 @@ exports[`renders demo correctly 1`] = `
<div class="van-circle__text">0%</div>
</div>
<div>
<button class="van-button van-button--primary van-button--small">
<!----><span class="van-button__text">增加</span></button>
<button class="van-button van-button--danger van-button--small">
<!----><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--danger van-button--small"><span class="van-button__text">减少</span></button>
</div>
</div>
</div>

View File

@ -29,8 +29,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add">
<!----><span class="van-button__text">新建联系人</span></button>
<button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
</div>
</div>
<div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
@ -70,8 +69,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-contact-edit__buttons">
<button class="van-button van-button--danger van-button--normal van-button--block">
<!----><span class="van-button__text">保存</span></button>
<button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button>
<!---->
</div>
</div>

View File

@ -3,18 +3,14 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">Alert</span></button>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">无标题 Alert</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">Alert</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">无标题 Alert</span></button>
</div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">Confirm</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">Confirm</span></button>
</div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">高级用法</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">高级用法</span></button>
<div name="van-dialog-bounce" class="van-dialog" style="display:none;">
<!---->
<div class="van-dialog__content">
@ -52,12 +48,10 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons">
<button class="van-button van-button--default van-button--large van-dialog__cancel">
<!----><span class="van-button__text">
<button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">
取消
</span></button>
<button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
<!----><span class="van-button__text">
<button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">
确认
</span></button>
</div>

View File

@ -151,8 +151,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<!---->
<div class="van-field__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--small"><span class="van-button__text">发送验证码</span></button>
</div>
</div>
<!---->

View File

@ -12,10 +12,8 @@ exports[`renders demo correctly 1`] = `
<i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!---->
</i> 购物车</a>
<a class="van-button van-button--default van-button--normal van-button--bottom-action van-goods-action-big-btn">
<!----><span class="van-button__text">加入购物车</span></a>
<a class="van-button van-button--primary van-button--normal van-button--bottom-action van-goods-action-big-btn">
<!----><span class="van-button__text">立即购买</span></a>
<a class="van-button van-button--default van-button--normal van-button--bottom-action van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></a>
<a class="van-button van-button--primary van-button--normal van-button--bottom-action van-goods-action-big-btn"><span class="van-button__text">立即购买</span></a>
</div>
</div>
<div>
@ -32,10 +30,8 @@ exports[`renders demo correctly 1`] = `
<i class="van-icon van-icon-shop van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!---->
</i> 店铺</a>
<a class="van-button van-button--default van-button--normal van-button--bottom-action van-goods-action-big-btn">
<!----><span class="van-button__text">加入购物车</span></a>
<a class="van-button van-button--primary van-button--normal van-button--bottom-action van-goods-action-big-btn">
<!----><span class="van-button__text">立即购买</span></a>
<a class="van-button van-button--default van-button--normal van-button--bottom-action van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></a>
<a class="van-button van-button--primary van-button--normal van-button--bottom-action van-goods-action-big-btn"><span class="van-button__text">立即购买</span></a>
</div>
</div>
</div>

View File

@ -3,8 +3,7 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">
弹出默认键盘
</span></button>
<div name="van-slide-bottom" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
@ -27,8 +26,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">
弹出自定义键盘
</span></button>
<div name="van-slide-bottom" class="van-number-keyboard van-number-keyboard--custom" style="z-index:100;display:none;">

View File

@ -33,10 +33,8 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-hairline--top van-panel__footer">
<div>
<button class="van-button van-button--default van-button--small">
<!----><span class="van-button__text">按钮</span></button>
<button class="van-button van-button--danger van-button--small">
<!----><span class="van-button__text">按钮</span></button>
<button class="van-button van-button--default van-button--small"><span class="van-button__text">按钮</span></button>
<button class="van-button van-button--danger van-button--small"><span class="van-button__text">按钮</span></button>
</div>
</div>
</div>

View File

@ -3,19 +3,15 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">弹出 Popup</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出 Popup</span></button>
<!---->
</div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">底部弹出</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">底部弹出</span></button>
<!---->
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">顶部弹出</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">顶部弹出</span></button>
<!---->
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">右侧弹出</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">右侧弹出</span></button>
<!---->
</div>
</div>

View File

@ -5,22 +5,19 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="sku-container">
<!---->
<button class="van-button van-button--primary van-button--normal van-button--block">
<!----><span class="van-button__text">基础用法</span></button>
<button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">基础用法</span></button>
</div>
</div>
<div>
<div class="sku-container">
<!---->
<button class="van-button van-button--primary van-button--normal van-button--block">
<!----><span class="van-button__text">自定义步进器相关配置</span></button>
<button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">自定义步进器相关配置</span></button>
</div>
</div>
<div>
<div class="sku-container">
<!---->
<button class="van-button van-button--primary van-button--normal van-button--block">
<!----><span class="van-button__text">高级用法</span></button>
<button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">高级用法</span></button>
</div>
</div>
</div>

View File

@ -38,8 +38,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">下一步</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">下一步</span></button>
</div>
<div>
<div class="van-steps van-steps--horizontal">

View File

@ -7,8 +7,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<div class="van-submit-bar__bar">
<div class="van-submit-bar__text"><span>合计:</span> <span class="van-submit-bar__price">¥ 30.50</span></div>
<button class="van-button van-button--danger van-button--normal">
<!----><span class="van-button__text">
<button class="van-button van-button--danger van-button--normal"><span class="van-button__text">
提交订单
</span></button>
</div>
@ -20,8 +19,7 @@ exports[`renders demo correctly 1`] = `
您的收货地址不支持同城送, 我们已为您推荐快递</div>
<div class="van-submit-bar__bar">
<div class="van-submit-bar__text"><span>合计:</span> <span class="van-submit-bar__price">¥ 30.50</span></div>
<button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--unclickable">
<!----><span class="van-button__text">
<button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">
提交订单
</span></button>
</div>
@ -33,9 +31,8 @@ exports[`renders demo correctly 1`] = `
<div class="van-submit-bar__bar">
<div class="van-submit-bar__text"><span>合计:</span> <span class="van-submit-bar__price">¥ 30.50</span></div>
<button class="van-button van-button--danger van-button--normal van-button--loading van-button--unclickable">
<div class="van-loading van-loading--circular van-loading--white" style="color:white;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span class="van-button__text">
</span></button>
<div class="van-loading van-loading--circular van-loading--white" style="color:white;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</button>
</div>
</div>
</div>
@ -53,8 +50,7 @@ exports[`renders demo correctly 1`] = `
</i>
</div> <span class="van-checkbox__label">全选</span></div>
<div class="van-submit-bar__text"><span>合计:</span> <span class="van-submit-bar__price">¥ 30.50</span></div>
<button class="van-button van-button--danger van-button--normal">
<!----><span class="van-button__text">
<button class="van-button van-button--danger van-button--normal"><span class="van-button__text">
提交订单
</span></button>
</div>

View File

@ -5,8 +5,7 @@ exports[`submit 1`] = `
<!---->
<div class="van-submit-bar__bar">
<div class="van-submit-bar__text"><span>合计:</span> <span class="van-submit-bar__price">¥ 0.00</span></div>
<button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--unclickable">
<!----><span class="van-button__text">
<button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">
</span></button>
</div>

View File

@ -9,7 +9,7 @@
</demo-block>
<demo-block :title="$t('title2')">
<van-tabs sticky @scroll="subscribeSticky">
<van-tabs @scroll="onScroll">
<van-tab v-for="index in 8" :title="$t('tab') + index" :key="index">
{{ $t('content') }} {{ index }}
</van-tab>
@ -113,7 +113,7 @@ export default {
this.$toast(title);
},
subscribeSticky(e) {
onScroll(e) {
console.log(e);
}
}

View File

@ -48,6 +48,7 @@ export default create({
},
props: {
color: String,
sticky: Boolean,
lineWidth: Number,
swipeable: Boolean,
@ -70,8 +71,7 @@ export default create({
offsetTop: {
type: Number,
default: 0
},
color: String
}
},
data() {

View File

@ -3,22 +3,17 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">文字提示</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">文字提示</span></button>
</div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">加载提示</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">加载提示</span></button>
</div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">成功提示</span></button>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">失败提示</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">成功提示</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">失败提示</span></button>
</div>
<div>
<button class="van-button van-button--default van-button--normal">
<!----><span class="van-button__text">高级用法</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">高级用法</span></button>
</div>
</div>
`;

View File

@ -99,10 +99,6 @@
.van-loading {
display: inline-block;
}
.van-button__text {
display: none;
}
}
/* mini图标默认宽度50px文字不能超过4个 */