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,32 +12,32 @@ You can disable some time.
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time0: null
-    }
-  },
-  methods: {
-    isHourDisabled (hour) {
-      return hour % 2 === 0
-    },
-    isMinuteDisabled (minute, selectedHour) {
-      if (selectedHour === null) return false
-      if (Number(selectedHour) < 12) {
-        return minute < 30
-      } else {
-        return false
-      }
-    },
-    isSecondDisabled (second, selectedMinute, selectedHour) {
-      if (selectedHour === null || selectedMinute === null) return false
-      if (Number(selectedHour) > 20 && Number(selectedMinute) < 30) {
-        return second < 40
-      } else {
-        return false
+      time0: ref(null),
+      isHourDisabled (hour) {
+        return hour % 2 === 0
+      },
+      isMinuteDisabled (minute, selectedHour) {
+        if (selectedHour === null) return false
+        if (Number(selectedHour) < 12) {
+          return minute < 30
+        } else {
+          return false
+        }
+      },
+      isSecondDisabled (second, selectedMinute, selectedHour) {
+        if (selectedHour === null || selectedMinute === null) return false
+        if (Number(selectedHour) > 20 && Number(selectedMinute) < 30) {
+          return second < 40
+        } else {
+          return false
+        }
       }
     }
   }
-}
+})
 ```

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,32 +12,32 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time0: null
-    }
-  },
-  methods: {
-    isHourDisabled (hour) {
-      return hour % 2 === 0
-    },
-    isMinuteDisabled (minute, selectedHour) {
-      if (selectedHour === null) return false
-      if (Number(selectedHour) < 12) {
-        return minute < 30
-      } else {
-        return false
-      }
-    },
-    isSecondDisabled (second, selectedMinute, selectedHour) {
-      if (selectedHour === null || selectedMinute === null) return false
-      if (Number(selectedHour) > 20 && Number(selectedMinute) < 30) {
-        return second < 40
-      } else {
-        return false
+      time0: ref(null),
+      isHourDisabled (hour) {
+        return hour % 2 === 0
+      },
+      isMinuteDisabled (minute, selectedHour) {
+        if (selectedHour === null) return false
+        if (Number(selectedHour) < 12) {
+          return minute < 30
+        } else {
+          return false
+        }
+      },
+      isSecondDisabled (second, selectedMinute, selectedHour) {
+        if (selectedHour === null || selectedMinute === null) return false
+        if (Number(selectedHour) > 20 && Number(selectedMinute) < 30) {
+          return second < 40
+        } else {
+          return false
+        }
       }
     }
   }
-}
+})
 ```

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)
     }
   }
-}
+})
 ```