mirror of
https://github.com/youzan/vant.git
synced 2025-10-22 03:44:48 +00:00
docs: prettier all markdown files
This commit is contained in:
@@ -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_ | - |
|
||||
|
@@ -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_ | - |
|
||||
|
Reference in New Issue
Block a user