mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 22:49:15 +08:00
[improvement] Functional: button (#2676)
This commit is contained in:
neverland
GitHub
parent
5926d02d38
commit
e3f4cac05d
@ -3,65 +3,70 @@ import Loading from '../loading';
|
||||
|
||||
const [sfc, bem] = use('button');
|
||||
|
||||
export default sfc({
|
||||
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);
|
||||
export default sfc(
|
||||
{
|
||||
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'
|
||||
}
|
||||
},
|
||||
|
||||
render(h, context, inherit) {
|
||||
const { props, listeners } = context;
|
||||
const { type, disabled, loading } = props;
|
||||
|
||||
const onClick = event => {
|
||||
if (!loading && !disabled && listeners.click) {
|
||||
listeners.click(event);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<props.tag
|
||||
type={props.nativeType}
|
||||
disabled={disabled}
|
||||
class={bem([
|
||||
type,
|
||||
props.size,
|
||||
{
|
||||
loading,
|
||||
disabled,
|
||||
block: props.block,
|
||||
plain: props.plain,
|
||||
round: props.round,
|
||||
square: props.square,
|
||||
'bottom-action': props.bottomAction
|
||||
}
|
||||
])}
|
||||
onClick={onClick}
|
||||
{...inherit}
|
||||
>
|
||||
{loading ? (
|
||||
<Loading size="20px" color={type === 'default' ? undefined : ''} />
|
||||
) : (
|
||||
<span class={bem('text')}>{context.children || props.text}</span>
|
||||
)}
|
||||
</props.tag>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
});
|
||||
true
|
||||
);
|
||||
|
||||
@ -15,7 +15,7 @@ export default sfc(
|
||||
addText: String
|
||||
},
|
||||
|
||||
render(h, context) {
|
||||
render(h, context, inherit) {
|
||||
const { props, listeners } = context;
|
||||
|
||||
const List = props.list.map((item, index) => (
|
||||
@ -43,7 +43,7 @@ export default sfc(
|
||||
));
|
||||
|
||||
return (
|
||||
<div class={bem()} {...context.data}>
|
||||
<div class={bem()} {...inherit}>
|
||||
<RadioGroup value={props.value} class={bem('group')}>
|
||||
{List}
|
||||
</RadioGroup>
|
||||
|
||||
@ -21,7 +21,7 @@ export default sfc(
|
||||
}
|
||||
},
|
||||
|
||||
render(h, context) {
|
||||
render(h, context, inherit) {
|
||||
const { props, listeners } = context;
|
||||
const slots = context.slots();
|
||||
|
||||
@ -29,7 +29,7 @@ export default sfc(
|
||||
<div
|
||||
class={[bem({ fixed: props.fixed }), { 'van-hairline--bottom': props.border }]}
|
||||
style={{ zIndex: props.zIndex }}
|
||||
{...context.data}
|
||||
{...inherit}
|
||||
>
|
||||
<div
|
||||
class={bem('left')}
|
||||
|
||||
@ -25,14 +25,14 @@ export default sfc(
|
||||
}
|
||||
},
|
||||
|
||||
render(h, context) {
|
||||
render(h, context, inherit) {
|
||||
const { props, listeners } = context;
|
||||
const { tip, price } = props;
|
||||
const slots = context.slots();
|
||||
const hasPrice = typeof price === 'number';
|
||||
|
||||
return (
|
||||
<div class={bem()} {...context.data}>
|
||||
<div class={bem()} {...inherit}>
|
||||
{slots.top}
|
||||
{(slots.tip || tip) && (
|
||||
<div class={bem('tip')}>
|
||||
|
||||
@ -13,14 +13,14 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<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"><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--disabled van-button--square"><span class="van-button__text">提交订单</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
<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--loading van-button--square">
|
||||
<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>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
exports[`disable 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"><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--disabled van-button--square"><span class="van-button__text"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -18,7 +18,7 @@ export default sfc(
|
||||
}
|
||||
},
|
||||
|
||||
render(h, context) {
|
||||
render(h, context, inherit) {
|
||||
const { props } = context;
|
||||
|
||||
return (
|
||||
@ -26,8 +26,8 @@ export default sfc(
|
||||
center
|
||||
title={props.title}
|
||||
border={props.border}
|
||||
style={context.style}
|
||||
class={[bem(), context.class, context.staticClass]}
|
||||
class={bem()}
|
||||
{...inherit}
|
||||
>
|
||||
<Switch {...{ props, on: context.listeners }} />
|
||||
</Cell>
|
||||
|
||||
@ -27,10 +27,21 @@ function defaultProps(props) {
|
||||
function install(Vue) {
|
||||
const { name } = this;
|
||||
Vue.component(name, this);
|
||||
Vue.component((camelize(`-${name}`)), this);
|
||||
Vue.component(camelize(`-${name}`), this);
|
||||
}
|
||||
|
||||
export default name => (sfc, functional) => {
|
||||
function functional(sfc) {
|
||||
const { render } = sfc;
|
||||
sfc.functional = true;
|
||||
sfc.render = (h, context) =>
|
||||
render(h, context, {
|
||||
style: context.data.style,
|
||||
class: context.data.class,
|
||||
staticClass: context.data.staticClass
|
||||
});
|
||||
}
|
||||
|
||||
export default name => (sfc, isFunctional) => {
|
||||
sfc.name = name;
|
||||
sfc.install = install;
|
||||
|
||||
@ -38,8 +49,8 @@ export default name => (sfc, functional) => {
|
||||
defaultProps(sfc.props);
|
||||
}
|
||||
|
||||
if (functional) {
|
||||
sfc.functional = true;
|
||||
if (isFunctional) {
|
||||
functional(sfc);
|
||||
}
|
||||
|
||||
return sfc;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user