docs(Checkbox): use composition api

src/checkbox/README.md

@@ -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,
     };
   },
 };