From 4d6b1d28757ca6c81309d60eac5b7b2ea91fbf7b Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Mon, 21 Dec 2020 22:32:17 +0800
Subject: [PATCH] docs(Cascader): use composition api

---
 src/cascader/README.md       | 105 ++++++++++++++++++---------------
 src/cascader/README.zh-CN.md | 109 ++++++++++++++++++++---------------
 2 files changed, 122 insertions(+), 92 deletions(-)

diff --git a/src/cascader/README.md b/src/cascader/README.md
index f9ae42c0a..55ed09ef3 100644
--- a/src/cascader/README.md
+++ b/src/cascader/README.md
@@ -16,49 +16,56 @@ app.use(Cascader);
 
 ```html
 <van-field
-  v-model="fieldValue"
+  v-model="state.fieldValue"
   is-link
   readonly
   label="Area"
   placeholder="Select Area"
-  @click="show = true"
+  @click="state.show = true"
 />
-<van-popup v-model="show" round position="bottom">
+<van-popup v-model="state.show" round position="bottom">
   <van-cascader
-    v-model="cascaderValue"
+    v-model="state.cascaderValue"
     title="Select Area"
-    @close="show = false"
+    :options="options"
+    @close="state.show = false"
     @finish="onFinish"
   />
 </van-popup>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       show: false,
       fieldValue: '',
       cascaderValue: '',
-      options: [
-        {
-          text: 'Zhejiang',
-          value: '330000',
-          children: [{ text: 'Hangzhou', value: '330100' }],
-        },
-        {
-          text: 'Jiangsu',
-          value: '320000',
-          children: [{ text: 'Nanjing', value: '320100' }],
-        },
-      ],
+    });
+    const options = [
+      {
+        text: 'Zhejiang',
+        value: '330000',
+        children: [{ text: 'Hangzhou', value: '330100' }],
+      },
+      {
+        text: 'Jiangsu',
+        value: '320000',
+        children: [{ text: 'Nanjing', value: '320100' }],
+      },
+    ];
+    const onFinish = ({ selectedOptions }) => {
+      state.show = false;
+      state.fieldValue = selectedOptions.map((option) => option.text).join('/');
+    };
+
+    return {
+      state,
+      options,
+      onFinish,
     };
-  },
-  methods: {
-    onFinish({ selectedOptions }) {
-      this.show = false;
-      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
-    },
   },
 };
 ```
@@ -67,10 +74,11 @@ export default {
 
 ```html
 <van-cascader
-  v-model="cascaderValue"
+  v-model="state.cascaderValue"
   title="Select Area"
+  :options="options"
   active-color="#1989fa"
-  @close="show = false"
+  @close="state.show = false"
   @finish="onFinish"
 />
 ```
@@ -79,18 +87,19 @@ export default {
 
 ```html
 <van-field
-  v-model="fieldValue"
+  v-model="state.fieldValue"
   is-link
   readonly
   label="Area"
   placeholder="Select Area"
-  @click="show = true"
+  @click="state.show = true"
 />
-<van-popup v-model="show" round position="bottom">
+<van-popup v-model="state.show" round position="bottom">
   <van-cascader
-    v-model="cascaderValue"
+    v-model="state.cascaderValue"
     title="Select Area"
-    @close="show = false"
+    :options="state.options"
+    @close="state.show = false"
     @change="onChange"
     @finish="onFinish"
   />
@@ -98,9 +107,11 @@ export default {
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       show: false,
       fieldValue: '',
       cascaderValue: '',
@@ -111,23 +122,27 @@ export default {
           children: [],
         },
       ],
-    };
-  },
-  methods: {
-    onChange({ value }) {
-      if (value === this.options[0].value) {
+    });
+    const onChange = ({ value }) => {
+      if (value === state.options[0].value) {
         setTimeout(() => {
-          this.options[0].children = [
+          state.options[0].children = [
             { text: 'Hangzhou', value: '330100' },
             { text: 'Ningbo', value: '330200' },
           ];
         }, 500);
       }
-    },
-    onFinish({ selectedOptions }) {
-      this.show = false;
-      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
-    },
+    };
+    const onFinish = ({ selectedOptions }) => {
+      state.show = false;
+      state.fieldValue = selectedOptions.map((option) => option.text).join('/');
+    };
+
+    return {
+      state,
+      onChange,
+      onFinish,
+    };
   },
 };
 ```
diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md
index 9dcd2b3a1..4433e49dd 100644
--- a/src/cascader/README.zh-CN.md
+++ b/src/cascader/README.zh-CN.md
@@ -22,51 +22,58 @@ app.use(Cascader);
 
 ```html
 <van-field
-  v-model="fieldValue"
+  v-model="state.fieldValue"
   is-link
   readonly
   label="地区"
   placeholder="请选择所在地区"
-  @click="show = true"
+  @click="state.show = true"
 />
-<van-popup v-model:show="show" round position="bottom">
+<van-popup v-model:show="state.show" round position="bottom">
   <van-cascader
-    v-model="cascaderValue"
+    v-model="state.cascaderValue"
     title="请选择所在地区"
-    @close="show = false"
+    :options="options"
+    @close="state.show = false"
     @finish="onFinish"
   />
 </van-popup>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       show: false,
       fieldValue: '',
       cascaderValue: '',
-      // 选项列表，children 代表子选项，支持多级嵌套
-      options: [
-        {
-          text: '浙江省',
-          value: '330000',
-          children: [{ text: '杭州市', value: '330100' }],
-        },
-        {
-          text: '江苏省',
-          value: '320000',
-          children: [{ text: '南京市', value: '320100' }],
-        },
-      ],
-    };
-  },
-  methods: {
+    });
+    // 选项列表，children 代表子选项，支持多级嵌套
+    const options = [
+      {
+        text: '浙江省',
+        value: '330000',
+        children: [{ text: '杭州市', value: '330100' }],
+      },
+      {
+        text: '江苏省',
+        value: '320000',
+        children: [{ text: '南京市', value: '320100' }],
+      },
+    ];
     // 全部选项选择完毕后，会触发 finish 事件
-    onFinish({ selectedOptions }) {
-      this.show = false;
-      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
-    },
+    const onFinish = ({ selectedOptions }) => {
+      state.show = false;
+      state.fieldValue = selectedOptions.map((option) => option.text).join('/');
+    };
+
+    return {
+      state,
+      options,
+      onFinish,
+    };
   },
 };
 ```
@@ -77,10 +84,11 @@ export default {
 
 ```html
 <van-cascader
-  v-model="cascaderValue"
+  v-model="state.cascaderValue"
   title="请选择所在地区"
+  :options="options"
   active-color="#1989fa"
-  @close="show = false"
+  @close="state.show = false"
   @finish="onFinish"
 />
 ```
@@ -91,18 +99,19 @@ export default {
 
 ```html
 <van-field
-  v-model="fieldValue"
+  v-model="state.fieldValue"
   is-link
   readonly
   label="地区"
   placeholder="请选择所在地区"
-  @click="show = true"
+  @click="state.show = true"
 />
-<van-popup v-model:show="show" round position="bottom">
+<van-popup v-model:show="state.show" round position="bottom">
   <van-cascader
-    v-model="cascaderValue"
+    v-model="state.cascaderValue"
     title="请选择所在地区"
-    @close="show = false"
+    :options="state.options"
+    @close="state.show = false"
     @change="onChange"
     @finish="onFinish"
   />
@@ -110,9 +119,11 @@ export default {
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       show: false,
       fieldValue: '',
       cascaderValue: '',
@@ -123,23 +134,27 @@ export default {
           children: [],
         },
       ],
-    };
-  },
-  methods: {
-    onChange({ value }) {
-      if (value === this.options[0].value) {
+    });
+    const onChange = ({ value }) => {
+      if (value === state.options[0].value) {
         setTimeout(() => {
-          this.options[0].children = [
+          state.options[0].children = [
             { text: '杭州市', value: '330100' },
             { text: '宁波市', value: '330200' },
           ];
         }, 500);
       }
-    },
-    onFinish({ selectedOptions }) {
-      this.show = false;
-      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
-    },
+    };
+    const onFinish = ({ selectedOptions }) => {
+      state.show = false;
+      state.fieldValue = selectedOptions.map((option) => option.text).join('/');
+    };
+
+    return {
+      state,
+      onChange,
+      onFinish,
+    };
   },
 };
 ```