blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-07 21:19:45 +08:00
Code Issues Projects Releases Wiki Activity

docs(Cascader): improve async loading demo (#11666)

Browse Source
This commit is contained in:
neverland 2023-03-12 21:23:38 +08:00 committed by GitHub
parent bb64d6eedb
commit 065caff468
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/vant/src/cascader/README.md
View File

@ -114,6 +114,7 @@ export default {
```js ```js
import { ref } from 'vue'; import { ref } from 'vue';
import { closeToast, showLoadingToast } from 'vant';
export default { export default {
setup() { setup() {
@ -128,13 +129,19 @@ export default {
}, },
]); ]);
const onChange = ({ value }) => { 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(() => { setTimeout(() => {
options.value[0].children = [ options.value[0].children = [
{ text: 'Hangzhou', value: '330100' }, { text: 'Hangzhou', value: '330100' },
{ text: 'Ningbo', value: '330200' }, { text: 'Ningbo', value: '330200' },
]; ];
}, 500); closeToast();
}, 1000);
} }
}; };
const onFinish = ({ selectedOptions }) => { const onFinish = ({ selectedOptions }) => {

11
packages/vant/src/cascader/README.zh-CN.md
View File

@ -184,6 +184,7 @@ export default {
```js ```js
import { ref } from 'vue'; import { ref } from 'vue';
import { closeToast, showLoadingToast } from 'vant';
export default { export default {
setup() { setup() {
@ -198,13 +199,19 @@ export default {
}, },
]); ]);
const onChange = ({ value }) => { const onChange = ({ value }) => {
if (value === options.value[0].value) { if (
value === options.value[0].value &&
options.value[0].children.length === 0
) {
// 模拟数据请求
showLoadingToast('加载中...');
setTimeout(() => { setTimeout(() => {
options.value[0].children = [ options.value[0].children = [
{ text: '杭州市', value: '330100' }, { text: '杭州市', value: '330100' },
{ text: '宁波市', value: '330200' }, { text: '宁波市', value: '330200' },
]; ];
}, 500); closeToast();
}, 1000);
} }
}; };
const onFinish = ({ selectedOptions }) => { const onFinish = ({ selectedOptions }) => {

7
packages/vant/src/cascader/demo/index.vue
View File

@ -9,6 +9,7 @@ import zhCNOptions from './area-zh-CN';
import enUSOptions from './area-en-US'; import enUSOptions from './area-en-US';
import { useCurrentLang } from '../../locale'; import { useCurrentLang } from '../../locale';
import { useCascaderAreaData } from '@vant/area-data'; import { useCascaderAreaData } from '@vant/area-data';
import { closeToast, showLoadingToast } from '../../toast';
import type { Numeric } from '../../utils'; import type { Numeric } from '../../utils';
const lang = useCurrentLang(); const lang = useCurrentLang();
@ -131,10 +132,12 @@ const customFieldOptions = computed(() => {
}); });
const loadDynamicOptions = ({ value }: CascaderOption) => { const loadDynamicOptions = ({ value }: CascaderOption) => {
if (value === '330000') { if (value === '330000' && asyncState.options![0].children?.length === 0) {
showLoadingToast(t('loading'));
setTimeout(() => { setTimeout(() => {
asyncState.options![0].children = t('asyncOptions2'); asyncState.options![0].children = t('asyncOptions2');
}, 500); closeToast();
}, 1000);
} }
}; };