mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Checkbox: jsx (#2497)
This commit is contained in:
neverland
GitHub
parent
12a8f3a032
commit
543928a57b
@ -1,36 +1,10 @@
|
||||
<template>
|
||||
<div :class="b()">
|
||||
<div
|
||||
:class="b('icon', [shape, { disabled: isDisabled, checked }])"
|
||||
@click="toggle"
|
||||
>
|
||||
<slot
|
||||
name="icon"
|
||||
:checked="checked"
|
||||
>
|
||||
<icon
|
||||
name="success"
|
||||
:style="iconStyle"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
<span
|
||||
v-if="$slots.default"
|
||||
:class="b('label', [labelPosition, { disabled: isDisabled }])"
|
||||
@click="toggle('label')"
|
||||
>
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import create from '../utils/create';
|
||||
import { use } from '../utils';
|
||||
import Icon from '../icon';
|
||||
import findParent from '../mixins/find-parent';
|
||||
|
||||
export default create({
|
||||
name: 'checkbox',
|
||||
const [sfc, bem] = use('checkbox');
|
||||
|
||||
export default sfc({
|
||||
mixins: [findParent],
|
||||
|
||||
props: {
|
||||
@ -49,9 +23,7 @@ export default create({
|
||||
computed: {
|
||||
checked: {
|
||||
get() {
|
||||
return this.parent
|
||||
? this.parent.value.indexOf(this.name) !== -1
|
||||
: this.value;
|
||||
return this.parent ? this.parent.value.indexOf(this.name) !== -1 : this.value;
|
||||
},
|
||||
|
||||
set(val) {
|
||||
@ -119,6 +91,36 @@ export default create({
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const CheckIcon = this.$scopedSlots.icon ? (
|
||||
this.$scopedSlots.icon({ checked: this.checked })
|
||||
) : (
|
||||
<Icon name="success" style={this.iconStyle} />
|
||||
);
|
||||
|
||||
const Label = this.$slots.default && (
|
||||
<span
|
||||
class={bem('label', [this.labelPosition, { disabled: this.isDisabled }])}
|
||||
onClick={() => {
|
||||
this.toggle('label');
|
||||
}}
|
||||
>
|
||||
{this.$slots.default}
|
||||
</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<div class={bem()}>
|
||||
<div
|
||||
class={bem('icon', [this.shape, { disabled: this.isDisabled, checked: this.checked }])}
|
||||
onClick={this.toggle}
|
||||
>
|
||||
{CheckIcon}
|
||||
</div>
|
||||
{Label}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -6,21 +6,24 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i></div> <span class="van-checkbox__label">复选框</span>
|
||||
<!----></i></div>
|
||||
<span class="van-checkbox__label">复选框</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i></div> <span class="van-checkbox__label van-checkbox__label--disabled">
|
||||
<!----></i></div>
|
||||
<span class="van-checkbox__label van-checkbox__label--disabled">
|
||||
复选框
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i></div> <span class="van-checkbox__label van-checkbox__label--disabled">
|
||||
<!----></i></div>
|
||||
<span class="van-checkbox__label van-checkbox__label--disabled">
|
||||
复选框
|
||||
</span>
|
||||
</div>
|
||||
@ -29,14 +32,16 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;border-color:#07c160;background-color:#07c160;">
|
||||
<!---->
|
||||
<!----></i></div> <span class="van-checkbox__label">
|
||||
<!----></i></div>
|
||||
<span class="van-checkbox__label">
|
||||
自定义颜色
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png"></div> <span class="van-checkbox__label">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png"></div>
|
||||
<span class="van-checkbox__label">
|
||||
自定义图标
|
||||
</span>
|
||||
</div>
|
||||
@ -46,21 +51,24 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i></div> <span class="van-checkbox__label">
|
||||
<!----></i></div>
|
||||
<span class="van-checkbox__label">
|
||||
复选框 a
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i></div> <span class="van-checkbox__label">
|
||||
<!----></i></div>
|
||||
<span class="van-checkbox__label">
|
||||
复选框 b
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i></div> <span class="van-checkbox__label">
|
||||
<!----></i></div>
|
||||
<span class="van-checkbox__label">
|
||||
复选框 c
|
||||
</span>
|
||||
</div>
|
||||
@ -71,21 +79,24 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i></div> <span class="van-checkbox__label">
|
||||
<!----></i></div>
|
||||
<span class="van-checkbox__label">
|
||||
复选框 a
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i></div> <span class="van-checkbox__label">
|
||||
<!----></i></div>
|
||||
<span class="van-checkbox__label">
|
||||
复选框 b
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i></div> <span class="van-checkbox__label">
|
||||
<!----></i></div>
|
||||
<span class="van-checkbox__label">
|
||||
复选框 c
|
||||
</span>
|
||||
</div>
|
||||
@ -102,7 +113,6 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -115,7 +125,6 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -128,7 +137,6 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -72,7 +72,6 @@ exports[`render coupon list 1`] = `
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
|
||||
<!---->
|
||||
<!----></i></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -41,7 +41,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i></div> <span class="van-checkbox__label">全选</span>
|
||||
<!----></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--large van-button--square"><span class="van-button__text">提交订单</span></button>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user