mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 22:49:15 +08:00
[improvement] Button: jsx (#2447)
This commit is contained in:
neverland
GitHub
parent
d08c51b233
commit
b42e2ec194
@ -13,30 +13,26 @@
|
||||
<van-button
|
||||
plain
|
||||
type="primary"
|
||||
>
|
||||
{{ $t('plain') }}
|
||||
</van-button>
|
||||
:text="$t('plain')"
|
||||
/>
|
||||
<van-button
|
||||
plain
|
||||
type="danger"
|
||||
>
|
||||
{{ $t('plain') }}
|
||||
</van-button>
|
||||
:text="$t('plain')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-button
|
||||
disabled
|
||||
type="primary"
|
||||
>
|
||||
{{ $t('disabled') }}
|
||||
</van-button>
|
||||
:text="$t('disabled')"
|
||||
/>
|
||||
<van-button
|
||||
disabled
|
||||
type="danger"
|
||||
>
|
||||
{{ $t('disabled') }}
|
||||
</van-button>
|
||||
:text="$t('disabled')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('loadingStatus')">
|
||||
@ -54,15 +50,13 @@
|
||||
<van-button
|
||||
type="primary"
|
||||
square
|
||||
>
|
||||
{{ $t('square') }}
|
||||
</van-button>
|
||||
:text="$t('square')"
|
||||
/>
|
||||
<van-button
|
||||
type="danger"
|
||||
round
|
||||
>
|
||||
{{ $t('round') }}
|
||||
</van-button>
|
||||
:text="$t('round')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('size')">
|
||||
|
||||
69
packages/button/index.js
Normal file
69
packages/button/index.js
Normal file
@ -0,0 +1,69 @@
|
||||
import createSfc from '../utils/create';
|
||||
import createBem from '../utils/bem';
|
||||
|
||||
const bem = createBem('van-button');
|
||||
|
||||
export default createSfc({
|
||||
name: 'button',
|
||||
|
||||
props: {
|
||||
text: String,
|
||||
block: Boolean,
|
||||
plain: Boolean,
|
||||
round: Boolean,
|
||||
square: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
nativeType: String,
|
||||
bottomAction: Boolean,
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'button'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event) {
|
||||
if (!this.loading && !this.disabled) {
|
||||
this.$emit('click', event);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
return (
|
||||
<this.tag
|
||||
type={this.nativeType}
|
||||
disabled={this.disabled}
|
||||
class={bem([
|
||||
this.type,
|
||||
this.size,
|
||||
{
|
||||
block: this.block,
|
||||
plain: this.plain,
|
||||
round: this.round,
|
||||
square: this.square,
|
||||
loading: this.loading,
|
||||
disabled: this.disabled,
|
||||
'bottom-action': this.bottomAction
|
||||
}
|
||||
])}
|
||||
onClick={this.onClick}
|
||||
>
|
||||
{this.loading ? (
|
||||
<loading size="20px" color={this.type === 'default' ? undefined : ''} />
|
||||
) : (
|
||||
<span class={bem('text')}>{this.$slots.default || this.text}</span>
|
||||
)}
|
||||
</this.tag>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -32,8 +32,11 @@
|
||||
opacity: .15;
|
||||
}
|
||||
|
||||
&--unclickable::before {
|
||||
display: none;
|
||||
&--loading,
|
||||
&--disabled {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--default {
|
||||
@ -101,7 +104,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* mini图标默认宽度50px，文字不能超过4个 */
|
||||
&--mini {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<component
|
||||
:is="tag"
|
||||
:type="nativeType"
|
||||
:disabled="disabled"
|
||||
:class="b([
|
||||
type,
|
||||
size,
|
||||
{
|
||||
block,
|
||||
plain,
|
||||
round,
|
||||
square,
|
||||
loading,
|
||||
disabled,
|
||||
unclickable: disabled || loading,
|
||||
'bottom-action': bottomAction
|
||||
}
|
||||
])"
|
||||
@click="onClick"
|
||||
>
|
||||
<loading
|
||||
v-if="loading"
|
||||
size="20px"
|
||||
:color="type === 'default' ? void 0 : ''"
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
:class="b('text')"
|
||||
>
|
||||
<slot>{{ text }}</slot>
|
||||
</span>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import create from '../utils/create';
|
||||
|
||||
export default create({
|
||||
name: 'button',
|
||||
|
||||
props: {
|
||||
text: String,
|
||||
block: Boolean,
|
||||
plain: Boolean,
|
||||
round: Boolean,
|
||||
square: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
nativeType: String,
|
||||
bottomAction: Boolean,
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'button'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event) {
|
||||
if (!this.loading && !this.disabled) {
|
||||
this.$emit('click', event);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -5,26 +5,14 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="demo-button-row"><button class="van-button van-button--primary 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> <button class="van-button van-button--default 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>
|
||||
</div>
|
||||
<div><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--danger van-button--normal van-button--plain"><span class="van-button__text">
|
||||
朴素按钮
|
||||
</span></button></div>
|
||||
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">
|
||||
禁用状态
|
||||
</span></button> <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>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--loading van-button--unclickable">
|
||||
<div><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--danger van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
|
||||
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--loading">
|
||||
<div class="van-loading van-loading--circular van-loading" style="color:;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--danger van-button--normal van-button--loading van-button--unclickable">
|
||||
</button> <button class="van-button van-button--danger van-button--normal van-button--loading">
|
||||
<div class="van-loading van-loading--circular van-loading" style="color:;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><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--danger 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--danger van-button--normal van-button--round"><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></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-submit-bar__tip">
|
||||
你的收货地址不支持同城送, 我们已为你推荐快递</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--large van-button--square van-button--disabled van-button--unclickable"><span class="van-button__text">提交订单</span></button>
|
||||
<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--large van-button--square van-button--disabled"><span class="van-button__text">提交订单</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<!---->
|
||||
<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--large van-button--square van-button--loading van-button--unclickable">
|
||||
<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--large van-button--square van-button--loading">
|
||||
<div class="van-loading van-loading--circular van-loading" style="color:;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>
|
||||
|
||||
@ -4,7 +4,7 @@ exports[`submit 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<!---->
|
||||
<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--large van-button--square van-button--disabled van-button--unclickable"><span class="van-button__text"></span></button>
|
||||
<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--large van-button--square van-button--disabled"><span class="van-button__text"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user