docs(Picker): use composition api

src/picker/README.md

@@ -32,21 +32,25 @@ app.use(Picker);
 import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
-    return {
+    const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
-      columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+
+    const onConfirm = (value, index) => {
+      Toast(`Value: ${value}, Index: ${index}`);
     };
-  },
+    const onChange = (value, index) => {
-  methods: {
-    onConfirm(value, index) {
       Toast(`Value: ${value}, Index: ${index}`);
-    },
+    };
-    onChange(value, index) {
+    const onCancel = () => {
-      Toast(`Value: ${value}, Index: ${index}`);
-    },
-    onCancel() {
       Toast('Cancel');
-    },
+    };
+
+    return {
+      columns,
+      onChange,
+      onCancel,
+      onConfirm,
+    };
   },
 };
 ```
@@ -65,9 +69,8 @@ export default {
 
 ```js
 export default {
-  data() {
+  setup() {
-    return {
+    const columns = [
-      columns: [
       {
         values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
         defaultIndex: 2,
@@ -76,8 +79,9 @@ export default {
         values: ['Morging', 'Afternoon', 'Evening'],
         defaultIndex: 1,
       },
-      ],
+    ];
-    };
+
+    return { columns };
   },
 };
 ```
@@ -90,9 +94,8 @@ export default {
 
 ```js
 export default {
-  data() {
+  setup() {
-    return {
+    const columns = [
-      columns: [
       {
         text: 'Zhejiang',
         children: [
@@ -119,8 +122,9 @@ export default {
           },
         ],
       },
-      ],
+    ];
-    };
+
+    return { columns };
   },
 };
 ```
@@ -133,14 +137,14 @@ export default {
 
 ```js
 export default {
-  data() {
+  setup() {
-    return {
+    const columns = [
-      columns: [
       { text: 'Delaware', disabled: true },
       { text: 'Florida' },
       { text: 'Georqia' },
-      ],
+    ];
-    };
+
+    return { columns };
   },
 };
 ```
@@ -152,21 +156,30 @@ export default {
 ```
 
 ```js
-const states = {
+import { ref } from 'vue';
-  Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
-  Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
-};
 
 export default {
-  data() {
+  setup() {
-    return {
+    const picker = ref(null);
-      columns: [{ values: Object.keys(states) }, { values: states.Group1 }],
+
+    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() {
+  setup() {
-    return {
+    const state = reactive({
       columns: [],
       loading: true,
-    };
+    });
-  },
+
-  created() {
     setTimeout(() => {
-      this.loading = false;
+      state.loading = false;
-      this.columns = ['Option'];
+      state.columns = ['Option'];
     }, 1000);
+
+    return { state };
   },
 };
 ```
@@ -218,19 +234,26 @@ export default {
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    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;
-    },
   },
 };
 ```

src/picker/README.zh-CN.md

@@ -40,21 +40,25 @@ Picker 组件通过 `columns` 属性配置选项数据，`columns` 是一个包
 import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
-    return {
+    const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];
-      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
+
+    const onConfirm = (value, index) => {
+      Toast(`当前值: ${value}, 当前索引: ${index}`);
     };
-  },
+    const onChange = (value, index) => {
-  methods: {
+      Toast(`当前值: ${value}, 当前索引: ${index}`);
-    onConfirm(value, index) {
+    };
-      Toast(`当前值：${value}, 当前索引：${index}`);
+    const onCancel = () => {
-    },
-    onChange(value, index) {
-      Toast(`当前值：${value}, 当前索引：${index}`);
-    },
-    onCancel() {
       Toast('取消');
-    },
+    };
+
+    return {
+      columns,
+      onChange,
+      onCancel,
+      onConfirm,
+    };
   },
 };
 ```
@@ -77,9 +81,8 @@ export default {
 
 ```js
 export default {
-  data() {
+  setup() {
-    return {
+    const columns = [
-      columns: [
       // 第一列
       {
         values: ['周一', '周二', '周三', '周四', '周五'],
@@ -90,15 +93,16 @@ export default {
         values: ['上午', '下午', '晚上'],
         defaultIndex: 1,
       },
-      ],
+    ];
-    };
+
+    return { columns };
   },
 };
 ```
 
 ### 级联选择
 
-使用 `columns` 的 `children` 字段可以实现选项级联的效果（从 2.4.5 版本开始支持）。
+使用 `columns` 的 `children` 字段可以实现选项级联的效果。
 
 ```html
 <van-picker title="标题" :columns="columns" />
@@ -106,9 +110,8 @@ export default {
 
 ```js
 export default {
-  data() {
+  setup() {
-    return {
+    const columns = [
-      columns: [
       {
         text: '浙江',
         children: [
@@ -135,8 +138,9 @@ export default {
           },
         ],
       },
-      ],
+    ];
-    };
+
+    return { columns };
   },
 };
 ```
@@ -153,14 +157,14 @@ export default {
 
 ```js
 export default {
-  data() {
+  setup() {
-    return {
+    const columns = [
-      columns: [
       { text: '杭州', disabled: true },
       { text: '宁波' },
       { text: '温州' },
-      ],
+    ];
-    };
+
+    return { columns };
   },
 };
 ```
@@ -174,21 +178,30 @@ export default {
 ```
 
 ```js
-const cities = {
+import { ref } from 'vue';
-  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
-  福建: ['福州', '厦门', '莆田', '三明', '泉州'],
-};
 
 export default {
-  data() {
+  setup() {
-    return {
+    const picker = ref(null);
-      columns: [{ values: Object.keys(cities) }, { values: cities['浙江'] }],
+
+    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() {
+  setup() {
-    return {
+    const state = reactive({
       columns: [],
       loading: true,
-    };
+    });
-  },
+
-  created() {
     setTimeout(() => {
-      this.loading = false;
+      state.loading = false;
-      this.columns = ['选项'];
+      state.columns = ['选项'];
     }, 1000);
+
+    return { state };
   },
 };
 ```
@@ -241,19 +257,26 @@ export default {
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    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;
-    },
   },
 };
 ```

src/picker/demo/index.vue

@@ -67,10 +67,12 @@
 </template>
 
 <script>
+import { ref, computed, reactive, toRefs } from 'vue';
 import { dateColumns, cascadeColumns } from './data';
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
 
-export default {
+const i18n = {
-  i18n: {
   'zh-CN': {
     city: '城市',
     cascade: '级联选择',
@@ -128,18 +130,19 @@ export default {
     },
     toastContent: (value, index) => `Value: ${value}, Index：${index}`,
   },
-  },
+};
 
-  data() {
+export default {
-    return {
+  setup() {
+    const t = useTranslate(i18n);
+    const picker = ref();
+    const state = reactive({
       showPicker: false,
       fieldValue: '',
-    };
+    });
-  },
 
-  computed: {
+    const columns = computed(() => {
-    columns() {
+      const column = t('column3');
-      const column = this.t('column3');
       return [
         {
           values: Object.keys(column),
@@ -151,38 +154,50 @@ export default {
           defaultIndex: 2,
         },
       ];
-    },
+    });
-  },
 
-  methods: {
+    const onChange1 = (value, index) => {
-    onChange1(value, index) {
+      Toast(t('toastContent', value, index));
-      this.$toast(this.t('toastContent', value, index));
+    };
-    },
 
-    onChange2(values) {
+    const onChange2 = (values) => {
-      this.$refs.picker.setColumnValues(1, this.t('column3')[values[0]]);
+      picker.value.setColumnValues(1, t('column3')[values[0]]);
-    },
+    };
 
-    onConfirm(value, index) {
+    const onConfirm = (value, index) => {
-      this.$toast(this.t('toastContent', value, index));
+      Toast(t('toastContent', value, index));
-    },
+    };
 
-    onCancel() {
+    const onCancel = () => {
-      this.$toast(this.t('cancel'));
+      Toast(t('cancel'));
-    },
+    };
 
-    onClickField() {
+    const onCancel2 = () => {
-      this.showPicker = true;
+      state.showPicker = false;
-    },
+    };
 
-    onConfirm2(value) {
+    const onClickField = () => {
-      this.showPicker = false;
+      state.showPicker = true;
-      this.fieldValue = value;
+    };
-    },
 
-    onCancel2() {
+    const onConfirm2 = (value) => {
-      this.showPicker = false;
+      state.showPicker = false;
-    },
+      state.fieldValue = value;
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      picker,
+      columns,
+      onCancel,
+      onCancel2,
+      onChange1,
+      onChange2,
+      onConfirm,
+      onConfirm2,
+      onClickField,
+    };
   },
 };
 </script>