From 56d9641791f69628b69151c1c5cbd8d6b3d85b86 Mon Sep 17 00:00:00 2001
From: "Xing.Wu" <329106954@qq.com>
Date: Tue, 8 Jun 2021 13:33:55 +0800
Subject: [PATCH] feat(docs): image code for composition (#2157)
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/image.md | 82 +++++++++++++++++++++++++++++++++++++
 website/docs/es/image.md    | 82 +++++++++++++++++++++++++++++++++++++
 website/docs/fr-FR/image.md | 82 +++++++++++++++++++++++++++++++++++++
 website/docs/jp/image.md    | 82 +++++++++++++++++++++++++++++++++++++
 website/docs/zh-CN/image.md | 82 +++++++++++++++++++++++++++++++++++++
 5 files changed, 410 insertions(+)

diff --git a/website/docs/en-US/image.md b/website/docs/en-US/image.md
index f66a20c7f8..035dc7947b 100644
--- a/website/docs/en-US/image.md
+++ b/website/docs/en-US/image.md
@@ -25,6 +25,25 @@ Besides the native features of img, support lazy load, custom placeholder and lo
     }
   }
 </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>
+-->
 ```
 :::
 
@@ -58,6 +77,23 @@ Besides the native features of img, support lazy load, custom placeholder and lo
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const src = ref('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg');
+
+      return {
+        src,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -109,6 +145,30 @@ Besides the native features of img, support lazy load, custom placeholder and lo
     }
   }
 </script>
+<!--
+<setup>
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const urls = ref([
+        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+      ]);
+
+      return {
+        urls,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -137,6 +197,28 @@ Besides the native features of img, support lazy load, custom placeholder and lo
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const url = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
+      const srcList = ref([
+        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
+      ]);
+
+      return {
+        url,
+        srcList,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/es/image.md b/website/docs/es/image.md
index 5c50c1e93d..7cc02d6390 100644
--- a/website/docs/es/image.md
+++ b/website/docs/es/image.md
@@ -26,6 +26,25 @@ Además de las características nativas de img, soporte de carga perezosa, marca
     }
   }
 </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>
+-->
 ```
 :::
 
@@ -59,6 +78,23 @@ Además de las características nativas de img, soporte de carga perezosa, marca
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const src = ref('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg');
+
+      return {
+        src,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -111,6 +147,30 @@ Además de las características nativas de img, soporte de carga perezosa, marca
     }
   }
 </script>
+<!--
+<setup>
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const urls = ref([
+        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+      ]);
+
+      return {
+        urls,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -139,6 +199,28 @@ Además de las características nativas de img, soporte de carga perezosa, marca
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const url = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
+      const srcList = ref([
+        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
+      ]);
+
+      return {
+        url,
+        srcList,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/fr-FR/image.md b/website/docs/fr-FR/image.md
index ffea6dece5..6334202d76 100644
--- a/website/docs/fr-FR/image.md
+++ b/website/docs/fr-FR/image.md
@@ -26,6 +26,25 @@ En plus des propriétés natives de img, ce composant supporte le lazy loading,
     }
   }
 </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>
+-->
 ```
 :::
 
@@ -59,6 +78,23 @@ En plus des propriétés natives de img, ce composant supporte le lazy loading,
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const src = ref('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg');
+
+      return {
+        src,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -110,6 +146,30 @@ En plus des propriétés natives de img, ce composant supporte le lazy loading,
     }
   }
 </script>
+<!--
+<setup>
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const urls = ref([
+        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+      ]);
+
+      return {
+        urls,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -138,6 +198,28 @@ En plus des propriétés natives de img, ce composant supporte le lazy loading,
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const url = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
+      const srcList = ref([
+        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
+      ]);
+
+      return {
+        url,
+        srcList,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/jp/image.md b/website/docs/jp/image.md
index 0a2ba64756..524fbdb3f0 100644
--- a/website/docs/jp/image.md
+++ b/website/docs/jp/image.md
@@ -25,6 +25,25 @@ imgのネイティブ機能の他に、遅延ロード、カスタムプレー
     }
   }
 </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>
+-->
 ```
 :::
 
@@ -58,6 +77,23 @@ imgのネイティブ機能の他に、遅延ロード、カスタムプレー
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const src = ref('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg');
+
+      return {
+        src,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -109,6 +145,30 @@ imgのネイティブ機能の他に、遅延ロード、カスタムプレー
     }
   }
 </script>
+<!--
+<setup>
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const urls = ref([
+        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+      ]);
+
+      return {
+        urls,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -137,6 +197,28 @@ imgのネイティブ機能の他に、遅延ロード、カスタムプレー
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const url = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
+      const srcList = ref([
+        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
+      ]);
+
+      return {
+        url,
+        srcList,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/zh-CN/image.md b/website/docs/zh-CN/image.md
index f86c433214..e7bc9d2a8f 100644
--- a/website/docs/zh-CN/image.md
+++ b/website/docs/zh-CN/image.md
@@ -25,6 +25,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>
+-->
 ```
 :::
 
@@ -58,6 +77,23 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const src = ref('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg');
+
+      return {
+        src,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -109,6 +145,30 @@
     }
   }
 </script>
+<!--
+<setup>
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const urls = ref([
+        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+      ]);
+
+      return {
+        urls,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -137,6 +197,28 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const url = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
+      const srcList = ref([
+        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
+      ]);
+
+      return {
+        url,
+        srcList,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::