fix: avater ... md

hug-sun · Nov 4, 2020 · 7fb82a2 · 7fb82a2
1 parent b8d15d7
commit 7fb82a2
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 42 deletions.
diff --git a/examples/docs/zh-CN/avatar.md b/examples/docs/zh-CN/avatar.md
@@ -31,13 +31,15 @@
   </el-row>
 </template>
 <script>
+import { reactive, toRefs } from 'vue'
   export default {
-    data () {
-      return {
-        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+    setup(){
+      let data=reactive({
+         circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
         squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
         sizeList: ["large", "medium", "small"]
-      }
+      })
+       return { ...toRefs(data) }
     }
   }
 </script>
@@ -82,11 +84,15 @@
 </template>
 <script>
   export default {
-    methods: {
-      errorHandler() {
+    setup(){
+      const errorHandler=()=>{
         return true
       }
+      return {
+        errorHandler
+      }
     }
+ 
   }
 </script>
 
@@ -108,14 +114,16 @@
   </div>
 </template>
 <script>
+import { reactive, toRefs } from 'vue'
   export default {
-    data() {
-      return {
-        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
-        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+    setup(){
+      let data=reactive({
+         fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+         url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      })
+       return {...toRefs(data)}
       }
     }
-  }
 </script>
 
 ```

diff --git a/examples/docs/zh-CN/calendar.md b/examples/docs/zh-CN/calendar.md
@@ -10,11 +10,13 @@
 </el-calendar>
 
 <script>
+import { reactive,toRefs } from 'vue'
   export default {
-    data() {
-      return {
-        value: new Date()
-      }
+    setup(){
+      const data=reactive({
+         value: new Date()
+      })
+      return {...toRefs(data)}
     }
   }
 </script>

diff --git a/examples/docs/zh-CN/infiniteScroll.md b/examples/docs/zh-CN/infiniteScroll.md
@@ -18,16 +18,14 @@
 </template>
 
 <script>
+import { ref } from 'vue'
   export default {
-    data () {
-      return {
-        count: 0
-      }
-    },
-    methods: {
-      load () {
-        this.count += 2
+    setup(){
+      const count = ref(0)
+      const load=()=>{
+        count.value += 2
       }
+      return {count,load}
     }
   }
 </script>
@@ -53,30 +51,38 @@
 </template>
 
 <script>
+import { ref, computed, getCurrentInstance } from 'vue'
   export default {
-    data () {
-      return {
-        count: 10,
-        loading: false
-      }
-    },
-    computed: {
-      noMore () {
-        return this.count >= 20
-      },
-      disabled () {
-        return this.loading || this.noMore
-      }
-    },
-    methods: {
-      load () {
-        this.loading = true
+    setup(){
+      const count = ref(10)
+      const loading = ref(false)
+      const self = getCurrentInstance().ctx
+
+      const noMore = computed(()=> {
+        // console.log(self.count == count.value)
+        return self.count >= 20
+      })
+
+      const disabled = computed(()=>{
+        return self.loading || noMore.value
+      })
+      const load = ()=>{
+        loading.value = true
         setTimeout(() => {
-          this.count += 2
-          this.loading = false
+          count.value += 2
+          loading.value = false
         }, 2000)
       }
+
+      return {
+        count,
+        loading,
+        noMore,
+        disabled,
+        load
+      }
     }
+    
   }
 </script>
 ```