fix: update doc and test

hug-sun · Nov 6, 2020 · 8c71671 · 8c71671
1 parent 7fb82a2
commit 8c71671
Show file tree

Hide file tree

Showing 5 changed files with 202 additions and 123 deletions.
diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md
@@ -31,9 +31,10 @@
 </template>
 
 <script>
+import {reactive,toRefs} from "vue"
   export default {
-    data() {
-      return {
+    setup(){
+      const data = reactive({
         pickerOptions: {
           disabledDate(time) {
             return time.getTime() > Date.now();
@@ -61,8 +62,11 @@
         },
         value1: '',
         value2: '',
-      };
-    }
+      })
+      return{
+          ...toRefs(data)
+      }
+    }   
   };
 </script>
 ```
@@ -113,14 +117,18 @@
 </div>
 
 <script>
+import {reactive,toRefs} from "vue"
   export default {
-    data() {
-      return {
+    setup(){
+      const data = reactive({
         value1: '',
         value2: '',
         value3: '',
         value4: ''
-      };
+      })
+      return{
+        ...toRefs(data)
+      }
     }
   };
 </script>
@@ -160,9 +168,10 @@
 </template>
 
 <script>
+import {reactive,toRefs} from "vue"
   export default {
-    data() {
-      return {
+    setup(){
+      const data = reactive({
         pickerOptions: {
           shortcuts: [{
             text: '最近一周',
@@ -192,7 +201,10 @@
         },
         value1: '',
         value2: ''
-      };
+      })
+      return{
+        ...toRefs(data)
+      }
     }
   };
 </script>
@@ -233,9 +245,10 @@
 </template>
 
 <script>
+import {reactive,toRefs} from "vue"
   export default {
-    data() {
-      return {
+    setup(){
+      const data = reactive({
         pickerOptions: {
           shortcuts: [{
             text: '本月',
@@ -261,7 +274,10 @@
         },
         value1: '',
         value2: ''
-      };
+      })
+      return{
+        ...toRefs(data)
+      }
     }
   };
 </script>
@@ -339,13 +355,17 @@
 </template>
 
 <script>
+import {reactive,toRefs} from "vue"
   export default {
-    data() {
-      return {
+    setup(){
+      const data = reactive({
         value1: '',
         value2: '',
         value3: ''
-      };
+      })
+      return {
+        ...toRefs(data)
+      }
     }
   };
 </script>
@@ -372,11 +392,15 @@
 </template>
 
 <script>
+import {reactive,toRefs} from "vue"
   export default {
-    data() {
-      return {
-        value: ''
-      };
+    setup(){
+      const data = reactive({
+          value: ''
+      })
+      return{
+        ...toRefs(data)
+      }
     }
   };
 </script>

diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md
@@ -41,9 +41,10 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 </template>
 
 <script>
+import {reactive,toRefs} from "vue"
   export default {
-    data() {
-      return {
+    setup(){
+      const data = reactive({
         pickerOptions: {
           shortcuts: [{
             text: '今天',
@@ -69,7 +70,10 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
         value1: '',
         value2: '',
         value3: ''
-      };
+      })
+      return{
+        ...toRefs(data)
+      }
     }
   };
 </script>
@@ -106,9 +110,10 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 </template>
 
 <script>
+import {reactive,toRefs} from "vue"
   export default {
-    data() {
-      return {
+    setup(){
+      const data = reactive({
         pickerOptions: {
           shortcuts: [{
             text: '最近一周',
@@ -138,7 +143,10 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
         },
         value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
         value2: ''
-      };
+      })
+      return{
+        ...toRefs(data)
+      }
     }
   };
 </script>
@@ -174,12 +182,16 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 </template>
 
 <script>
+import {reactive,toRefs} from "vue"
   export default {
-    data() {
-      return {
+    setup(){
+      const data = reactive({
         value1: '',
         value2: ''
-      };
+      })
+      return{
+        ...toRefs(data)
+      }
     }
   };
 </script>

diff --git a/examples/docs/zh-CN/dialog.md b/examples/docs/zh-CN/dialog.md
@@ -29,19 +29,22 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
 </el-dialog>
 
 <script>
+ import { ref, getCurrentInstance } from 'vue'
   export default {
-    data() {
-      return {
-        dialogVisible: false
-      };
-    },
-    methods: {
-      handleClose(done) {
-        this.$confirm('确认关闭？')
-          .then(_ => {
-            done();
+    setup() {
+      const dialogVisible = ref(false)
+      const handleClose = (done) => {
+        getCurrentInstance.ctx
+          .$confirm('确认关闭？')
+          .then((_) => {
+            done()
           })
-          .catch(_ => {});
+          .catch((_) => {})
+      }
+      // 暴露给模板
+      return {
+        dialogVisible,
+        handleClose
       }
     }
   };
@@ -100,6 +103,8 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 </el-dialog>
 
 <script>
+import { ref, getCurrentInstance } from 'vue'
+
   export default {
     data() {
       return {
@@ -165,12 +170,15 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
   </el-dialog>
 
 <script>
+ import { ref } from 'vue'
   export default {
-    data() {
+    setup() {
+      const outerVisible = ref(false)
+      const innerVisible = ref(false)
       return {
-        outerVisible: false,
-        innerVisible: false
-      };
+        outerVisible,
+        innerVisible
+      }
     }
   }
 </script>
@@ -204,13 +212,15 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 </el-dialog>
 
 <script>
+ import { ref } from 'vue'
   export default {
-    data() {
+    setup() {
+      const centerDialogVisible = ref(false)
       return {
-        centerDialogVisible: false
-      };
+        centerDialogVisible
+      }
     }
-  };
+  }
 </script>
 ```
 :::