From 065caff468c15244638b85400047b6b1a204739d Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sun, 12 Mar 2023 21:23:38 +0800
Subject: [PATCH] docs(Cascader): improve async loading demo (#11666)

---
 packages/vant/src/cascader/README.md       | 11 +++++++++--
 packages/vant/src/cascader/README.zh-CN.md | 11 +++++++++--
 packages/vant/src/cascader/demo/index.vue  |  7 +++++--
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/vant/src/cascader/README.md b/packages/vant/src/cascader/README.md
index 3edf4c5cf..de5a25db6 100644
--- a/packages/vant/src/cascader/README.md
+++ b/packages/vant/src/cascader/README.md
@@ -114,6 +114,7 @@ export default {
 
 ```js
 import { ref } from 'vue';
+import { closeToast, showLoadingToast } from 'vant';
 
 export default {
   setup() {
@@ -128,13 +129,19 @@ export default {
       },
     ]);
     const onChange = ({ value }) => {
-      if (value === options.value[0].value) {
+      if (
+        value === options.value[0].value &&
+        options.value[0].children.length === 0
+      ) {
+        showLoadingToast('Loading...');
+        // mock data request
         setTimeout(() => {
           options.value[0].children = [
             { text: 'Hangzhou', value: '330100' },
             { text: 'Ningbo', value: '330200' },
           ];
-        }, 500);
+          closeToast();
+        }, 1000);
       }
     };
     const onFinish = ({ selectedOptions }) => {
diff --git a/packages/vant/src/cascader/README.zh-CN.md b/packages/vant/src/cascader/README.zh-CN.md
index 695c819f0..0f5867d1f 100644
--- a/packages/vant/src/cascader/README.zh-CN.md
+++ b/packages/vant/src/cascader/README.zh-CN.md
@@ -184,6 +184,7 @@ export default {
 
 ```js
 import { ref } from 'vue';
+import { closeToast, showLoadingToast } from 'vant';
 
 export default {
   setup() {
@@ -198,13 +199,19 @@ export default {
       },
     ]);
     const onChange = ({ value }) => {
-      if (value === options.value[0].value) {
+      if (
+        value === options.value[0].value &&
+        options.value[0].children.length === 0
+      ) {
+        // 模拟数据请求
+        showLoadingToast('加载中...');
         setTimeout(() => {
           options.value[0].children = [
             { text: '杭州市', value: '330100' },
             { text: '宁波市', value: '330200' },
           ];
-        }, 500);
+          closeToast();
+        }, 1000);
       }
     };
     const onFinish = ({ selectedOptions }) => {
diff --git a/packages/vant/src/cascader/demo/index.vue b/packages/vant/src/cascader/demo/index.vue
index a8ba98eac..0adf9ef98 100644
--- a/packages/vant/src/cascader/demo/index.vue
+++ b/packages/vant/src/cascader/demo/index.vue
@@ -9,6 +9,7 @@ import zhCNOptions from './area-zh-CN';
 import enUSOptions from './area-en-US';
 import { useCurrentLang } from '../../locale';
 import { useCascaderAreaData } from '@vant/area-data';
+import { closeToast, showLoadingToast } from '../../toast';
 import type { Numeric } from '../../utils';
 
 const lang = useCurrentLang();
@@ -131,10 +132,12 @@ const customFieldOptions = computed(() => {
 });
 
 const loadDynamicOptions = ({ value }: CascaderOption) => {
-  if (value === '330000') {
+  if (value === '330000' && asyncState.options![0].children?.length === 0) {
+    showLoadingToast(t('loading'));
     setTimeout(() => {
       asyncState.options![0].children = t('asyncOptions2');
-    }, 500);
+      closeToast();
+    }, 1000);
   }
 };