diff --git a/example/app.json b/example/app.json
index ccd15ebe..614fd513 100644
--- a/example/app.json
+++ b/example/app.json
@@ -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",
diff --git a/example/pages/checkbox/index.js b/example/pages/checkbox/index.js
index e70fc539..cc11dfda 100644
--- a/example/pages/checkbox/index.js
+++ b/example/pages/checkbox/index.js
@@ -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();
diff --git a/example/pages/checkbox/index.wxml b/example/pages/checkbox/index.wxml
index 62921230..9a3e22d4 100644
--- a/example/pages/checkbox/index.wxml
+++ b/example/pages/checkbox/index.wxml
@@ -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 />
diff --git a/packages/checkbox/demo/index.json b/packages/checkbox/demo/index.json
new file mode 100644
index 00000000..3fdf853c
--- /dev/null
+++ b/packages/checkbox/demo/index.json
@@ -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"
+ }
+}
diff --git a/example/pages/checkbox/index.wxss b/packages/checkbox/demo/index.less
similarity index 100%
rename from example/pages/checkbox/index.wxss
rename to packages/checkbox/demo/index.less
diff --git a/packages/checkbox/demo/index.ts b/packages/checkbox/demo/index.ts
new file mode 100644
index 00000000..547eda7c
--- /dev/null
+++ b/packages/checkbox/demo/index.ts
@@ -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() {},
+ },
+});
diff --git a/packages/checkbox/demo/index.wxml b/packages/checkbox/demo/index.wxml
new file mode 100644
index 00000000..62921230
--- /dev/null
+++ b/packages/checkbox/demo/index.wxml
@@ -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>
diff --git a/packages/checkbox/test/__snapshots__/demo.spec.ts.snap b/packages/checkbox/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..09e87e7a
--- /dev/null
+++ b/packages/checkbox/test/__snapshots__/demo.spec.ts.snap
@@ -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>
+`;
diff --git a/packages/checkbox/test/demo.spec.ts b/packages/checkbox/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/checkbox/test/demo.spec.ts
@@ -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();
+});