mirror of
https://github.com/youzan/vant.git
synced 2025-10-20 10:44:59 +00:00
[improvement] Button: jsx (#2447)
This commit is contained in:
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>
|
||||
);
|
||||
}
|
||||
});
|
Reference in New Issue
Block a user