From ceaab349f177d0280d15f66686890dc092434b80 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 19 Jan 2022 11:27:40 +0800
Subject: [PATCH] docs(Picker): update demo

---
 packages/vant/src/picker/demo/WithPopup.vue |  59 ++++++++++
 packages/vant/src/picker/demo/index.vue     | 124 ++++----------------
 2 files changed, 79 insertions(+), 104 deletions(-)
 create mode 100644 packages/vant/src/picker/demo/WithPopup.vue

diff --git a/packages/vant/src/picker/demo/WithPopup.vue b/packages/vant/src/picker/demo/WithPopup.vue
new file mode 100644
index 000000000..32a232cae
--- /dev/null
+++ b/packages/vant/src/picker/demo/WithPopup.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import VanPicker from '..';
+import VanField from '../../field';
+import VanPopup from '../../popup';
+import { basicColumns } from './data';
+import { useTranslate } from '../../../docs/site/use-translate';
+import type { PickerConfirmEventParams } from '../types';
+
+const t = useTranslate({
+  'zh-CN': {
+    city: '城市',
+    withPopup: '搭配弹出层使用',
+    chooseCity: '选择城市',
+    basicColumns: basicColumns['zh-CN'],
+  },
+  'en-US': {
+    city: 'City',
+    withPopup: 'With Popup',
+    chooseCity: 'Choose City',
+    basicColumns: basicColumns['en-US'],
+  },
+});
+
+const showPicker = ref(false);
+const fieldValue = ref('');
+
+const onClickField = () => {
+  showPicker.value = true;
+};
+const onCancel = () => {
+  showPicker.value = false;
+};
+const onConfirm = ({ selectedOptions }: PickerConfirmEventParams) => {
+  showPicker.value = false;
+  fieldValue.value = selectedOptions[0].text as string;
+};
+</script>
+
+<template>
+  <demo-block card :title="t('withPopup')">
+    <van-field
+      v-model="fieldValue"
+      is-link
+      readonly
+      :label="t('city')"
+      :placeholder="t('chooseCity')"
+      @click="onClickField"
+    />
+    <van-popup v-model:show="showPicker" round position="bottom">
+      <van-picker
+        :title="t('title')"
+        :columns="t('basicColumns')"
+        @cancel="onCancel"
+        @confirm="onConfirm"
+      />
+    </van-popup>
+  </demo-block>
+</template>
diff --git a/packages/vant/src/picker/demo/index.vue b/packages/vant/src/picker/demo/index.vue
index 91a78e7ba..6215cefb1 100644
--- a/packages/vant/src/picker/demo/index.vue
+++ b/packages/vant/src/picker/demo/index.vue
@@ -1,123 +1,66 @@
 <script setup lang="ts">
-import VanPicker, { PickerOption, PickerChangeEventParams } from '..';
-import VanField from '../../field';
-import VanPopup from '../../popup';
-import { ref, computed } from 'vue';
+import WithPopup from './WithPopup.vue';
+import VanPicker, {
+  PickerChangeEventParams,
+  PickerConfirmEventParams,
+} from '..';
 import {
   dateColumns,
-  cascadeColumns,
-  cascadeColumnsCustomKey,
   basicColumns,
+  cascadeColumns,
+  disabledColumns,
+  customKeyColumns,
 } from './data';
-import { useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';
-import { PickerConfirmEventParams } from '../types';
+import { useTranslate } from '../../../docs/site/use-translate';
 
 const t = useTranslate({
   'zh-CN': {
-    city: '城市',
     cascade: '级联选择',
-    withPopup: '搭配弹出层使用',
-    chooseCity: '选择城市',
     showToolbar: '展示顶部栏',
     dateColumns: dateColumns['zh-CN'],
     basicColumns: basicColumns['zh-CN'],
     defaultIndex: '默认选中项',
     disableOption: '禁用选项',
     cascadeColumns: cascadeColumns['zh-CN'],
+    disabledColumns: disabledColumns['zh-CN'],
     multipleColumns: '多列选择',
-    setColumnValues: '动态设置选项',
     customChildrenKey: '自定义 Columns 结构',
-    customChildrenColumns: cascadeColumnsCustomKey['zh-CN'],
-    disabledColumns: [
-      { text: '杭州', disabled: true },
-      { text: '宁波' },
-      { text: '温州' },
-    ],
-    column3: {
-      浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
-      福建: ['福州', '厦门', '莆田', '三明', '泉州'],
-    },
+    customChildrenColumns: customKeyColumns['zh-CN'],
     toastContent: (value: string) => `当前值：${value}`,
   },
   'en-US': {
-    city: 'City',
     cascade: 'Cascade',
-    withPopup: 'With Popup',
-    chooseCity: 'Choose City',
     showToolbar: 'Show Toolbar',
     dateColumns: dateColumns['en-US'],
     basicColumns: basicColumns['en-US'],
     defaultIndex: 'Default Index',
     disableOption: 'Disable Option',
     cascadeColumns: cascadeColumns['en-US'],
+    disabledColumns: disabledColumns['en-US'],
     multipleColumns: 'Multiple Columns',
-    setColumnValues: 'Set Column Values',
     customChildrenKey: 'Custom Columns Fields',
-    customChildrenColumns: cascadeColumnsCustomKey['en-US'],
-    disabledColumns: [
-      { text: 'Delaware', disabled: true },
-      { text: 'Florida' },
-      { text: 'Georqia' },
-    ],
-    column3: {
-      Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
-      Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
-    },
+    customChildrenColumns: customKeyColumns['en-US'],
     toastContent: (value: string, index: number) =>
       `Value: ${value}, Index：${index}`,
   },
 });
 
-const picker = ref();
-const showPicker = ref(false);
-const fieldValue = ref('');
-const customFieldName = ref({
+const customFieldName = {
   text: 'cityName',
+  value: '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 = ({ selectedValues }: PickerChangeEventParams) => {
   Toast(t('toastContent', selectedValues.join(',')));
 };
 
-const onChange2 = (values: string[]) => {
-  picker.value.setColumnValues(1, t('column3')[values[0]]);
-};
-
 const onConfirm = ({ selectedValues }: PickerConfirmEventParams) => {
   Toast(t('toastContent', selectedValues.join(',')));
 };
 
 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>
@@ -130,6 +73,8 @@ const onConfirm2 = (value: string) => {
     />
   </demo-block>
 
+  <WithPopup />
+
   <demo-block card :title="t('multipleColumns')">
     <van-picker
       :title="t('title')"
@@ -143,48 +88,19 @@ const onConfirm2 = (value: string) => {
     <van-picker :title="t('title')" :columns="t('cascadeColumns')" />
   </demo-block>
 
-  <!-- 
- 
   <demo-block card :title="t('disableOption')">
     <van-picker :title="t('title')" :columns="t('disabledColumns')" />
   </demo-block>
 
-  <demo-block card :title="t('setColumnValues')">
-    <van-picker
-      ref="picker"
-      :title="t('title')"
-      :columns="columns"
-      @change="onChange2"
-    />
-  </demo-block>
-
   <demo-block card :title="t('loadingStatus')">
-    <van-picker loading :title="t('title')" :columns="columns" />
+    <van-picker loading :title="t('title')" />
   </demo-block>
 
-  <demo-block card :title="t('withPopup')">
-    <van-field
-      v-model="fieldValue"
-      is-link
-      readonly
-      :label="t('city')"
-      :placeholder="t('chooseCity')"
-      @click="onClickField"
-    />
-    <van-popup v-model:show="showPicker" round position="bottom">
-      <van-picker
-        :title="t('title')"
-        :columns="t('textColumns')"
-        @cancel="onCancel2"
-        @confirm="onConfirm2"
-      />
-    </van-popup>
-  </demo-block>
   <demo-block card :title="t('customChildrenKey')">
     <van-picker
       :title="t('title')"
       :columns="t('customChildrenColumns')"
       :columns-field-names="customFieldName"
     />
-  </demo-block> -->
+  </demo-block>
 </template>