docs(DatetimePicker): use composition api

2020-12-13 14:46:02 +08:00
parent 0ef23a3477
commit 3452ee2a41
3 changed files with 195 additions and 137 deletions
@@ -83,75 +83,81 @@
  </demo-block>
 </template>

-<script>
+<script lang="ts">
+import { reactive } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    day: '日',
+    year: '年',
+    month: '月',
+    timeType: '选择时间',
+    dateType: '选择年月日',
+    datetimeType: '选择完整时间',
+    datehourType: '选择年月日小时',
+    monthDayType: '选择月日',
+    yearMonthType: '选择年月',
+    optionFilter: '选项过滤器',
+    sortColumns: '自定义列排序',
+  },
+  'en-US': {
+    day: ' Day',
+    year: ' Year',
+    month: ' Month',
+    timeType: 'Choose Time',
+    dateType: 'Choose Date',
+    datetimeType: 'Choose DateTime',
+    datehourType: 'Choose DateHour',
+    monthDayType: 'Choose Month-Day',
+    yearMonthType: 'Choose Year-Month',
+    optionFilter: 'Option Filter',
+    sortColumns: 'Columns Order',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      day: '日',
-      year: '年',
-      month: '月',
-      timeType: '选择时间',
-      dateType: '选择年月日',
-      datetimeType: '选择完整时间',
-      datehourType: '选择年月日小时',
-      monthDayType: '选择月日',
-      yearMonthType: '选择年月',
-      optionFilter: '选项过滤器',
-      sortColumns: '自定义列排序',
-    },
-    'en-US': {
-      day: ' Day',
-      year: ' Year',
-      month: ' Month',
-      timeType: 'Choose Time',
-      dateType: 'Choose Date',
-      datetimeType: 'Choose DateTime',
-      datehourType: 'Choose DateHour',
-      monthDayType: 'Choose Month-Day',
-      yearMonthType: 'Choose Year-Month',
-      optionFilter: 'Option Filter',
-      sortColumns: 'Columns Order',
-    },
-  },
+  setup() {
+    const t = useTranslate(i18n);
+    const value = reactive({
+      date: null,
+      time: '12:00',
+      datetime: new Date(2020, 0, 1),
+      datehour: new Date(2020, 0, 1),
+      monthDay: new Date(2020, 0, 1),
+      yearMonth: new Date(2020, 0, 1),
+      optionFilter: '12:00',
+      sortColumnsDate: new Date(2020, 0, 1),
+    });

-  data() {
-    return {
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      value: {
-        date: null,
-        time: '12:00',
-        datetime: new Date(2020, 0, 1),
-        datehour: new Date(2020, 0, 1),
-        monthDay: new Date(2020, 0, 1),
-        yearMonth: new Date(2020, 0, 1),
-        optionFilter: '12:00',
-        sortColumnsDate: new Date(2020, 0, 1),
-      },
+    const filter = (type: string, values: string[]) => {
+      if (type === 'minute') {
+        return values.filter((value) => Number(value) % 5 === 0);
+      }
+      return values;
    };
-  },

-  methods: {
-    formatter(type, value) {
+    const formatter = (type: string, value: string) => {
      if (type === 'year') {
-        return value + this.t('year');
+        return value + t('year');
      }
      if (type === 'month') {
-        return value + this.t('month');
+        return value + t('month');
      }
      if (type === 'day') {
-        return value + this.t('day');
+        return value + t('day');
      }
      return value;
-    },
+    };

-    filter(type, values) {
-      if (type === 'minute') {
-        return values.filter((value) => value % 5 === 0);
-      }
-
-      return values;
-    },
+    return {
+      t,
+      value,
+      filter,
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      formatter,
+    };
  },
 };
 </script>