alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: demo using script setup (#9235)

Browse Source
This commit is contained in:
neverland
2021-08-11 10:55:10 +08:00
committed by GitHub
parent 010238b63c
commit 4c41908ac1
86 changed files with 4277 additions and 5151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/cascader/demo/index.vue
+175 -188
View File
@@ -1,106 +1,5 @@
<template>
<demo-block card :title="t('basicUsage')">
<van-field
v-model="base.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="base.show = true"
/>
<van-popup v-model:show="base.show" round teleport="body" position="bottom">
<van-cascader
v-model="base.value"
:title="t('selectArea')"
:options="t('options')"
@close="base.show = false"
@finish="onFinish('base', $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('customColor')">
<van-field
v-model="customColor.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="customColor.show = true"
/>
<van-popup
v-model:show="customColor.show"
round
teleport="body"
position="bottom"
>
<van-cascader
v-model="customColor.value"
:title="t('selectArea')"
:options="t('options')"
active-color="#1989fa"
@close="customColor.show = false"
@finish="onFinish('customColor', $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('asyncOptions')">
<van-field
v-model="async.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="async.show = true"
/>
<van-popup
v-model:show="async.show"
round
teleport="body"
position="bottom"
>
<van-cascader
v-model="async.value"
:title="t('selectArea')"
:options="async.options"
@close="async.show = false"
@change="loadDynamicOptions"
@finish="onFinish('async', $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('customFieldNames')">
<van-field
v-model="customFieldNames.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="customFieldNames.show = true"
/>
<van-popup
v-model:show="customFieldNames.show"
round
teleport="body"
position="bottom"
safe-area-inset-bottom
>
<van-cascader
v-model="customFieldNames.value"
:title="t('selectArea')"
:options="customFieldOptions"
:field-names="fieldNames"
@close="customFieldNames.show = false"
@finish="onFinish('customFieldNames', $event)"
/>
</van-popup>
</demo-block>
</template>
<script lang="ts">
import { computed, reactive, toRefs } from 'vue';
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { CascaderOption } from '..';
import { useTranslate } from '@demo/use-translate';
import { deepClone } from '../../utils/deep-clone';
@@ -155,95 +54,183 @@ type StateItem = {
options?: CascaderOption[];
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive<Record<string, StateItem>>({
base: {
show: false,
value: '',
result: '',
},
customColor: {
show: false,
value: null,
result: '',
},
async: {
show: false,
value: null,
result: '',
options: t('asyncOptions1'),
},
customFieldNames: {
show: false,
value: null,
result: '',
},
});
const t = useTranslate(i18n);
const baseState = reactive<StateItem>({
show: false,
value: '',
result: '',
});
const customColorState = reactive<StateItem>({
show: false,
value: null,
result: '',
});
const asyncState = reactive<StateItem>({
show: false,
value: null,
result: '',
options: t('asyncOptions1'),
});
const customFieldState = reactive<StateItem>({
show: false,
value: null,
result: '',
});
const fieldNames = {
text: 'name',
value: 'code',
children: 'items',
};
const fieldNames = {
text: 'name',
value: 'code',
children: 'items',
};
const customFieldOptions = computed(() => {
const options = deepClone(t('options'));
const adjustFieldName = (item: CascaderOption) => {
if ('text' in item) {
item.name = item.text;
delete item.text;
}
if ('value' in item) {
item.code = item.value;
delete item.value;
}
if ('children' in item) {
item.items = item.children;
delete item.children;
item.items.forEach(adjustFieldName);
}
};
options.forEach(adjustFieldName);
return options;
});
const customFieldOptions = computed(() => {
const options = deepClone(t('options'));
const adjustFieldName = (item: CascaderOption) => {
if ('text' in item) {
item.name = item.text;
delete item.text;
}
if ('value' in item) {
item.code = item.value;
delete item.value;
}
if ('children' in item) {
item.items = item.children;
delete item.children;
item.items.forEach(adjustFieldName);
}
};
options.forEach(adjustFieldName);
return options;
});
const loadDynamicOptions = ({ value }: CascaderOption) => {
if (value === '330000') {
setTimeout(() => {
state.async.options![0].children = t('asyncOptions2');
}, 500);
}
};
const loadDynamicOptions = ({ value }: CascaderOption) => {
if (value === '330000') {
setTimeout(() => {
asyncState.options![0].children = t('asyncOptions2');
}, 500);
}
};
const onFinish = (
type: string,
{
value,
selectedOptions,
}: { value: number | string; selectedOptions: CascaderOption[] }
) => {
const result = selectedOptions
.map((option) => option.text || option.name)
.join('/');
const onFinish = (
state: StateItem,
{
value,
selectedOptions,
}: { value: number | string; selectedOptions: CascaderOption[] }
) => {
const result = selectedOptions
.map((option) => option.text || option.name)
.join('/');
state[type] = {
...state[type],
show: false,
value,
result,
};
};
return {
...toRefs(state),
t,
onFinish,
fieldNames,
customFieldOptions,
loadDynamicOptions,
};
},
state.show = false;
state.value = value;
state.result = result;
};
</script>
<template>
<demo-block card :title="t('basicUsage')">
<van-field
v-model="baseState.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="baseState.show = true"
/>
<van-popup
v-model:show="baseState.show"
round
teleport="body"
position="bottom"
>
<van-cascader
v-model="baseState.value"
:title="t('selectArea')"
:options="t('options')"
@close="baseState.show = false"
@finish="onFinish(baseState, $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('customColor')">
<van-field
v-model="customColorState.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="customColorState.show = true"
/>
<van-popup
v-model:show="customColorState.show"
round
teleport="body"
position="bottom"
>
<van-cascader
v-model="customColorState.value"
:title="t('selectArea')"
:options="t('options')"
active-color="#1989fa"
@close="customColorState.show = false"
@finish="onFinish(customColorState, $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('asyncOptions')">
<van-field
v-model="asyncState.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="asyncState.show = true"
/>
<van-popup
v-model:show="asyncState.show"
round
teleport="body"
position="bottom"
>
<van-cascader
v-model="asyncState.value"
:title="t('selectArea')"
:options="asyncState.options"
@close="asyncState.show = false"
@change="loadDynamicOptions"
@finish="onFinish(asyncState, $event)"
/>
</van-popup>
</demo-block>
<demo-block card :title="t('customFieldNames')">
<van-field
v-model="customFieldState.result"
is-link
readonly
:label="t('area')"
:placeholder="t('selectArea')"
@click="customFieldState.show = true"
/>
<van-popup
v-model:show="customFieldState.show"
round
teleport="body"
position="bottom"
safe-area-inset-bottom
>
<van-cascader
v-model="customFieldState.value"
:title="t('selectArea')"
:options="customFieldOptions"
:field-names="fieldNames"
@close="customFieldState.show = false"
@finish="onFinish(customFieldState, $event)"
/>
</van-popup>
</demo-block>
</template>