docs(Calendar): use composition api

src/calendar/README.md

@@ -26,21 +26,24 @@ The `confirm` event will be emitted after the date selection is completed.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const date = ref('');
+    const show = ref(false);
+
+    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
+    const onConfirm = (date) => {
+      show.value = false;
+      date.value = formatDate(date);
+    };
+
     return {
-      date: '',
-      show: false,
+      date,
+      show,
+      onConfirm,
     };
-  },
-  methods: {
-    formatDate(date) {
-      return `${date.getMonth() + 1}/${date.getDate()}`;
-    },
-    onConfirm(date) {
-      this.show = false;
-      this.date = this.formatDate(date);
-    },
   },
 };
 ```
@@ -53,18 +56,23 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const text = ref('');
+    const show = ref(false);
+
+    const onConfirm = (dates) => {
+      show.value = false;
+      text.value = `选择了 ${dates.length} 个日期`;
+    };
+
     return {
-      text: '',
-      show: false,
+      text,
+      show,
+      onConfirm,
     };
-  },
-  methods: {
-    onConfirm(date) {
-      this.show = false;
-      this.text = `${date.length} dates selected`;
-    },
   },
 };
 ```
@@ -79,22 +87,25 @@ You can select a date range after setting `type` to`range`. In range mode, the d
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      date: '',
-      show: false,
-    };
-  },
-  methods: {
-    formatDate(date) {
-      return `${date.getMonth() + 1}/${date.getDate()}`;
-    },
-    onConfirm(date) {
+  setup() {
+    const date = ref('');
+    const show = ref(false);
+
+    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
+    const onConfirm = (date) => {
       const [start, end] = date;
-      this.show = false;
-      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
-    },
+      show.value = false;
+      date.value = `${formatDate(start)} - ${formatDate(end)}`;
+    };
+
+    return {
+      date,
+      show,
+      onConfirm,
+    };
   },
 };
 ```
@@ -124,10 +135,14 @@ Use `min-date` and `max-date` to custom date range.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const show = ref(false);
+
     return {
-      show: false,
+      show,
       minDate: new Date(2010, 0, 1),
       maxDate: new Date(2010, 0, 31),
     };
@@ -158,8 +173,8 @@ Use `formatter` to custom day text.
 
 ```js
 export default {
-  methods: {
-    formatter(day) {
+  setup() {
+    const formatter = (day) => {
       const month = day.date.getMonth() + 1;
       const date = day.date.getDate();
 
@@ -180,7 +195,11 @@ export default {
       }
 
       return day;
-    },
+    };
+
+    return {
+      formatter,
+    };
   },
 };
 ```