From 15390241d8d4252a828aa0e9d8c61377ba07512a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 10 Feb 2020 19:37:52 +0800 Subject: [PATCH] feat(CheckboxGroup): add direction prop --- src/checkbox-group/index.js | 3 +- src/checkbox-group/index.less | 8 ++++ src/checkbox/README.md | 28 ++++++------ src/checkbox/README.zh-CN.md | 38 ++++++++-------- src/checkbox/demo/index.vue | 39 ++++++++++------ .../test/__snapshots__/demo.spec.js.snap | 39 ++++++++-------- src/form/demo/FieldType.vue | 14 +++++- src/form/test/__snapshots__/demo.spec.js.snap | 25 +++++++++-- src/radio/README.md | 18 ++++---- src/radio/README.zh-CN.md | 22 +++++----- src/radio/demo/index.vue | 34 +++++++------- .../test/__snapshots__/demo.spec.js.snap | 44 +++++++++---------- 12 files changed, 184 insertions(+), 128 deletions(-) create mode 100644 src/checkbox-group/index.less diff --git a/src/checkbox-group/index.js b/src/checkbox-group/index.js index 72acf8fee..18e7ecba8 100644 --- a/src/checkbox-group/index.js +++ b/src/checkbox-group/index.js @@ -9,6 +9,7 @@ export default createComponent({ props: { max: [Number, String], disabled: Boolean, + direction: String, iconSize: [Number, String], checkedColor: String, value: { @@ -42,6 +43,6 @@ export default createComponent({ }, render() { - return
{this.slots()}
; + return
{this.slots()}
; }, }); diff --git a/src/checkbox-group/index.less b/src/checkbox-group/index.less new file mode 100644 index 000000000..eb3fa9b6b --- /dev/null +++ b/src/checkbox-group/index.less @@ -0,0 +1,8 @@ +@import '../style/var'; + +.van-checkbox-group { + &--horizontal { + display: flex; + flex-wrap: wrap; + } +} diff --git a/src/checkbox/README.md b/src/checkbox/README.md index 52528f8fe..87e2d661a 100644 --- a/src/checkbox/README.md +++ b/src/checkbox/README.md @@ -34,12 +34,6 @@ export default { Checkbox ``` -### Disabled Label Click - -```html -Checkbox -``` - ### Custom Shape ```html @@ -85,6 +79,12 @@ export default { }; ``` +### Disable Label Click + +```html +Checkbox +``` + ### Checkbox Group When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model. @@ -137,7 +137,6 @@ export default { result: [] } }, - methods: { checkAll() { this.$refs.checkboxGroup.toggleAll(true); @@ -161,11 +160,7 @@ export default { :title="`Checkbox ${item}`" @click="toggle(index)" > - + @@ -173,6 +168,12 @@ export default { ```js export default { + data() { + return { + list: ['a', 'b'] + result: [] + }; + }, methods: { toggle(index) { this.$refs.checkboxes[index].toggle(); @@ -202,8 +203,9 @@ export default { | Attribute | Description | Type | Default | |------|------|------|------| | v-model (value) | Names of all checked checkboxes | *any[]* | - | +| disabled | Whether to disable all checkboxes | *boolean* | `false` | | max | Maximum amount of checked options | *number \| string* | `0`(Unlimited) | -| disabled | Disable all checkboxes | *boolean* | `false` | +| direction `v2.5.0` | Direction, can be set to `horizontal` | *string* | `vertical` | | icon-size `v2.2.3` | Icon size of all checkboxes | *number \| string* | `20px` | | checked-color `v2.2.3` | Checked color of all checkboxes | *string* | `#1989fa` | - | diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index 571ffa523..f9c81e133 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -38,14 +38,6 @@ export default { 复选框 ``` -### 禁用文本点击 - -设置`label-disabled`属性后，点击复选框图标以外的内容不会触发切换 - -```html -复选框 -``` - ### 自定义形状 将`shape`属性设置为`square`，复选框的形状会变成方形 @@ -95,9 +87,17 @@ export default { } ``` +### 禁用文本点击 + +设置`label-disabled`属性后，点击图标以外的内容不会触发复选框切换 + +```html +复选框 +``` + ### 复选框组 -复选框可以与复选框组一起使用，选中值是一个数组，通过`v-model`绑定在`CheckboxGroup`上，数组中的值为选中的复选框的`name` +复选框可以与复选框组一起使用，复选框组通过`v-model`数组绑定复选框的勾选状态 ```html @@ -117,9 +117,9 @@ export default { }; ``` -### 设置最大可选数 +### 限制最大可选数 -通过`max`属性可以限制最大可选数 +通过`max`属性可以限制复选框组的最大可选数 ```html @@ -151,7 +151,6 @@ export default { result: [] } }, - methods: { checkAll() { this.$refs.checkboxGroup.toggleAll(true); @@ -177,11 +176,7 @@ export default { :title="`复选框 ${item}`" @click="toggle(index)" > - + @@ -189,6 +184,12 @@ export default { ```js export default { + data() { + return { + list: ['a', 'b'] + result: [] + }; + }, methods: { toggle(index) { this.$refs.checkboxes[index].toggle(); @@ -219,7 +220,8 @@ export default { |------|------|------|------| | v-model (value) | 所有选中项的标识符 | *any[]* | - | | disabled | 是否禁用所有复选框 | *boolean* | `false` | -| max | 最大可选数，0 为无限制 | *number \| string* | `0` | +| max | 最大可选数，`0`为无限制 | *number \| string* | `0` | +| direction `v2.5.0` | 排列方向，可选值为`horizontal` | *string* | `vertical` | | icon-size `v2.2.3` | 所有复选框的图标大小，默认单位为`px` | *number \| string* | `20px` | | checked-color `v2.2.3` | 所有复选框的选中状态颜色 | *string* | `#1989fa` | diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue index f1c22ccad..ba0fb241f 100644 --- a/src/checkbox/demo/index.vue +++ b/src/checkbox/demo/index.vue @@ -13,12 +13,6 @@ - - - {{ $t('checkbox') }} - - - {{ $t('customColor') }} @@ -46,11 +40,23 @@ + + + {{ $t('checkbox') }} + + + {{ $t('checkbox') }} a {{ $t('checkbox') }} b - {{ $t('checkbox') }} c + + + + + + {{ $t('checkbox') }} a + {{ $t('checkbox') }} b @@ -86,7 +92,7 @@ v-for="(item, index) in list" clickable :key="index" - :title="$t('checkbox') + item" + :title="`${$t('checkbox')} ${item}`" @click="toggle(index)" >