feat(docs): avatar code for composition (#2158)

Co-authored-by: 无星 <32910694@qq.com>

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>
+-->
 ```
 :::
 

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>
+-->
 
 ```
 :::

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>
+-->
 
 ```
 :::

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>
+-->
 
 ```
 :::

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>
+-->
 
 ```
 :::