Browse Source

docs(image): add icon import

eiinu 3 years ago
parent
commit
bfd79588e5
2 changed files with 28 additions and 5 deletions
  1. 14 2
      src/packages/__VUE/image/doc.en-US.md
  2. 14 3
      src/packages/__VUE/image/doc.md

+ 14 - 2
src/packages/__VUE/image/doc.en-US.md

@@ -96,10 +96,16 @@ The Image component provides a default `loading` prompt and supports custom cont
 <template>
   <nut-image width="100" height="100" showLoading>
     <template #loading>
-      <Loading width="16px" height="16px" name="loading"></Loading>
+      <Loading width="16px" height="16px" name="loading" />
     </template>
   </nut-image>
 </template>
+<script lang="ts">
+import { Loading } from '@nutui/icons-vue';
+export default {
+  components: { Loading }
+}
+</script>
 ```
 
 :::
@@ -114,10 +120,16 @@ The Image component provides a default loading failure warning and supports cust
 <template>
   <nut-image src="https://x" width="100" height="100" showLoading>
     <template #error>
-      <CircleClose width="16px" height="16px" name="circleClose"></CircleClose>
+      <CircleClose width="16px" height="16px" name="circleClose" />
     </template>
   </nut-image>
 </template>
+<script lang="ts">
+import { CircleClose } from '@nutui/icons-vue';
+export default {
+  components: { CircleClose }
+}
+</script>
 ```
 
 :::

+ 14 - 3
src/packages/__VUE/image/doc.md

@@ -13,7 +13,6 @@ import { Image } from '@nutui/nutui';
 
 const app = createApp();
 app.use();
-
 ```
 
 ### 基础用法
@@ -95,10 +94,16 @@ Image 组件提供了默认的加载中提示,支持通过 `loading` 插槽自
 <template>
   <nut-image width="100" height="100" showLoading>
     <template #loading>
-      <Loading width="16px" height="16px" name="loading"></Loading>
+      <Loading width="16px" height="16px" name="loading" />
     </template>
   </nut-image>
 </template>
+<script lang="ts">
+import { Loading } from '@nutui/icons-vue';
+export default {
+  components: { Loading }
+}
+</script>
 ```
 
 :::
@@ -113,10 +118,16 @@ Image 组件提供了默认的加载失败提示,支持通过 `error` 插槽
 <template>
   <nut-image src="https://x" width="100" height="100" showError>
     <template #error> 
-      <CircleClose width="16px" height="16px" name="circleClose"></CircleClose>
+      <CircleClose width="16px" height="16px" name="circleClose" />
     </template>
   </nut-image>
 </template>
+<script lang="ts">
+import { CircleClose } from '@nutui/icons-vue';
+export default {
+  components: { CircleClose }
+}
+</script>
 ```
 
 :::