mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Improvement] Checkbox: with cell (#1430)
This commit is contained in:
neverland
GitHub
parent
33cd446581
commit
a5628c2dd2
@ -46,9 +46,15 @@
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-checkbox-group v-model="result3">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :title="$t('checkbox') + item" :key="index">
|
||||
<van-checkbox :name="item" />
|
||||
<van-cell-group >
|
||||
<van-cell
|
||||
v-for="(item, index) in list"
|
||||
clickable
|
||||
:key="index"
|
||||
:title="$t('checkbox') + item"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<van-checkbox ref="checkboxes" :name="item" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
@ -92,6 +98,12 @@ export default {
|
||||
active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle(index) {
|
||||
this.$refs.checkboxes[index].toggle();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -102,13 +102,30 @@ export default {
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="item in list" :title="`Checkbox ${item}`" :key="item">
|
||||
<van-checkbox :name="item" />
|
||||
<van-cell
|
||||
v-for="item in list"
|
||||
clickable
|
||||
:key="item"
|
||||
:title="`Checkbox ${item}`"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<van-checkbox :name="item" ref="checkboxes" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
toggle(index) {
|
||||
this.$refs.checkboxes[index].toggle();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Checkbox API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
@ -146,3 +163,11 @@ export default {
|
||||
|-----------|-----------|-----------|
|
||||
| default | Custom label | - |
|
||||
| icon | Custom icon | checked: whether to be checked |
|
||||
|
||||
### Checkbox Methods
|
||||
|
||||
Use ref to get checkbox instance and call instance methods
|
||||
|
||||
| Name | Attribute | Return value | Description |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| toggle | - | - | Toggle check status |
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div :class="b()">
|
||||
<div :class="[b('icon', [shape, { disabled: isDisabled, checked }])]" @click="onClick">
|
||||
<div :class="[b('icon', [shape, { disabled: isDisabled, checked }])]" @click="toggle">
|
||||
<slot name="icon" :checked="checked">
|
||||
<icon name="success" />
|
||||
</slot>
|
||||
</div>
|
||||
<span v-if="$slots.default" :class="b('label', labelPosition)" @click="onClick('label')">
|
||||
<span v-if="$slots.default" :class="b('label', labelPosition)" @click="toggle('label')">
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
@ -86,7 +86,7 @@ export default create({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(target) {
|
||||
toggle(target) {
|
||||
if (!this.isDisabled && !(target === 'label' && this.labelDisabled)) {
|
||||
this.checked = !this.checked;
|
||||
}
|
||||
|
||||
@ -91,7 +91,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-checkbox-group">
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-hairline">
|
||||
<div class="van-cell van-cell--clickable van-hairline">
|
||||
<!---->
|
||||
<div class="van-cell__title"><span>复选框a</span>
|
||||
<!---->
|
||||
@ -108,7 +108,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell van-hairline">
|
||||
<div class="van-cell van-cell--clickable van-hairline">
|
||||
<!---->
|
||||
<div class="van-cell__title"><span>复选框b</span>
|
||||
<!---->
|
||||
@ -125,7 +125,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell van-hairline">
|
||||
<div class="van-cell van-cell--clickable van-hairline">
|
||||
<!---->
|
||||
<div class="van-cell__title"><span>复选框c</span>
|
||||
<!---->
|
||||
|
||||
@ -101,18 +101,34 @@ export default {
|
||||
|
||||
#### 与 Cell 组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件
|
||||
此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="item in list" :title="`复选框 ${item}`" :key="item">
|
||||
<van-checkbox :name="item" />
|
||||
<van-cell
|
||||
v-for="item in list"
|
||||
clickable
|
||||
:key="item"
|
||||
:title="`复选框 ${item}`"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<van-checkbox :name="item" ref="checkboxes" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
toggle(index) {
|
||||
this.$refs.checkboxes[index].toggle();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Checkbox API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
@ -150,3 +166,11 @@ export default {
|
||||
|-----------|-----------|-----------|
|
||||
| default | 自定义文本 | - |
|
||||
| icon | 自定义图标 | checked: 是否为选中状态 |
|
||||
|
||||
### Checkbox 方法
|
||||
|
||||
通过 ref 可以获取到 checkbox 实例并调用实例方法
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| toggle | - | - | 切换选中状态 |
|
||||
|
||||
@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tab__pane">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
@ -37,7 +37,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tab__pane">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
@ -80,7 +80,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tab__pane">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
@ -107,7 +107,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tab__pane">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
@ -134,7 +134,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tab__pane">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
@ -161,7 +161,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tab__pane">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
@ -188,7 +188,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tab__pane">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<div>
|
||||
<div>
|
||||
@ -219,7 +219,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tab__pane">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user