mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +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-group": "./dist/cell-group/index",
|
||||
"van-checkbox": "./dist/checkbox/index",
|
||||
"van-checkbox-demo": "./dist/checkbox/demo/index",
|
||||
"van-checkbox-group": "./dist/checkbox-group/index",
|
||||
"van-col": "./dist/col/index",
|
||||
"van-count-down": "./dist/count-down/index",
|
||||
|
||||
@ -1,32 +1,3 @@
|
||||
import Page from '../../common/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() {},
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,150 +1 @@
|
||||
<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>
|
||||
<van-checkbox-demo />
|
||||
|
||||
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