docs(time-picker): Upgrade the use case of time-picker component to Composition API (#1105)

src/time-picker/demos/enUS/actions.demo.md

@@ -8,12 +8,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      ts1: null,
-      ts2: 861333934000
-    }
+      ts1: ref(null),
+      ts2: ref(861333934000)
     }
   }
+})
 ```

src/time-picker/demos/enUS/basic.demo.md

@@ -10,12 +10,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time0: null,
-      time1: 1183135260000
-    }
+      time0: ref(null),
+      time1: ref(1183135260000)
     }
   }
+})
 ```

src/time-picker/demos/enUS/disabled-time.demo.md

@@ -12,13 +12,12 @@ You can disable some time.
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time0: null
-    }
-  },
-  methods: {
+      time0: ref(null),
       isHourDisabled (hour) {
         return hour % 2 === 0
       },
@@ -40,4 +39,5 @@ export default {
       }
     }
   }
+})
 ```

src/time-picker/demos/enUS/format.demo.md

@@ -5,11 +5,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time: null
-    }
+      time: ref(null)
     }
   }
+})
 ```

src/time-picker/demos/enUS/size.demo.md

@@ -11,11 +11,13 @@ Time Picker can be `small`, `medium` or `large` sized.
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      timestamp: null
-    }
+      timestamp: ref(null)
     }
   }
+})
 ```

src/time-picker/demos/enUS/step-time.demo.md

@@ -12,11 +12,13 @@ Pass a number as step or use an array to specify the items you want to show, inp
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time: 1183135260000
-    }
+      time: ref(1183135260000)
     }
   }
+})
 ```

src/time-picker/demos/zhCN/actions.demo.md

@@ -8,12 +8,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      ts1: null,
-      ts2: 861333934000
-    }
+      ts1: ref(null),
+      ts2: ref(861333934000)
     }
   }
+})
 ```

src/time-picker/demos/zhCN/basic.demo.md

@@ -8,12 +8,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time0: null,
-      time1: 1183135260000
-    }
+      time0: ref(null),
+      time1: ref(1183135260000)
     }
   }
+})
 ```

src/time-picker/demos/zhCN/disabled-time.demo.md

@@ -12,13 +12,12 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time0: null
-    }
-  },
-  methods: {
+      time0: ref(null),
       isHourDisabled (hour) {
         return hour % 2 === 0
       },
@@ -40,4 +39,5 @@ export default {
       }
     }
   }
+})
 ```

src/time-picker/demos/zhCN/format.demo.md

@@ -5,11 +5,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time: null
-    }
+      time: ref(null)
     }
   }
+})
 ```

src/time-picker/demos/zhCN/size.demo.md

@@ -11,11 +11,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      timestamp: null
-    }
+      timestamp: ref(null)
     }
   }
+})
 ```

src/time-picker/demos/zhCN/step-time.demo.md

@@ -12,11 +12,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time: 1183135260000
-    }
+      time: ref(1183135260000)
     }
   }
+})
 ```