blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Checkbox): use composition api

Browse Source
This commit is contained in:
chenjiahan 2020-12-06 16:15:36 +08:00
parent 30c0675de9
commit 8875143d1c
4 changed files with 125 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/checkbox/README.md
View File

@ -20,10 +20,13 @@ app.use(CheckboxGroup);
```
```js
import { ref } from 'vue';
export default {
data() {
setup() {
const checked = ref(true);
return {
checked: true,
checked,
};
},
};
@ -73,12 +76,17 @@ Use icon slot to custom icon.
```
```js
import { toRefs, reactive } from 'vue';
export default {
data() {
return {
setup() {
const state = reactive({
checked: true,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
});
return {
...toRefs(state),
};
},
};
@ -95,18 +103,19 @@ export default {
When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
```html
<van-checkbox-group v-model="result">
<van-checkbox-group v-model="checked">
<van-checkbox name="a">Checkbox a</van-checkbox>
<van-checkbox name="b">Checkbox b</van-checkbox>
</van-checkbox-group>
```
```js
import { ref } from 'vue';
export default {
data() {
return {
result: ['a', 'b'],
};
setup() {
const checked = ref(['a', 'b']);
return { checked };
},
};
```
@ -114,18 +123,19 @@ export default {
### Horizontal
```html
<van-checkbox-group v-model="result" direction="horizontal">
<van-checkbox-group v-model="checked" direction="horizontal">
<van-checkbox name="a">Checkbox a</van-checkbox>
<van-checkbox name="b">Checkbox b</van-checkbox>
</van-checkbox-group>
```
```js
import { ref } from 'vue';
export default {
data() {
return {
result: [],
};
setup() {
const checked = ref([]);
return { checked };
},
};
```
@ -143,7 +153,7 @@ export default {
### Toggle All
```html
<van-checkbox-group v-model="result" ref="checkboxGroup">
<van-checkbox-group v-model="checked" ref="checkboxGroup">
<van-checkbox name="a">Checkbox a</van-checkbox>
<van-checkbox name="b">Checkbox b</van-checkbox>
<van-checkbox name="c">Checkbox c</van-checkbox>
@ -154,27 +164,34 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
setup() {
const checked = ref([]);
const checkboxGroup = ref(null);
const checkAll = () => {
checkboxGroup.value.toggleAll(true);
}
const toggleAll = () => {
checkboxGroup.value.toggleAll();
},
return {
result: [],
checked,
checkAll,
toggleAll,
checkboxGroup,
};
},
methods: {
checkAll() {
this.$refs.checkboxGroup.toggleAll(true);
},
toggleAll() {
this.$refs.checkboxGroup.toggleAll();
},
},
};
```
### Inside a Cell
```html
<van-checkbox-group v-model="result">
<van-checkbox-group v-model="checked">
<van-cell-group>
<van-cell
v-for="(item, index) in list"
@ -186,7 +203,7 @@ export default {
<template #right-icon>
<van-checkbox
:name="item"
:ref="el => checkboxes[index] = el"
:ref="el => checkboxRefs[index] = el"
@click.stop
/>
</template>
@ -200,21 +217,21 @@ import { ref, onBeforeUpdate } from 'vue';
export default {
setup() {
const result = ref([]);
const checkboxes = ref([]);
const checked = ref([]);
const checkboxRefs = ref([]);
const toggle = (index) => {
checkboxes.value[index].toggle();
checkboxRefs.value[index].toggle();
};
onBeforeUpdate(() => {
checkboxes.value = [];
checkboxRefs.value = [];
});
return {
list: ['a', 'b'],
result,
toggle,
checkboxes,
checked,
checkboxRefs,
};
},
};

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

@ -26,11 +26,12 @@ app.use(CheckboxGroup);
```
```js
import { ref } from 'vue';
export default {
data() {
return {
checked: true,
};
setup() {
const checked = ref(true);
return { checked };
},
};
```
@ -87,12 +88,17 @@ export default {
```
```js
import { toRefs, reactive } from 'vue';
export default {
data() {
return {
setup() {
const state = reactive({
checked: true,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
});
return {
...toRefs(state),
};
},
};
@ -111,18 +117,19 @@ export default {
复选框可以与复选框组一起使用，复选框组通过 `v-model` 数组绑定复选框的勾选状态。
```html
<van-checkbox-group v-model="result">
<van-checkbox-group v-model="checked">
<van-checkbox name="a">复选框 a</van-checkbox>
<van-checkbox name="b">复选框 b</van-checkbox>
</van-checkbox-group>
```
```js
import { ref } from 'vue';
export default {
data() {
return {
result: ['a', 'b'],
};
setup() {
const checked = ref(['a', 'b']);
return { checked };
},
};
```
@ -132,18 +139,19 @@ export default {
将 `direction` 属性设置为 `horizontal` 后，复选框组会变成水平排列。
```html
<van-checkbox-group v-model="result" direction="horizontal">
<van-checkbox-group v-model="checked" direction="horizontal">
<van-checkbox name="a">复选框 a</van-checkbox>
<van-checkbox name="b">复选框 b</van-checkbox>
</van-checkbox-group>
```
```js
import { ref } from 'vue';
export default {
data() {
return {
result: [],
};
setup() {
const checked = ref([]);
return { checked };
},
};
```
@ -176,20 +184,27 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
setup() {
const checked = ref([]);
const checkboxGroup = ref(null);
const checkAll = () => {
checkboxGroup.value.toggleAll(true);
}
const toggleAll = () => {
checkboxGroup.value.toggleAll();
},
return {
result: [],
checked,
checkAll,
toggleAll,
checkboxGroup,
};
},
methods: {
checkAll() {
this.$refs.checkboxGroup.toggleAll(true);
},
toggleAll() {
this.$refs.checkboxGroup.toggleAll();
},
},
};
```
@ -198,7 +213,7 @@ export default {
此时你需要再引入 `Cell` 和 `CellGroup` 组件，并通过 `Checkbox` 实例上的 toggle 方法触发切换。
```html
<van-checkbox-group v-model="result">
<van-checkbox-group v-model="checked">
<van-cell-group>
<van-cell
v-for="(item, index) in list"
@ -210,7 +225,7 @@ export default {
<template #right-icon>
<van-checkbox
:name="item"
:ref="el => checkboxes[index] = el"
:ref="el => checkboxRefs[index] = el"
@click.stop
/>
</template>
@ -224,21 +239,21 @@ import { ref, onBeforeUpdate } from 'vue';
export default {
setup() {
const result = ref([]);
const checkboxes = ref([]);
const checked = ref([]);
const checkboxRefs = ref([]);
const toggle = (index) => {
checkboxes.value[index].toggle();
checkboxRefs.value[index].toggle();
};
onBeforeUpdate(() => {
checkboxes.value = [];
checkboxRefs.value = [];
});
return {
list: ['a', 'b'],
result,
toggle,
checkboxes,
checked,
checkboxRefs,
};
},
};

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

@ -104,7 +104,7 @@
</template>
<script>
import { ref } from 'vue';
import { ref, reactive, toRefs } from 'vue';
import { useRefs } from '../../composables/use-refs';
export default {
@ -142,6 +142,23 @@ export default {
},
setup() {
const state = reactive({
checkbox1: true,
checkbox2: true,
checkbox3: true,
checkboxShape: true,
checkboxLabel: true,
checboxIcon: true,
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',
});
const group = ref();
const [refs, setRefs] = useRefs();
@ -158,6 +175,7 @@ export default {
};
return {
...toRefs(state),
group,
toggle,
setRefs,
@ -165,25 +183,6 @@ export default {
toggleAll,
};
},
data() {
return {
checkbox1: true,
checkbox2: true,
checkbox3: true,
checkboxShape: true,
checkboxLabel: true,
checboxIcon: true,
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',
};
},
};
</script>

10
src/popup/demo/index.vue
View File

@ -94,6 +94,8 @@
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
i18n: {
'zh-CN': {
@ -124,8 +126,8 @@ export default {
},
},
data() {
return {
setup() {
const state = reactive({
showBasic: false,
showTop: false,
showBottom: false,
@ -136,7 +138,9 @@ export default {
showGetContainer: false,
showCustomCloseIcon: false,
showCustomIconPosition: false,
};
});
return toRefs(state);
},
};
</script>