mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] GoodsAction: jsx (#2513)
This commit is contained in:
neverland
GitHub
parent
31da78eae6
commit
b52a37220f
39
packages/goods-action-big-btn/index.js
Normal file
39
packages/goods-action-big-btn/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
import { use } from '../utils';
|
||||
import Button from '../button';
|
||||
import RouterLink from '../mixins/router-link';
|
||||
|
||||
const [sfc, bem] = use('goods-action-big-btn');
|
||||
|
||||
export default sfc({
|
||||
mixins: [RouterLink],
|
||||
|
||||
props: {
|
||||
text: String,
|
||||
primary: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event) {
|
||||
this.$emit('click', event);
|
||||
this.routerLink();
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
return (
|
||||
<Button
|
||||
square
|
||||
class={bem()}
|
||||
size="large"
|
||||
loading={this.loading}
|
||||
disabled={this.disabled}
|
||||
type={this.primary ? 'danger' : 'warning'}
|
||||
onClick={this.onClick}
|
||||
>
|
||||
{this.$slots.default || this.text}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<van-button
|
||||
square
|
||||
:class="b()"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
:disabled="disabled"
|
||||
:type="primary ? 'danger' : 'warning'"
|
||||
@click="onClick"
|
||||
>
|
||||
<slot>{{ text }}</slot>
|
||||
</van-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import create from '../utils/create';
|
||||
import VanButton from '../button';
|
||||
import RouterLink from '../mixins/router-link';
|
||||
|
||||
export default create({
|
||||
name: 'goods-action-big-btn',
|
||||
|
||||
mixins: [RouterLink],
|
||||
|
||||
components: {
|
||||
VanButton
|
||||
},
|
||||
|
||||
props: {
|
||||
text: String,
|
||||
primary: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event) {
|
||||
this.$emit('click', event);
|
||||
this.routerLink();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
32
packages/goods-action-mini-btn/index.js
Normal file
32
packages/goods-action-mini-btn/index.js
Normal file
@ -0,0 +1,32 @@
|
||||
import { use } from '../utils';
|
||||
import Icon from '../icon';
|
||||
import RouterLink from '../mixins/router-link';
|
||||
|
||||
const [sfc, bem] = use('goods-action-mini-btn');
|
||||
|
||||
export default sfc({
|
||||
mixins: [RouterLink],
|
||||
|
||||
props: {
|
||||
text: String,
|
||||
info: [String, Number],
|
||||
icon: String,
|
||||
iconClass: String
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event) {
|
||||
this.$emit('click', event);
|
||||
this.routerLink();
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
return (
|
||||
<div class={[bem(), 'van-hairline']} onClick={this.onClick}>
|
||||
<Icon class={[bem('icon'), this.iconClass]} info={this.info} name={this.icon} />
|
||||
{this.$slots.default || this.text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
:class="b()"
|
||||
class="van-hairline"
|
||||
@click="onClick"
|
||||
>
|
||||
<icon
|
||||
:class="[b('icon'), iconClass]"
|
||||
:info="info"
|
||||
:name="icon"
|
||||
/>
|
||||
<slot>{{ text }}</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import create from '../utils/create';
|
||||
import RouterLink from '../mixins/router-link';
|
||||
|
||||
export default create({
|
||||
name: 'goods-action-mini-btn',
|
||||
|
||||
mixins: [RouterLink],
|
||||
|
||||
props: {
|
||||
text: String,
|
||||
info: [String, Number],
|
||||
icon: String,
|
||||
iconClass: String
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event) {
|
||||
this.$emit('click', event);
|
||||
this.routerLink();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
9
packages/goods-action/index.js
Normal file
9
packages/goods-action/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
import { use } from '../utils';
|
||||
|
||||
const [sfc, bem] = use('goods-action');
|
||||
|
||||
export default sfc({
|
||||
render(h) {
|
||||
return <div class={bem()}>{this.$slots.default}</div>;
|
||||
}
|
||||
});
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<div :class="b()">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import create from '../utils/create';
|
||||
|
||||
export default create({
|
||||
name: 'goods-action'
|
||||
});
|
||||
</script>
|
||||
@ -4,26 +4,26 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-goods-action">
|
||||
<div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
|
||||
<div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i> 客服</div>
|
||||
<div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
|
||||
<!----></i>客服</div>
|
||||
<div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i> 购物车</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
|
||||
<!----></i>购物车</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-goods-action">
|
||||
<div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
|
||||
<div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i> 客服</div>
|
||||
<div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
|
||||
<!----></i>客服</div>
|
||||
<div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<div class="van-info">5</div>
|
||||
</i> 购物车</div>
|
||||
<div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
|
||||
</i>购物车</div>
|
||||
<div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i> 店铺</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
|
||||
<!----></i>店铺</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user