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

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

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

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

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

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

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