From 888973f34dec576c8e101b3bf68b9d63c630f46a Mon Sep 17 00:00:00 2001
From: "Xing.Wu" <329106954@qq.com>
Date: Tue, 8 Jun 2021 13:31:50 +0800
Subject: [PATCH] feat(docs): avatar code for composition (#2158)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 无星 <32910694@qq.com>
---
 website/docs/en-US/avatar.md | 53 +++++++++++++++++++++++++++++++++++-
 website/docs/es/avatar.md    | 53 ++++++++++++++++++++++++++++++++++++
 website/docs/fr-FR/avatar.md | 53 ++++++++++++++++++++++++++++++++++++
 website/docs/jp/avatar.md    | 53 ++++++++++++++++++++++++++++++++++++
 website/docs/zh-CN/avatar.md | 53 ++++++++++++++++++++++++++++++++++++
 5 files changed, 264 insertions(+), 1 deletion(-)

diff --git a/website/docs/en-US/avatar.md b/website/docs/en-US/avatar.md
index 57a62470f0..e8757c5484 100644
--- a/website/docs/en-US/avatar.md
+++ b/website/docs/en-US/avatar.md
@@ -41,6 +41,27 @@ use `shape` and `size` prop to set avatar's shape and size
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = 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(state),
+      };
+    },
+  });
+
+</setup>
+-->
 
 ```
 :::
@@ -89,7 +110,19 @@ fallback when image load error
     }
   }
 </script>
-
+<!--
+<setup>
+  import { defineComponent } from 'vue'
+  export default defineComponent({
+    setup() {
+      const errorHandler = () => true;
+      return {
+        errorHandler,
+      };
+    },
+  });
+</setup>
+-->
 ```
 :::
 
@@ -117,7 +150,25 @@ Set how the image fit its container for an image avatar, same as [object-fit](ht
     }
   }
 </script>
+<!--
+<setup>
 
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/es/avatar.md b/website/docs/es/avatar.md
index 2ff4dab968..6fa95a5aad 100644
--- a/website/docs/es/avatar.md
+++ b/website/docs/es/avatar.md
@@ -41,6 +41,27 @@ Use los props `shape` y `size` para establecer la forma y el tamaño del avatar
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = 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(state),
+      };
+    },
+  });
+
+</setup>
+-->
 
 ```
 :::
@@ -89,6 +110,19 @@ Fallback cuando se produce un error de carga de imagen
     }
   }
 </script>
+<!--
+<setup>
+  import { defineComponent } from 'vue'
+  export default defineComponent({
+    setup() {
+      const errorHandler = () => true;
+      return {
+        errorHandler,
+      };
+    },
+  });
+</setup>
+-->
 
 ```
 :::
@@ -117,6 +151,25 @@ Establezca cómo la imagen se ajusta a su contenedor para un avatar de imagen, i
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+</setup>
+-->
 
 ```
 :::
diff --git a/website/docs/fr-FR/avatar.md b/website/docs/fr-FR/avatar.md
index 50078de482..9b4239f750 100644
--- a/website/docs/fr-FR/avatar.md
+++ b/website/docs/fr-FR/avatar.md
@@ -42,6 +42,27 @@ utilisez les prop `shape` et` size` pour définir la forme et la taille de l'ava
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = 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(state),
+      };
+    },
+  });
+
+</setup>
+-->
 
 ```
 :::
@@ -90,6 +111,19 @@ fallback en cas d'erreur de chargement d'image
     }
   }
 </script>
+<!--
+<setup>
+  import { defineComponent } from 'vue'
+  export default defineComponent({
+    setup() {
+      const errorHandler = () => true;
+      return {
+        errorHandler,
+      };
+    },
+  });
+</setup>
+-->
 
 ```
 :::
@@ -118,6 +152,25 @@ Défini comment l'image s'adapte à son conteneur, pareil que [object-fit](https
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+</setup>
+-->
 
 ```
 :::
diff --git a/website/docs/jp/avatar.md b/website/docs/jp/avatar.md
index 55ac3bb11b..e530cb4cbc 100644
--- a/website/docs/jp/avatar.md
+++ b/website/docs/jp/avatar.md
@@ -41,6 +41,27 @@ avatorの形状とサイズを設定するために `shape` と `size` プロッ
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = 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(state),
+      };
+    },
+  });
+
+</setup>
+-->
 
 ```
 :::
@@ -89,6 +110,19 @@ avatorの形状とサイズを設定するために `shape` と `size` プロッ
     }
   }
 </script>
+<!--
+<setup>
+  import { defineComponent } from 'vue'
+  export default defineComponent({
+    setup() {
+      const errorHandler = () => true;
+      return {
+        errorHandler,
+      };
+    },
+  });
+</setup>
+-->
 
 ```
 :::
@@ -117,6 +151,25 @@ avatorの形状とサイズを設定するために `shape` と `size` プロッ
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+</setup>
+-->
 
 ```
 :::
diff --git a/website/docs/zh-CN/avatar.md b/website/docs/zh-CN/avatar.md
index e0b5d2f6b1..2bac4e4a3b 100644
--- a/website/docs/zh-CN/avatar.md
+++ b/website/docs/zh-CN/avatar.md
@@ -41,6 +41,27 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = 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(state),
+      };
+    },
+  });
+
+</setup>
+-->
 
 ```
 :::
@@ -89,6 +110,19 @@
     }
   }
 </script>
+<!--
+<setup>
+  import { defineComponent } from 'vue'
+  export default defineComponent({
+    setup() {
+      const errorHandler = () => true;
+      return {
+        errorHandler,
+      };
+    },
+  });
+</setup>
+-->
 
 ```
 :::
@@ -117,6 +151,25 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+</setup>
+-->
 
 ```
 :::