diff --git a/example/pages/checkbox/index.js b/example/pages/checkbox/index.js
index cde6932d..8691c11d 100644
--- a/example/pages/checkbox/index.js
+++ b/example/pages/checkbox/index.js
@@ -12,8 +12,9 @@ Page({
result: ['a', 'b'],
result2: [],
result3: [],
+ result4: [],
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
- inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
+ inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
},
onChange(event) {
@@ -24,7 +25,7 @@ Page({
onClick(event) {
const { value } = event.currentTarget.dataset;
this.setData({
- radio3: value
+ radio3: value,
});
},
@@ -34,5 +35,5 @@ Page({
checkbox.toggle();
},
- noop() {}
+ noop() {},
});
diff --git a/example/pages/checkbox/index.wxml b/example/pages/checkbox/index.wxml
index c9928936..62921230 100644
--- a/example/pages/checkbox/index.wxml
+++ b/example/pages/checkbox/index.wxml
@@ -105,6 +105,19 @@
+
+
+
+ 复选框 {{ item }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md
index 67174e23..767b2acd 100644
--- a/packages/checkbox/README.md
+++ b/packages/checkbox/README.md
@@ -211,26 +211,27 @@ Page({
### Checkbox Props
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| name | 标识 Checkbox 名称 | _string_ | - | - |
-| shape | 形状,可选值为 `round` `square` | _string_ | `round` | - |
-| value | 是否为选中状态 | _boolean_ | `false` | - |
-| disabled | 是否禁用单选框 | _boolean_ | `false` | - |
-| label-disabled | 是否禁用单选框内容点击 | _boolean_ | `false` | - |
-| label-position | 文本位置,可选值为 `left` | _string_ | `right` | - |
-| use-icon-slot | 是否使用 icon slot | _boolean_ | `false` | - |
-| checked-color | 选中状态颜色 | _string_ | `#1989fa` | - |
-| icon-size | icon 大小 | _string \| number_ | `20px` |
+| 参数 | 说明 | 类型 | 默认值 |
+| -------------- | ------------------------------- | ------------------ | --------- |
+| name | 标识 Checkbox 名称 | _string_ | - |
+| shape | 形状,可选值为 `round` `square` | _string_ | `round` |
+| value | 是否为选中状态 | _boolean_ | `false` |
+| disabled | 是否禁用单选框 | _boolean_ | `false` |
+| label-disabled | 是否禁用单选框内容点击 | _boolean_ | `false` |
+| label-position | 文本位置,可选值为 `left` | _string_ | `right` |
+| use-icon-slot | 是否使用 icon slot | _boolean_ | `false` |
+| checked-color | 选中状态颜色 | _string_ | `#1989fa` |
+| icon-size | icon 大小 | _string \| number_ | `20px` |
### CheckboxGroup Props
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| -------- | ---------------------- | --------- | ------------- | ---- |
-| name | 在表单内提交时的标识符 | _string_ | - | - |
-| value | 所有选中项的 name | _Array_ | - | - |
-| disabled | 是否禁用所有单选框 | _boolean_ | `false` | - |
-| max | 设置最大可选数 | _number_ | `0`(无限制) | - |
+| 参数 | 说明 | 类型 | 默认值 |
+| ------------------ | ------------------------------- | --------- | ------------- |
+| name | 在表单内提交时的标识符 | _string_ | - |
+| value | 所有选中项的 name | _Array_ | - |
+| disabled | 是否禁用所有单选框 | _boolean_ | `false` |
+| max | 设置最大可选数 | _number_ | `0`(无限制) |
+| direction `v1.7.0` | 排列方向,可选值为 `horizontal` | _string_ | `vertical` |
### Checkbox Event
diff --git a/packages/checkbox/index.less b/packages/checkbox/index.less
index 4abf30e9..2b667786 100644
--- a/packages/checkbox/index.less
+++ b/packages/checkbox/index.less
@@ -7,6 +7,10 @@
overflow: hidden;
user-select: none;
+ &--horizontal {
+ margin-right: @padding-sm;
+ }
+
&__icon-wrap,
&__label {
.theme(line-height, '@checkbox-size');
diff --git a/packages/checkbox/index.ts b/packages/checkbox/index.ts
index 58f2f4c0..e380c74e 100644
--- a/packages/checkbox/index.ts
+++ b/packages/checkbox/index.ts
@@ -38,6 +38,7 @@ VantComponent({
data: {
parentDisabled: false,
+ direction: 'vertical',
},
methods: {
diff --git a/packages/checkbox/index.wxml b/packages/checkbox/index.wxml
index 0c008d81..39a7bb03 100644
--- a/packages/checkbox/index.wxml
+++ b/packages/checkbox/index.wxml
@@ -1,7 +1,7 @@
-
+