From a33f06bb9d12966c521a94e8fefdefe823c57707 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 13 Dec 2020 19:50:27 +0800
Subject: [PATCH] docs(Picker): use composition api

---
 src/picker/README.md       | 207 +++++++++++++++++++----------------
 src/picker/README.zh-CN.md | 215 ++++++++++++++++++++-----------------
 src/picker/demo/index.vue  | 199 ++++++++++++++++++----------------
 3 files changed, 341 insertions(+), 280 deletions(-)

diff --git a/src/picker/README.md b/src/picker/README.md
index e12f5f756..9b9225bdd 100644
--- a/src/picker/README.md
+++ b/src/picker/README.md
@@ -32,21 +32,25 @@ app.use(Picker);
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+  setup() {
+    const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
+
+    const onConfirm = (value, index) => {
+      Toast(`Value: ${value}, Index: ${index}`);
     };
-  },
-  methods: {
-    onConfirm(value, index) {
+    const onChange = (value, index) => {
       Toast(`Value: ${value}, Index: ${index}`);
-    },
-    onChange(value, index) {
-      Toast(`Value: ${value}, Index: ${index}`);
-    },
-    onCancel() {
+    };
+    const onCancel = () => {
       Toast('Cancel');
-    },
+    };
+
+    return {
+      columns,
+      onChange,
+      onCancel,
+      onConfirm,
+    };
   },
 };
 ```
@@ -65,19 +69,19 @@ export default {
 
 ```js
 export default {
-  data() {
-    return {
-      columns: [
-        {
-          values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
-          defaultIndex: 2,
-        },
-        {
-          values: ['Morging', 'Afternoon', 'Evening'],
-          defaultIndex: 1,
-        },
-      ],
-    };
+  setup() {
+    const columns = [
+      {
+        values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
+        defaultIndex: 2,
+      },
+      {
+        values: ['Morging', 'Afternoon', 'Evening'],
+        defaultIndex: 1,
+      },
+    ];
+
+    return { columns };
   },
 };
 ```
@@ -90,37 +94,37 @@ export default {
 
 ```js
 export default {
-  data() {
-    return {
-      columns: [
-        {
-          text: 'Zhejiang',
-          children: [
-            {
-              text: 'Hangzhou',
-              children: [{ text: 'Xihu' }, { text: 'Yuhang' }],
-            },
-            {
-              text: 'Wenzhou',
-              children: [{ text: 'Lucheng' }, { text: 'Ouhai' }],
-            },
-          ],
-        },
-        {
-          text: 'Fujian',
-          children: [
-            {
-              text: 'Fuzhou',
-              children: [{ text: 'Gulou' }, { text: 'Taijiang' }],
-            },
-            {
-              text: 'Xiamen',
-              children: [{ text: 'Siming' }, { text: 'Haicang' }],
-            },
-          ],
-        },
-      ],
-    };
+  setup() {
+    const columns = [
+      {
+        text: 'Zhejiang',
+        children: [
+          {
+            text: 'Hangzhou',
+            children: [{ text: 'Xihu' }, { text: 'Yuhang' }],
+          },
+          {
+            text: 'Wenzhou',
+            children: [{ text: 'Lucheng' }, { text: 'Ouhai' }],
+          },
+        ],
+      },
+      {
+        text: 'Fujian',
+        children: [
+          {
+            text: 'Fuzhou',
+            children: [{ text: 'Gulou' }, { text: 'Taijiang' }],
+          },
+          {
+            text: 'Xiamen',
+            children: [{ text: 'Siming' }, { text: 'Haicang' }],
+          },
+        ],
+      },
+    ];
+
+    return { columns };
   },
 };
 ```
@@ -133,14 +137,14 @@ export default {
 
 ```js
 export default {
-  data() {
-    return {
-      columns: [
-        { text: 'Delaware', disabled: true },
-        { text: 'Florida' },
-        { text: 'Georqia' },
-      ],
-    };
+  setup() {
+    const columns = [
+      { text: 'Delaware', disabled: true },
+      { text: 'Florida' },
+      { text: 'Georqia' },
+    ];
+
+    return { columns };
   },
 };
 ```
@@ -152,21 +156,30 @@ export default {
 ```
 
 ```js
-const states = {
-  Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
-  Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
-};
+import { ref } from 'vue';
 
 export default {
-  data() {
-    return {
-      columns: [{ values: Object.keys(states) }, { values: states.Group1 }],
+  setup() {
+    const picker = ref(null);
+
+    const states = {
+      Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+      Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
+    };
+    const columns = [
+      { values: Object.keys(states) },
+      { values: states.Group1 },
+    ];
+
+    const onChange = (values) => {
+      picker.value.setColumnValues(1, states[values[0]]);
+    };
+
+    return {
+      picker,
+      columns,
+      onChange,
     };
-  },
-  methods: {
-    onChange(values) {
-      this.$refs.picker.setColumnValues(1, states[values[0]]);
-    },
   },
 };
 ```
@@ -180,18 +193,21 @@ When Picker columns data is acquired asynchronously, use `loading` prop to show
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       columns: [],
       loading: true,
-    };
-  },
-  created() {
+    });
+
     setTimeout(() => {
-      this.loading = false;
-      this.columns = ['Option'];
+      state.loading = false;
+      state.columns = ['Option'];
     }, 1000);
+
+    return { state };
   },
 };
 ```
@@ -218,19 +234,26 @@ export default {
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
+    const state = reactive({
       value: '',
       showPicker: false,
-      columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+    });
+
+    const onConfirm = (value) => {
+      state.value = value;
+      state.showPicker = false;
+    };
+
+    return {
+      state,
+      columns,
+      onConfirm,
     };
-  },
-  methods: {
-    onConfirm(value) {
-      this.value = value;
-      this.showPicker = false;
-    },
   },
 };
 ```
diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md
index 862511e39..a3cf440c9 100644
--- a/src/picker/README.zh-CN.md
+++ b/src/picker/README.zh-CN.md
@@ -40,21 +40,25 @@ Picker 组件通过 `columns` 属性配置选项数据，`columns` 是一个包
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
+  setup() {
+    const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];
+
+    const onConfirm = (value, index) => {
+      Toast(`当前值: ${value}, 当前索引: ${index}`);
     };
-  },
-  methods: {
-    onConfirm(value, index) {
-      Toast(`当前值：${value}, 当前索引：${index}`);
-    },
-    onChange(value, index) {
-      Toast(`当前值：${value}, 当前索引：${index}`);
-    },
-    onCancel() {
+    const onChange = (value, index) => {
+      Toast(`当前值: ${value}, 当前索引: ${index}`);
+    };
+    const onCancel = () => {
       Toast('取消');
-    },
+    };
+
+    return {
+      columns,
+      onChange,
+      onCancel,
+      onConfirm,
+    };
   },
 };
 ```
@@ -77,28 +81,28 @@ export default {
 
 ```js
 export default {
-  data() {
-    return {
-      columns: [
-        // 第一列
-        {
-          values: ['周一', '周二', '周三', '周四', '周五'],
-          defaultIndex: 2,
-        },
-        // 第二列
-        {
-          values: ['上午', '下午', '晚上'],
-          defaultIndex: 1,
-        },
-      ],
-    };
+  setup() {
+    const columns = [
+      // 第一列
+      {
+        values: ['周一', '周二', '周三', '周四', '周五'],
+        defaultIndex: 2,
+      },
+      // 第二列
+      {
+        values: ['上午', '下午', '晚上'],
+        defaultIndex: 1,
+      },
+    ];
+
+    return { columns };
   },
 };
 ```
 
 ### 级联选择
 
-使用 `columns` 的 `children` 字段可以实现选项级联的效果（从 2.4.5 版本开始支持）。
+使用 `columns` 的 `children` 字段可以实现选项级联的效果。
 
 ```html
 <van-picker title="标题" :columns="columns" />
@@ -106,37 +110,37 @@ export default {
 
 ```js
 export default {
-  data() {
-    return {
-      columns: [
-        {
-          text: '浙江',
-          children: [
-            {
-              text: '杭州',
-              children: [{ text: '西湖区' }, { text: '余杭区' }],
-            },
-            {
-              text: '温州',
-              children: [{ text: '鹿城区' }, { text: '瓯海区' }],
-            },
-          ],
-        },
-        {
-          text: '福建',
-          children: [
-            {
-              text: '福州',
-              children: [{ text: '鼓楼区' }, { text: '台江区' }],
-            },
-            {
-              text: '厦门',
-              children: [{ text: '思明区' }, { text: '海沧区' }],
-            },
-          ],
-        },
-      ],
-    };
+  setup() {
+    const columns = [
+      {
+        text: '浙江',
+        children: [
+          {
+            text: '杭州',
+            children: [{ text: '西湖区' }, { text: '余杭区' }],
+          },
+          {
+            text: '温州',
+            children: [{ text: '鹿城区' }, { text: '瓯海区' }],
+          },
+        ],
+      },
+      {
+        text: '福建',
+        children: [
+          {
+            text: '福州',
+            children: [{ text: '鼓楼区' }, { text: '台江区' }],
+          },
+          {
+            text: '厦门',
+            children: [{ text: '思明区' }, { text: '海沧区' }],
+          },
+        ],
+      },
+    ];
+
+    return { columns };
   },
 };
 ```
@@ -153,14 +157,14 @@ export default {
 
 ```js
 export default {
-  data() {
-    return {
-      columns: [
-        { text: '杭州', disabled: true },
-        { text: '宁波' },
-        { text: '温州' },
-      ],
-    };
+  setup() {
+    const columns = [
+      { text: '杭州', disabled: true },
+      { text: '宁波' },
+      { text: '温州' },
+    ];
+
+    return { columns };
   },
 };
 ```
@@ -174,21 +178,30 @@ export default {
 ```
 
 ```js
-const cities = {
-  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
-  福建: ['福州', '厦门', '莆田', '三明', '泉州'],
-};
+import { ref } from 'vue';
 
 export default {
-  data() {
-    return {
-      columns: [{ values: Object.keys(cities) }, { values: cities['浙江'] }],
+  setup() {
+    const picker = ref(null);
+
+    const cities = {
+      浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+      福建: ['福州', '厦门', '莆田', '三明', '泉州'],
+    };
+    const columns = [
+      { values: Object.keys(cities) },
+      { values: cities['浙江'] },
+    ];
+
+    const onChange = (values) => {
+      picker.value.setColumnValues(1, cities[values[0]]);
+    };
+
+    return {
+      picker,
+      columns,
+      onChange,
     };
-  },
-  methods: {
-    onChange(values) {
-      this.$refs.picker.setColumnValues(1, cities[values[0]]);
-    },
   },
 };
 ```
@@ -202,18 +215,21 @@ export default {
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       columns: [],
       loading: true,
-    };
-  },
-  created() {
+    });
+
     setTimeout(() => {
-      this.loading = false;
-      this.columns = ['选项'];
+      state.loading = false;
+      state.columns = ['选项'];
     }, 1000);
+
+    return { state };
   },
 };
 ```
@@ -241,19 +257,26 @@ export default {
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];
+    const state = reactive({
       value: '',
       showPicker: false,
-      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
+    });
+
+    const onConfirm = (value) => {
+      state.value = value;
+      state.showPicker = false;
+    };
+
+    return {
+      state,
+      columns,
+      onConfirm,
     };
-  },
-  methods: {
-    onConfirm(value) {
-      this.value = value;
-      this.showPicker = false;
-    },
   },
 };
 ```
diff --git a/src/picker/demo/index.vue b/src/picker/demo/index.vue
index 3923348af..00e81ffbb 100644
--- a/src/picker/demo/index.vue
+++ b/src/picker/demo/index.vue
@@ -67,79 +67,82 @@
 </template>
 
 <script>
+import { ref, computed, reactive, toRefs } from 'vue';
 import { dateColumns, cascadeColumns } 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: '动态设置选项',
+    textColumns: [
+      '杭州',
+      '宁波',
+      '温州',
+      '绍兴',
+      '湖州',
+      '嘉兴',
+      '金华',
+      '衢州',
+    ],
+    disabledColumns: [
+      { text: '杭州', disabled: true },
+      { text: '宁波' },
+      { text: '温州' },
+    ],
+    column3: {
+      浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+      福建: ['福州', '厦门', '莆田', '三明', '泉州'],
+    },
+    toastContent: (value, index) => `当前值：${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',
+    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, index) => `Value: ${value}, Index：${index}`,
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      city: '城市',
-      cascade: '级联选择',
-      withPopup: '搭配弹出层使用',
-      chooseCity: '选择城市',
-      showToolbar: '展示顶部栏',
-      dateColumns: dateColumns['zh-CN'],
-      defaultIndex: '默认选中项',
-      disableOption: '禁用选项',
-      cascadeColumns: cascadeColumns['zh-CN'],
-      multipleColumns: '多列选择',
-      setColumnValues: '动态设置选项',
-      textColumns: [
-        '杭州',
-        '宁波',
-        '温州',
-        '绍兴',
-        '湖州',
-        '嘉兴',
-        '金华',
-        '衢州',
-      ],
-      disabledColumns: [
-        { text: '杭州', disabled: true },
-        { text: '宁波' },
-        { text: '温州' },
-      ],
-      column3: {
-        浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
-        福建: ['福州', '厦门', '莆田', '三明', '泉州'],
-      },
-      toastContent: (value, index) => `当前值：${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',
-      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, index) => `Value: ${value}, Index：${index}`,
-    },
-  },
-
-  data() {
-    return {
+  setup() {
+    const t = useTranslate(i18n);
+    const picker = ref();
+    const state = reactive({
       showPicker: false,
       fieldValue: '',
-    };
-  },
+    });
 
-  computed: {
-    columns() {
-      const column = this.t('column3');
+    const columns = computed(() => {
+      const column = t('column3');
       return [
         {
           values: Object.keys(column),
@@ -151,38 +154,50 @@ export default {
           defaultIndex: 2,
         },
       ];
-    },
-  },
+    });
 
-  methods: {
-    onChange1(value, index) {
-      this.$toast(this.t('toastContent', value, index));
-    },
+    const onChange1 = (value, index) => {
+      Toast(t('toastContent', value, index));
+    };
 
-    onChange2(values) {
-      this.$refs.picker.setColumnValues(1, this.t('column3')[values[0]]);
-    },
+    const onChange2 = (values) => {
+      picker.value.setColumnValues(1, t('column3')[values[0]]);
+    };
 
-    onConfirm(value, index) {
-      this.$toast(this.t('toastContent', value, index));
-    },
+    const onConfirm = (value, index) => {
+      Toast(t('toastContent', value, index));
+    };
 
-    onCancel() {
-      this.$toast(this.t('cancel'));
-    },
+    const onCancel = () => {
+      Toast(t('cancel'));
+    };
 
-    onClickField() {
-      this.showPicker = true;
-    },
+    const onCancel2 = () => {
+      state.showPicker = false;
+    };
 
-    onConfirm2(value) {
-      this.showPicker = false;
-      this.fieldValue = value;
-    },
+    const onClickField = () => {
+      state.showPicker = true;
+    };
 
-    onCancel2() {
-      this.showPicker = false;
-    },
+    const onConfirm2 = (value) => {
+      state.showPicker = false;
+      state.fieldValue = value;
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      picker,
+      columns,
+      onCancel,
+      onCancel2,
+      onChange1,
+      onChange2,
+      onConfirm,
+      onConfirm2,
+      onClickField,
+    };
   },
 };
 </script>