refactor: demo using script setup (#9235)
This commit is contained in:
neverland
+124
-144
@@ -1,3 +1,127 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { dateColumns, cascadeColumns, cascadeColumnsCustomKey } from './data';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { Toast } from '../../toast';
|
||||
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
city: '城市',
|
||||
cascade: '级联选择',
|
||||
withPopup: '搭配弹出层使用',
|
||||
chooseCity: '选择城市',
|
||||
showToolbar: '展示顶部栏',
|
||||
dateColumns: dateColumns['zh-CN'],
|
||||
defaultIndex: '默认选中项',
|
||||
disableOption: '禁用选项',
|
||||
cascadeColumns: cascadeColumns['zh-CN'],
|
||||
multipleColumns: '多列选择',
|
||||
setColumnValues: '动态设置选项',
|
||||
customChildrenKey: '自定义 Columns 结构',
|
||||
customChildrenColumns: cascadeColumnsCustomKey['zh-CN'],
|
||||
textColumns: [
|
||||
'杭州',
|
||||
'宁波',
|
||||
'温州',
|
||||
'绍兴',
|
||||
'湖州',
|
||||
'嘉兴',
|
||||
'金华',
|
||||
'衢州',
|
||||
],
|
||||
disabledColumns: [
|
||||
{ text: '杭州', disabled: true },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州' },
|
||||
],
|
||||
column3: {
|
||||
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
|
||||
},
|
||||
toastContent: (value: string, index: number) =>
|
||||
`当前值：${value}, 当前索引：${index}`,
|
||||
},
|
||||
'en-US': {
|
||||
city: 'City',
|
||||
cascade: 'Cascade',
|
||||
withPopup: 'With Popup',
|
||||
chooseCity: 'Choose City',
|
||||
showToolbar: 'Show Toolbar',
|
||||
dateColumns: dateColumns['en-US'],
|
||||
defaultIndex: 'Default Index',
|
||||
disableOption: 'Disable Option',
|
||||
cascadeColumns: cascadeColumns['en-US'],
|
||||
multipleColumns: 'Multiple Columns',
|
||||
setColumnValues: 'Set Column Values',
|
||||
customChildrenKey: 'Custom Columns Fields',
|
||||
customChildrenColumns: cascadeColumnsCustomKey['en-US'],
|
||||
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
disabledColumns: [
|
||||
{ text: 'Delaware', disabled: true },
|
||||
{ text: 'Florida' },
|
||||
{ text: 'Georqia' },
|
||||
],
|
||||
column3: {
|
||||
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
|
||||
},
|
||||
toastContent: (value: string, index: number) =>
|
||||
`Value: ${value}, Index：${index}`,
|
||||
},
|
||||
};
|
||||
|
||||
const t = useTranslate(i18n);
|
||||
const picker = ref();
|
||||
const showPicker = ref(false);
|
||||
const fieldValue = ref('');
|
||||
const customFieldName = ref({
|
||||
text: 'cityName',
|
||||
children: 'cities',
|
||||
});
|
||||
|
||||
const columns = computed(() => {
|
||||
const column = t('column3');
|
||||
return [
|
||||
{
|
||||
values: Object.keys(column),
|
||||
className: 'column1',
|
||||
},
|
||||
{
|
||||
values: column[Object.keys(column)[0]],
|
||||
className: 'column2',
|
||||
defaultIndex: 2,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const onChange1 = (value: string, index: number) => {
|
||||
Toast(t('toastContent', value, index));
|
||||
};
|
||||
|
||||
const onChange2 = (values: string[]) => {
|
||||
picker.value.setColumnValues(1, t('column3')[values[0]]);
|
||||
};
|
||||
|
||||
const onConfirm = (value: string, index: number) => {
|
||||
Toast(t('toastContent', value, index));
|
||||
};
|
||||
|
||||
const onCancel = () => Toast(t('cancel'));
|
||||
|
||||
const onCancel2 = () => {
|
||||
showPicker.value = false;
|
||||
};
|
||||
|
||||
const onClickField = () => {
|
||||
showPicker.value = true;
|
||||
};
|
||||
|
||||
const onConfirm2 = (value: string) => {
|
||||
showPicker.value = false;
|
||||
fieldValue.value = value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-picker
|
||||
@@ -72,147 +196,3 @@
|
||||
/>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, computed, reactive, toRefs } from 'vue';
|
||||
import { dateColumns, cascadeColumns, cascadeColumnsCustomKey } from './data';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { Toast } from '../../toast';
|
||||
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
city: '城市',
|
||||
cascade: '级联选择',
|
||||
withPopup: '搭配弹出层使用',
|
||||
chooseCity: '选择城市',
|
||||
showToolbar: '展示顶部栏',
|
||||
dateColumns: dateColumns['zh-CN'],
|
||||
defaultIndex: '默认选中项',
|
||||
disableOption: '禁用选项',
|
||||
cascadeColumns: cascadeColumns['zh-CN'],
|
||||
multipleColumns: '多列选择',
|
||||
setColumnValues: '动态设置选项',
|
||||
customChildrenKey: '自定义 Columns 结构',
|
||||
customChildrenColumns: cascadeColumnsCustomKey['zh-CN'],
|
||||
textColumns: [
|
||||
'杭州',
|
||||
'宁波',
|
||||
'温州',
|
||||
'绍兴',
|
||||
'湖州',
|
||||
'嘉兴',
|
||||
'金华',
|
||||
'衢州',
|
||||
],
|
||||
disabledColumns: [
|
||||
{ text: '杭州', disabled: true },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州' },
|
||||
],
|
||||
column3: {
|
||||
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
|
||||
},
|
||||
toastContent: (value: string, index: number) =>
|
||||
`当前值：${value}, 当前索引：${index}`,
|
||||
},
|
||||
'en-US': {
|
||||
city: 'City',
|
||||
cascade: 'Cascade',
|
||||
withPopup: 'With Popup',
|
||||
chooseCity: 'Choose City',
|
||||
showToolbar: 'Show Toolbar',
|
||||
dateColumns: dateColumns['en-US'],
|
||||
defaultIndex: 'Default Index',
|
||||
disableOption: 'Disable Option',
|
||||
cascadeColumns: cascadeColumns['en-US'],
|
||||
multipleColumns: 'Multiple Columns',
|
||||
setColumnValues: 'Set Column Values',
|
||||
customChildrenKey: 'Custom Columns Fields',
|
||||
customChildrenColumns: cascadeColumnsCustomKey['en-US'],
|
||||
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
disabledColumns: [
|
||||
{ text: 'Delaware', disabled: true },
|
||||
{ text: 'Florida' },
|
||||
{ text: 'Georqia' },
|
||||
],
|
||||
column3: {
|
||||
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
|
||||
},
|
||||
toastContent: (value: string, index: number) =>
|
||||
`Value: ${value}, Index：${index}`,
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const picker = ref();
|
||||
const state = reactive({
|
||||
showPicker: false,
|
||||
fieldValue: '',
|
||||
customFieldName: {
|
||||
text: 'cityName',
|
||||
children: 'cities',
|
||||
},
|
||||
});
|
||||
|
||||
const columns = computed(() => {
|
||||
const column = t('column3');
|
||||
return [
|
||||
{
|
||||
values: Object.keys(column),
|
||||
className: 'column1',
|
||||
},
|
||||
{
|
||||
values: column[Object.keys(column)[0]],
|
||||
className: 'column2',
|
||||
defaultIndex: 2,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const onChange1 = (value: string, index: number) => {
|
||||
Toast(t('toastContent', value, index));
|
||||
};
|
||||
|
||||
const onChange2 = (values: string[]) => {
|
||||
picker.value.setColumnValues(1, t('column3')[values[0]]);
|
||||
};
|
||||
|
||||
const onConfirm = (value: string, index: number) => {
|
||||
Toast(t('toastContent', value, index));
|
||||
};
|
||||
|
||||
const onCancel = () => Toast(t('cancel'));
|
||||
|
||||
const onCancel2 = () => {
|
||||
state.showPicker = false;
|
||||
};
|
||||
|
||||
const onClickField = () => {
|
||||
state.showPicker = true;
|
||||
};
|
||||
|
||||
const onConfirm2 = (value: string) => {
|
||||
state.showPicker = false;
|
||||
state.fieldValue = value;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
picker,
|
||||
columns,
|
||||
onCancel,
|
||||
onCancel2,
|
||||
onChange1,
|
||||
onChange2,
|
||||
onConfirm,
|
||||
onConfirm2,
|
||||
onClickField,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user