docs(Calendar): use composition api

src/calendar/README.zh-CN.md

@@ -26,21 +26,24 @@ app.use(Calendar);
 ```
 
 ```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);
-    },
   },
 };
 ```
@@ -55,18 +58,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} 个日期`;
-    },
   },
 };
 ```
@@ -81,22 +89,25 @@ export default {
 ```
 
 ```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,
+    };
   },
 };
 ```
@@ -126,10 +137,14 @@ export default {
 ```
 
 ```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),
     };
@@ -160,8 +175,8 @@ export default {
 
 ```js
 export default {
-  methods: {
-    formatter(day) {
+  setup() {
+    const formatter = (day) => {
       const month = day.date.getMonth() + 1;
       const date = day.date.getDate();
 
@@ -182,7 +197,11 @@ export default {
       }
 
       return day;
-    },
+    };
+
+    return {
+      formatter,
+    };
   },
 };
 ```