docs: prettier all markdown files

This commit is contained in:
chenjiahan
2020-04-11 09:09:00 +08:00
committed by neverland
parent 48067f79db
commit 7f84f8a487
140 changed files with 4441 additions and 4723 deletions

View File

@@ -22,9 +22,9 @@ Vue.use(CheckboxGroup);
export default {
data() {
return {
checked: true
checked: true,
};
}
},
};
```
@@ -60,18 +60,14 @@ Use icon slot to custom icon
<van-checkbox v-model="checked">
customize icon
<template #icon="props">
<img
class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon"
/>
</template>
<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
</template>
</van-checkbox>
<style>
.img-icon {
height: 20px;
}
.img-icon {
height: 20px;
}
</style>
```
@@ -81,9 +77,9 @@ export default {
return {
checked: true,
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',
};
}
},
};
```
@@ -108,9 +104,9 @@ When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an
export default {
data() {
return {
result: ['a', 'b']
result: ['a', 'b'],
};
}
},
};
```
@@ -127,9 +123,9 @@ export default {
export default {
data() {
return {
result: []
result: [],
};
}
},
};
```
@@ -160,8 +156,8 @@ export default {
export default {
data() {
return {
result: []
}
result: [],
};
},
methods: {
checkAll() {
@@ -169,9 +165,9 @@ export default {
},
toggleAll() {
this.$refs.checkboxGroup.toggleAll();
}
}
}
},
},
};
```
### Inside a Cell
@@ -186,9 +182,9 @@ export default {
:title="`Checkbox ${item}`"
@click="toggle(index)"
>
<template #right-icon>
<van-checkbox :name="item" ref="checkboxes" />
</template>
<template #right-icon>
<van-checkbox :name="item" ref="checkboxes" />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
@@ -215,60 +211,60 @@ export default {
### Checkbox Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| v-model (value) | Check status | *boolean* | `false` |
| name | Checkbox name | *any* | - |
| shape | Can be set to `square` | *string* | `round` |
| disabled | Disable checkbox | *boolean* | `false` |
| label-disabled | Whether to disable label click | *boolean* | `false` |
| label-position | Can be set to `left` | *string* | `right` |
| icon-size | Icon size | *number \| string* | `20px` |
| checked-color | Checked color | *string* | `#1989fa` | - |
| bind-group `v2.2.4` | Whether to bind with CheckboxGroup | *boolean* | `true` |
| --- | --- | --- | --- |
| v-model (value) | Check status | _boolean_ | `false` |
| name | Checkbox name | _any_ | - |
| shape | Can be set to `square` | _string_ | `round` |
| disabled | Disable checkbox | _boolean_ | `false` |
| label-disabled | Whether to disable label click | _boolean_ | `false` |
| label-position | Can be set to `left` | _string_ | `right` |
| icon-size | Icon size | _number \| string_ | `20px` |
| checked-color | Checked color | _string_ | `#1989fa` | - |
| bind-group `v2.2.4` | Whether to bind with CheckboxGroup | _boolean_ | `true` |
### CheckboxGroup Props
| 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) |
| 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` | - |
| --- | --- | --- | --- |
| 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) |
| 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` | - |
### Checkbox Events
| Event | Description | Parameters |
|------|------|------|
| change | Triggered when value changed | *checked: boolean* |
| click | Triggered when click checkbox | *event: Event* |
| Event | Description | Parameters |
| ------ | ----------------------------- | ------------------ |
| change | Triggered when value changed | _checked: boolean_ |
| click | Triggered when click checkbox | _event: Event_ |
### CheckboxGroup Events
| Event | Description | Parameters |
|------|------|------|
| change | Triggered when value changed | *names: any[]* |
| Event | Description | Parameters |
| ------ | ---------------------------- | -------------- |
| change | Triggered when value changed | _names: any[]_ |
### Checkbox Slots
| Name | Description | SlotProps |
|------|------|------|
| default | Custom label | - |
| icon | Custom icon | *checked: boolean* |
| Name | Description | SlotProps |
| ------- | ------------ | ------------------ |
| default | Custom label | - |
| icon | Custom icon | _checked: boolean_ |
### CheckboxGroup Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call instance methods
| Name | Description | Attribute | Return value |
|------|------|------|------|
| toggleAll | Toggle check status of all checkboxes | *checked?: boolean* | - |
| --- | --- | --- | --- |
| toggleAll | Toggle check status of all checkboxes | _checked?: boolean_ | - |
### Checkbox Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get Checkbox instance and call instance methods
| Name | Description | Attribute | Return value |
|------|------|------|------|
| toggle | Toggle check status | *checked?: boolean* | - |
| Name | Description | Attribute | Return value |
| ------ | ------------------- | ------------------- | ------------ |
| toggle | Toggle check status | _checked?: boolean_ | - |

View File

@@ -24,9 +24,9 @@ Vue.use(CheckboxGroup);
export default {
data() {
return {
checked: true
checked: true,
};
}
},
};
```
@@ -70,18 +70,14 @@ export default {
<van-checkbox v-model="checked">
自定义图标
<template #icon="props">
<img
class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon"
/>
</template>
<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
</template>
</van-checkbox>
<style>
.img-icon {
height: 20px;
}
.img-icon {
height: 20px;
}
</style>
```
@@ -91,10 +87,10 @@ export default {
return {
checked: true,
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',
};
},
};
```
### 禁用文本点击
@@ -120,9 +116,9 @@ export default {
export default {
data() {
return {
result: ['a', 'b']
result: ['a', 'b'],
};
}
},
};
```
@@ -141,9 +137,9 @@ export default {
export default {
data() {
return {
result: []
result: [],
};
}
},
};
```
@@ -178,8 +174,8 @@ export default {
export default {
data() {
return {
result: []
}
result: [],
};
},
methods: {
checkAll() {
@@ -187,9 +183,9 @@ export default {
},
toggleAll() {
this.$refs.checkboxGroup.toggleAll();
}
}
}
},
},
};
```
### 搭配单元格组件使用
@@ -206,9 +202,9 @@ export default {
:title="`复选框 ${item}`"
@click="toggle(index)"
>
<template #right-icon>
<van-checkbox :name="item" ref="checkboxes" />
</template>
<template #right-icon>
<van-checkbox :name="item" ref="checkboxes" />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
@@ -219,15 +215,15 @@ export default {
data() {
return {
list: ['a', 'b'],
result: []
result: [],
};
},
methods: {
toggle(index) {
this.$refs.checkboxes[index].toggle();
}
}
}
},
},
};
```
## API
@@ -235,60 +231,60 @@ export default {
### Checkbox Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| v-model (value) | 是否为选中状态 | *boolean* | `false` |
| name | 标识符 | *any* | - |
| shape | 形状,可选值为 `square` | *string* | `round` |
| disabled | 是否禁用复选框 | *boolean* | `false` |
| label-disabled | 是否禁用复选框文本点击 | *boolean* | `false` |
| label-position | 文本位置,可选值为 `left` | *string* | `right` |
| icon-size | 图标大小,默认单位为`px` | *number \| string* | `20px` |
| checked-color | 选中状态颜色 | *string* | `#1989fa` |
| bind-group `v2.2.4` | 是否与复选框组绑定 | *boolean* | `true` |
| --- | --- | --- | --- |
| v-model (value) | 是否为选中状态 | _boolean_ | `false` |
| name | 标识符 | _any_ | - |
| shape | 形状,可选值为 `square` | _string_ | `round` |
| disabled | 是否禁用复选框 | _boolean_ | `false` |
| label-disabled | 是否禁用复选框文本点击 | _boolean_ | `false` |
| label-position | 文本位置,可选值为 `left` | _string_ | `right` |
| icon-size | 图标大小,默认单位为`px` | _number \| string_ | `20px` |
| checked-color | 选中状态颜色 | _string_ | `#1989fa` |
| bind-group `v2.2.4` | 是否与复选框组绑定 | _boolean_ | `true` |
### CheckboxGroup Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| v-model (value) | 所有选中项的标识符 | *any[]* | - |
| disabled | 是否禁用所有复选框 | *boolean* | `false` |
| 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` |
| --- | --- | --- | --- |
| v-model (value) | 所有选中项的标识符 | _any[]_ | - |
| disabled | 是否禁用所有复选框 | _boolean_ | `false` |
| 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` |
### Checkbox Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| change | 当绑定值变化时触发的事件 | *checked: boolean* |
| click | 点击复选框时触发 | *event: Event* |
| 事件名 | 说明 | 回调参数 |
| ------ | ------------------------ | ------------------ |
| change | 当绑定值变化时触发的事件 | _checked: boolean_ |
| click | 点击复选框时触发 | _event: Event_ |
### CheckboxGroup Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| change | 当绑定值变化时触发的事件 | *names: any[]* |
| 事件名 | 说明 | 回调参数 |
| ------ | ------------------------ | -------------- |
| change | 当绑定值变化时触发的事件 | _names: any[]_ |
### Checkbox Slots
| 名称 | 说明 | SlotProps |
|------|------|------|
| default | 自定义文本 | - |
| icon | 自定义图标 | *checked: boolean* |
| 名称 | 说明 | SlotProps |
| ------- | ---------- | ------------------ |
| default | 自定义文本 | - |
| icon | 自定义图标 | _checked: boolean_ |
### CheckboxGroup 方法
通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法,详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------|
| toggleAll | 切换所有复选框,传`true`为选中,`false`为取消选中,不传参为取反 | *checked?: boolean* | - |
| --- | --- | --- | --- |
| toggleAll | 切换所有复选框,传`true`为选中,`false`为取消选中,不传参为取反 | _checked?: boolean_ | - |
### Checkbox 方法
通过 ref 可以获取到 Checkbox 实例并调用实例方法,详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------|
| toggle | 切换选中状态,传`true`为选中,`false`为取消选中,不传参为取反 | *checked?: boolean* | - |
| --- | --- | --- | --- |
| toggle | 切换选中状态,传`true`为选中,`false`为取消选中,不传参为取反 | _checked?: boolean_ | - |