mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
test(CheckBox): add demo test
This commit is contained in:
nemo-shen
neverland
parent
f88aaf114c
commit
fd85dcb64b
@ -75,6 +75,7 @@
|
|||||||
"van-cell-demo": "./dist/cell/demo/index",
|
"van-cell-demo": "./dist/cell/demo/index",
|
||||||
"van-cell-group": "./dist/cell-group/index",
|
"van-cell-group": "./dist/cell-group/index",
|
||||||
"van-checkbox": "./dist/checkbox/index",
|
"van-checkbox": "./dist/checkbox/index",
|
||||||
|
"van-checkbox-demo": "./dist/checkbox/demo/index",
|
||||||
"van-checkbox-group": "./dist/checkbox-group/index",
|
"van-checkbox-group": "./dist/checkbox-group/index",
|
||||||
"van-col": "./dist/col/index",
|
"van-col": "./dist/col/index",
|
||||||
"van-count-down": "./dist/count-down/index",
|
"van-count-down": "./dist/count-down/index",
|
||||||
|
|||||||
@ -1,32 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
|
|
||||||
Page({
|
Page();
|
||||||
data: {
|
|
||||||
checkbox1: true,
|
|
||||||
checkbox2: true,
|
|
||||||
checkbox3: true,
|
|
||||||
checkboxLabel: true,
|
|
||||||
checkboxSize: true,
|
|
||||||
checkboxShape: true,
|
|
||||||
list: ['a', 'b', 'c'],
|
|
||||||
result: ['a', 'b'],
|
|
||||||
result2: [],
|
|
||||||
result3: [],
|
|
||||||
result4: [],
|
|
||||||
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
|
|
||||||
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange(event) {
|
|
||||||
const { key } = event.currentTarget.dataset;
|
|
||||||
this.setData({ [key]: event.detail });
|
|
||||||
},
|
|
||||||
|
|
||||||
toggle(event) {
|
|
||||||
const { index } = event.currentTarget.dataset;
|
|
||||||
const checkbox = this.selectComponent(`.checkboxes-${index}`);
|
|
||||||
checkbox.toggle();
|
|
||||||
},
|
|
||||||
|
|
||||||
noop() {},
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,150 +1 @@
|
|||||||
<demo-block title="基本用法">
|
<van-checkbox-demo />
|
||||||
<van-checkbox
|
|
||||||
value="{{ checkbox1 }}"
|
|
||||||
data-key="checkbox1"
|
|
||||||
custom-class="demo-checkbox"
|
|
||||||
bind:change="onChange"
|
|
||||||
>
|
|
||||||
复选框
|
|
||||||
</van-checkbox>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="禁用状态">
|
|
||||||
<van-checkbox
|
|
||||||
disabled
|
|
||||||
value="{{ false }}"
|
|
||||||
custom-class="demo-checkbox"
|
|
||||||
>
|
|
||||||
复选框
|
|
||||||
</van-checkbox>
|
|
||||||
<van-checkbox
|
|
||||||
disabled
|
|
||||||
value="{{ true }}"
|
|
||||||
custom-class="demo-checkbox"
|
|
||||||
>
|
|
||||||
复选框
|
|
||||||
</van-checkbox>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="自定义形状">
|
|
||||||
<van-checkbox
|
|
||||||
value="{{ checkboxShape }}"
|
|
||||||
data-key="checkboxShape"
|
|
||||||
shape="square"
|
|
||||||
custom-class="demo-checkbox"
|
|
||||||
bind:change="onChange"
|
|
||||||
>
|
|
||||||
复选框
|
|
||||||
</van-checkbox>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="自定义颜色">
|
|
||||||
<van-checkbox
|
|
||||||
value="{{ checkbox2 }}"
|
|
||||||
data-key="checkbox2"
|
|
||||||
checked-color="#07c160"
|
|
||||||
custom-class="demo-checkbox"
|
|
||||||
bind:change="onChange"
|
|
||||||
>
|
|
||||||
复选框
|
|
||||||
</van-checkbox>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="自定义大小">
|
|
||||||
<van-checkbox
|
|
||||||
icon-size="25px"
|
|
||||||
value="{{ checkboxSize }}"
|
|
||||||
data-key="checkboxSize"
|
|
||||||
custom-class="demo-checkbox"
|
|
||||||
bind:change="onChange"
|
|
||||||
>
|
|
||||||
复选框
|
|
||||||
</van-checkbox>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="自定义图标">
|
|
||||||
<van-checkbox
|
|
||||||
use-icon-slot
|
|
||||||
value="{{ checkbox3 }}"
|
|
||||||
data-key="checkbox3"
|
|
||||||
custom-class="demo-checkbox"
|
|
||||||
bind:change="onChange"
|
|
||||||
>
|
|
||||||
自定义图标
|
|
||||||
<image
|
|
||||||
slot="icon"
|
|
||||||
class="icon"
|
|
||||||
mode="widthFix"
|
|
||||||
src="{{ checkbox3 ? activeIcon : inactiveIcon }}"
|
|
||||||
/>
|
|
||||||
</van-checkbox>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="禁用文本点击">
|
|
||||||
<van-checkbox
|
|
||||||
label-disabled
|
|
||||||
value="{{ checkboxLabel }}"
|
|
||||||
data-key="checkboxLabel"
|
|
||||||
custom-class="demo-checkbox"
|
|
||||||
bind:change="onChange"
|
|
||||||
>
|
|
||||||
复选框
|
|
||||||
</van-checkbox>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="复选框组">
|
|
||||||
<van-checkbox-group value="{{ result }}" data-key="result" bind:change="onChange">
|
|
||||||
<van-checkbox
|
|
||||||
wx:for="{{ list }}"
|
|
||||||
wx:key="*this"
|
|
||||||
name="{{ item }}"
|
|
||||||
custom-class="demo-checkbox"
|
|
||||||
>
|
|
||||||
复选框 {{ item }}
|
|
||||||
</van-checkbox>
|
|
||||||
</van-checkbox-group>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="水平排列">
|
|
||||||
<van-checkbox-group direction="horizontal" value="{{ result4 }}" data-key="result4" bind:change="onChange">
|
|
||||||
<van-checkbox
|
|
||||||
wx:for="{{ list }}"
|
|
||||||
wx:key="*this"
|
|
||||||
name="{{ item }}"
|
|
||||||
custom-class="demo-checkbox"
|
|
||||||
>
|
|
||||||
复选框 {{ item }}
|
|
||||||
</van-checkbox>
|
|
||||||
</van-checkbox-group>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="限制最大可选数">
|
|
||||||
<van-checkbox-group value="{{ result2 }}" data-key="result2" max="2" bind:change="onChange">
|
|
||||||
<van-checkbox
|
|
||||||
wx:for="{{ list }}"
|
|
||||||
wx:key="*this"
|
|
||||||
name="{{ item }}"
|
|
||||||
custom-class="demo-checkbox"
|
|
||||||
>
|
|
||||||
复选框 {{ item }}
|
|
||||||
</van-checkbox>
|
|
||||||
</van-checkbox-group>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="搭配单元格组件使用">
|
|
||||||
<van-checkbox-group value="{{ result3 }}" data-key="result3" bind:change="onChange">
|
|
||||||
<van-cell-group >
|
|
||||||
<van-cell
|
|
||||||
wx:for="{{ list }}"
|
|
||||||
wx:key="*this"
|
|
||||||
title="复选框 {{ item }}"
|
|
||||||
value-class="value-class"
|
|
||||||
clickable
|
|
||||||
data-index="{{ index }}"
|
|
||||||
bind:click="toggle"
|
|
||||||
>
|
|
||||||
<van-checkbox catch:tap="noop" class="checkboxes-{{ index }}" name="{{ item }}" />
|
|
||||||
</van-cell>
|
|
||||||
</van-cell-group>
|
|
||||||
</van-checkbox-group>
|
|
||||||
</demo-block>
|
|
||||||
|
|||||||
10
packages/checkbox/demo/index.json
Normal file
10
packages/checkbox/demo/index.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"van-button": "../../button/index",
|
||||||
|
"van-cell": "../../cell/index",
|
||||||
|
"van-checkbox": "../../checkbox/index",
|
||||||
|
"van-checkbox-group": "../../checkbox-group/index",
|
||||||
|
"demo-block": "../../../example/components/demo-block/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
34
packages/checkbox/demo/index.ts
Normal file
34
packages/checkbox/demo/index.ts
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { VantComponent } from '../../common/component';
|
||||||
|
|
||||||
|
VantComponent({
|
||||||
|
data: {
|
||||||
|
checkbox1: true,
|
||||||
|
checkbox2: true,
|
||||||
|
checkbox3: true,
|
||||||
|
checkboxLabel: true,
|
||||||
|
checkboxSize: true,
|
||||||
|
checkboxShape: true,
|
||||||
|
list: ['a', 'b', 'c'],
|
||||||
|
result: ['a', 'b'],
|
||||||
|
result2: [],
|
||||||
|
result3: [],
|
||||||
|
result4: [],
|
||||||
|
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||||
|
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange(event) {
|
||||||
|
const { key } = event.currentTarget.dataset;
|
||||||
|
this.setData({ [key]: event.detail });
|
||||||
|
},
|
||||||
|
|
||||||
|
toggle(event) {
|
||||||
|
const { index } = event.currentTarget.dataset;
|
||||||
|
const checkbox = this.selectComponent(`.checkboxes-${index}`);
|
||||||
|
checkbox.toggle();
|
||||||
|
},
|
||||||
|
|
||||||
|
noop() {},
|
||||||
|
},
|
||||||
|
});
|
||||||
150
packages/checkbox/demo/index.wxml
Normal file
150
packages/checkbox/demo/index.wxml
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
<demo-block title="基本用法">
|
||||||
|
<van-checkbox
|
||||||
|
value="{{ checkbox1 }}"
|
||||||
|
data-key="checkbox1"
|
||||||
|
custom-class="demo-checkbox"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
复选框
|
||||||
|
</van-checkbox>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="禁用状态">
|
||||||
|
<van-checkbox
|
||||||
|
disabled
|
||||||
|
value="{{ false }}"
|
||||||
|
custom-class="demo-checkbox"
|
||||||
|
>
|
||||||
|
复选框
|
||||||
|
</van-checkbox>
|
||||||
|
<van-checkbox
|
||||||
|
disabled
|
||||||
|
value="{{ true }}"
|
||||||
|
custom-class="demo-checkbox"
|
||||||
|
>
|
||||||
|
复选框
|
||||||
|
</van-checkbox>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义形状">
|
||||||
|
<van-checkbox
|
||||||
|
value="{{ checkboxShape }}"
|
||||||
|
data-key="checkboxShape"
|
||||||
|
shape="square"
|
||||||
|
custom-class="demo-checkbox"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
复选框
|
||||||
|
</van-checkbox>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义颜色">
|
||||||
|
<van-checkbox
|
||||||
|
value="{{ checkbox2 }}"
|
||||||
|
data-key="checkbox2"
|
||||||
|
checked-color="#07c160"
|
||||||
|
custom-class="demo-checkbox"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
复选框
|
||||||
|
</van-checkbox>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义大小">
|
||||||
|
<van-checkbox
|
||||||
|
icon-size="25px"
|
||||||
|
value="{{ checkboxSize }}"
|
||||||
|
data-key="checkboxSize"
|
||||||
|
custom-class="demo-checkbox"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
复选框
|
||||||
|
</van-checkbox>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义图标">
|
||||||
|
<van-checkbox
|
||||||
|
use-icon-slot
|
||||||
|
value="{{ checkbox3 }}"
|
||||||
|
data-key="checkbox3"
|
||||||
|
custom-class="demo-checkbox"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
自定义图标
|
||||||
|
<image
|
||||||
|
slot="icon"
|
||||||
|
class="icon"
|
||||||
|
mode="widthFix"
|
||||||
|
src="{{ checkbox3 ? activeIcon : inactiveIcon }}"
|
||||||
|
/>
|
||||||
|
</van-checkbox>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="禁用文本点击">
|
||||||
|
<van-checkbox
|
||||||
|
label-disabled
|
||||||
|
value="{{ checkboxLabel }}"
|
||||||
|
data-key="checkboxLabel"
|
||||||
|
custom-class="demo-checkbox"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
复选框
|
||||||
|
</van-checkbox>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="复选框组">
|
||||||
|
<van-checkbox-group value="{{ result }}" data-key="result" bind:change="onChange">
|
||||||
|
<van-checkbox
|
||||||
|
wx:for="{{ list }}"
|
||||||
|
wx:key="*this"
|
||||||
|
name="{{ item }}"
|
||||||
|
custom-class="demo-checkbox"
|
||||||
|
>
|
||||||
|
复选框 {{ item }}
|
||||||
|
</van-checkbox>
|
||||||
|
</van-checkbox-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="水平排列">
|
||||||
|
<van-checkbox-group direction="horizontal" value="{{ result4 }}" data-key="result4" bind:change="onChange">
|
||||||
|
<van-checkbox
|
||||||
|
wx:for="{{ list }}"
|
||||||
|
wx:key="*this"
|
||||||
|
name="{{ item }}"
|
||||||
|
custom-class="demo-checkbox"
|
||||||
|
>
|
||||||
|
复选框 {{ item }}
|
||||||
|
</van-checkbox>
|
||||||
|
</van-checkbox-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="限制最大可选数">
|
||||||
|
<van-checkbox-group value="{{ result2 }}" data-key="result2" max="2" bind:change="onChange">
|
||||||
|
<van-checkbox
|
||||||
|
wx:for="{{ list }}"
|
||||||
|
wx:key="*this"
|
||||||
|
name="{{ item }}"
|
||||||
|
custom-class="demo-checkbox"
|
||||||
|
>
|
||||||
|
复选框 {{ item }}
|
||||||
|
</van-checkbox>
|
||||||
|
</van-checkbox-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="搭配单元格组件使用">
|
||||||
|
<van-checkbox-group value="{{ result3 }}" data-key="result3" bind:change="onChange">
|
||||||
|
<van-cell-group >
|
||||||
|
<van-cell
|
||||||
|
wx:for="{{ list }}"
|
||||||
|
wx:key="*this"
|
||||||
|
title="复选框 {{ item }}"
|
||||||
|
value-class="value-class"
|
||||||
|
clickable
|
||||||
|
data-index="{{ index }}"
|
||||||
|
bind:click="toggle"
|
||||||
|
>
|
||||||
|
<van-checkbox catch:tap="noop" class="checkboxes-{{ index }}" name="{{ item }}" />
|
||||||
|
</van-cell>
|
||||||
|
</van-cell-group>
|
||||||
|
</van-checkbox-group>
|
||||||
|
</demo-block>
|
||||||
875
packages/checkbox/test/__snapshots__/demo.spec.ts.snap
Normal file
875
packages/checkbox/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,875 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should render demo and match snapshot 1`] = `
|
||||||
|
<main>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
基本用法
|
||||||
|
</wx-view>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
data-key="checkbox1"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
禁用状态
|
||||||
|
</wx-view>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right van-checkbox__label--disabled"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right van-checkbox__label--disabled"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
自定义形状
|
||||||
|
</wx-view>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
data-key="checkboxShape"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
自定义颜色
|
||||||
|
</wx-view>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
data-key="checkbox2"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px;border-color:#07c160;background-color:#07c160"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
自定义大小
|
||||||
|
</wx-view>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
data-key="checkboxSize"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:25px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
自定义图标
|
||||||
|
</wx-view>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
data-key="checkbox3"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="icon"
|
||||||
|
mode="widthFix"
|
||||||
|
slot="icon"
|
||||||
|
src="https://img.yzcdn.cn/vant/user-active.png"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
自定义图标
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
禁用文本点击
|
||||||
|
</wx-view>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
data-key="checkboxLabel"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
复选框组
|
||||||
|
</wx-view>
|
||||||
|
<van-checkbox-group
|
||||||
|
data-key="result"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox-group"
|
||||||
|
>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框 a
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框 b
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框 c
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox-group>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
水平排列
|
||||||
|
</wx-view>
|
||||||
|
<van-checkbox-group
|
||||||
|
data-key="result4"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox-group van-checkbox-group--horizontal"
|
||||||
|
>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox van-checkbox--horizontal custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框 a
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox van-checkbox--horizontal custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框 b
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox van-checkbox--horizontal custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框 c
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox-group>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
限制最大可选数
|
||||||
|
</wx-view>
|
||||||
|
<van-checkbox-group
|
||||||
|
data-key="result2"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox-group"
|
||||||
|
>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框 a
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框 b
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
<van-checkbox
|
||||||
|
customClass="demo-checkbox"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
>
|
||||||
|
|
||||||
|
复选框 c
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox-group>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
搭配单元格组件使用
|
||||||
|
</wx-view>
|
||||||
|
<van-checkbox-group
|
||||||
|
data-key="result3"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox-group"
|
||||||
|
>
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell
|
||||||
|
data-index="{{0}}"
|
||||||
|
valueClass="value-class"
|
||||||
|
bind:click="toggle"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-cell van-cell--clickable"
|
||||||
|
hoverClass="van-cell--hover hover-class"
|
||||||
|
hoverStayTime="70"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__title title-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
复选框 a
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__value value-class"
|
||||||
|
>
|
||||||
|
<van-checkbox
|
||||||
|
class="checkboxes-0"
|
||||||
|
catch:tap="noop"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell
|
||||||
|
data-index="{{1}}"
|
||||||
|
valueClass="value-class"
|
||||||
|
bind:click="toggle"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-cell van-cell--clickable"
|
||||||
|
hoverClass="van-cell--hover hover-class"
|
||||||
|
hoverStayTime="70"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__title title-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
复选框 b
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__value value-class"
|
||||||
|
>
|
||||||
|
<van-checkbox
|
||||||
|
class="checkboxes-1"
|
||||||
|
catch:tap="noop"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell
|
||||||
|
data-index="{{2}}"
|
||||||
|
valueClass="value-class"
|
||||||
|
bind:click="toggle"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-cell van-cell--clickable"
|
||||||
|
hoverClass="van-cell--hover hover-class"
|
||||||
|
hoverStayTime="70"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__title title-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
复选框 c
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__value value-class"
|
||||||
|
>
|
||||||
|
<van-checkbox
|
||||||
|
class="checkboxes-2"
|
||||||
|
catch:tap="noop"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-checkbox__icon-wrap"
|
||||||
|
bind:tap="toggle"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
class="van-checkbox__icon van-checkbox__icon--round"
|
||||||
|
customClass="icon-class"
|
||||||
|
style="font-size:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="font-size:0.8em;line-height: 1.25em;"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="label-class van-checkbox__label van-checkbox__label--right"
|
||||||
|
bind:tap="onClickLabel"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-cell>
|
||||||
|
</van-cell-group>
|
||||||
|
</wx-view>
|
||||||
|
</van-checkbox-group>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
</main>
|
||||||
|
`;
|
||||||
11
packages/checkbox/test/demo.spec.ts
Normal file
11
packages/checkbox/test/demo.spec.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import path from 'path';
|
||||||
|
import simulate from 'miniprogram-simulate';
|
||||||
|
|
||||||
|
test('should render demo and match snapshot', () => {
|
||||||
|
const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
|
||||||
|
rootPath: path.resolve(__dirname, '../../'),
|
||||||
|
});
|
||||||
|
const comp = simulate.render(id);
|
||||||
|
comp.attach(document.createElement('parent-wrapper'));
|
||||||
|
expect(comp.toJSON()).toMatchSnapshot();
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user