ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-22 03:44:48 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

feat(CheckboxGroup): add direction prop

Browse Source
This commit is contained in:
陈嘉涵
2020-02-10 19:37:52 +08:00
parent 4dd41b23de
commit 15390241d8
12 changed files with 184 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/checkbox/README.md
View File

@@ -34,12 +34,6 @@ export default {
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
```
### Disabled Label Click
```html
<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
```
### Custom Shape
```html
@@ -85,6 +79,12 @@ export default {
};
```
### Disable Label Click
```html
<van-checkbox v-model="checked" label-disabled>Checkbox</van-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)"
>
<van-checkbox
:name="item"
ref="checkboxes"
slot="right-icon"
/>
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
</van-cell>
</van-cell-group>
</van-checkbox-group>
@@ -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` | - |

38
src/checkbox/README.zh-CN.md
View File

@@ -38,14 +38,6 @@ export default {
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
```
### 禁用文本点击
设置`label-disabled`属性后，点击复选框图标以外的内容不会触发切换
```html
<van-checkbox v-model="checked" icon-disabled>复选框</van-checkbox>
```
### 自定义形状
将`shape`属性设置为`square`，复选框的形状会变成方形
@@ -95,9 +87,17 @@ export default {
}
```
### 禁用文本点击
设置`label-disabled`属性后，点击图标以外的内容不会触发复选框切换
```html
<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
```
### 复选框组
复选框可以与复选框组一起使用，选中值是一个数组，通过`v-model`绑定在`CheckboxGroup`上，数组中的值为选中的复选框的`name`
复选框可以与复选框组一起使用，复选框组通过`v-model`数组绑定复选框的勾选状态
```html
<van-checkbox-group v-model="result">
@@ -117,9 +117,9 @@ export default {
};
```
### 设置最大可选数
### 限制最大可选数
通过`max`属性可以限制最大可选数
通过`max`属性可以限制复选框组的最大可选数
```html
<van-checkbox-group v-model="result" :max="2">
@@ -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)"
>
<van-checkbox
:name="item"
ref="checkboxes"
slot="right-icon"
/>
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
</van-cell>
</van-cell-group>
</van-checkbox-group>
@@ -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` |

39
src/checkbox/demo/index.vue
View File

@@ -13,12 +13,6 @@
</van-checkbox>
</demo-block>
<demo-block :title="$t('disabledLabelClick')">
<van-checkbox v-model="checkboxLabel" label-disabled>
{{ $t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="$t('customShape')">
<van-checkbox v-model="checkboxShape" shape="square">
{{ $t('customColor') }}
@@ -46,11 +40,23 @@
</van-checkbox>
</demo-block>
<demo-block :title="$t('disableLabel')">
<van-checkbox v-model="checkboxLabel" label-disabled>
{{ $t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="$t('title3')">
<van-checkbox-group v-model="result">
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
<van-checkbox name="c">{{ $t('checkbox') }} c</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block :title="$t('horizontal')">
<van-checkbox-group v-model="horizontalResult" direction="horizontal">
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
</van-checkbox-group>
</demo-block>
@@ -86,7 +92,7 @@
v-for="(item, index) in list"
clickable
:key="index"
:title="$t('checkbox') + item"
:title="`${$t('checkbox')} ${item}`"
@click="toggle(index)"
>
<template #right-icon>
@@ -109,12 +115,13 @@ export default {
customColor: '自定义颜色',
customShape: '自定义形状',
title3: '复选框组',
title4: '设置最大可选数',
title4: '限制最大可选数',
title5: '搭配单元格组件使用',
toggleAll: '全选与反选',
checkAll: '全选',
inverse: '反选',
disabledLabelClick: '禁用文本点击',
horizontal: '水平排列',
disableLabel: '禁用文本点击',
},
'en-US': {
checkbox: 'Checkbox',
@@ -128,7 +135,8 @@ export default {
toggleAll: 'Toggle All',
checkAll: 'Check All',
inverse: 'Inverse',
disabledLabelClick: 'Disable the click event of label',
horizontal: 'Horizontal',
disableLabel: 'Disable label click',
},
},
@@ -140,11 +148,12 @@ export default {
checkboxShape: true,
checkboxLabel: true,
checboxIcon: true,
list: ['a', 'b', 'c'],
list: ['a', 'b'],
result: ['a', 'b'],
result2: [],
result3: [],
checkAllResult: [],
horizontalResult: [],
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
};
@@ -173,7 +182,7 @@ export default {
background: @white;
.van-checkbox {
margin: 10px 0 0 20px;
margin: 0 0 8px 20px;
}
.van-cell {
@@ -193,5 +202,9 @@ export default {
margin-left: @padding-md;
}
}
.van-doc-demo-block__title {
margin-top: -8px;
}
}
</style>

39
src/checkbox/test/__snapshots__/demo.spec.js.snap
View File

@@ -22,14 +22,6 @@ exports[`renders demo correctly 1`] = `
</span>
</div>
</div>
<div>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-checkbox--label-disabled">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框
</span>
</div>
</div>
<div>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"><i class="van-icon van-icon-success">
@@ -61,6 +53,14 @@ exports[`renders demo correctly 1`] = `
</span>
</div>
</div>
<div>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-checkbox--label-disabled">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框
</span>
</div>
</div>
<div>
<div class="van-checkbox-group">
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
@@ -71,9 +71,17 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">复选框 b</span>
</div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
</div>
</div>
<div>
<div class="van-checkbox-group van-checkbox-group--horizontal">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">复选框 c</span>
<!----></i></div><span class="van-checkbox__label">复选框 a</span>
</div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">复选框 b</span>
</div>
</div>
</div>
@@ -118,21 +126,14 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox-group">
<div class="van-cell-group van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>复选框a</span></div>
<div class="van-cell__title"><span>复选框 a</span></div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>复选框b</span></div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>复选框c</span></div>
<div class="van-cell__title"><span>复选框 b</span></div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>