fix(badge): 使用文档优化

src/packages/__VUE/badge/demo.vue

@@ -3,44 +3,44 @@
     <h2>{{ translate('title') }}</h2>
     <nut-row>
       <nut-badge :value="8">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge :value="76">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge value="NEW">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge dot>
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
     </nut-row>
     <h2>{{ translate('title1') }}</h2>
     <nut-row>
       <nut-badge :value="200" :max="9">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge :value="200" :max="20">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge :value="200" :max="99">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
     </nut-row>
 
     <h2>{{ translate('title2') }}</h2>
     <nut-row>
       <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
     </nut-row>
 
@@ -50,32 +50,32 @@
         <template #icons>
           <Check color="#ffffff" width="12px" height="12px"></Check>
         </template>
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge>
         <template #icons>
           <Link color="#ffffff" width="12px" height="12px"></Link>
         </template>
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge>
         <template #icons>
           <Download color="#ffffff" width="12px" height="12px"></Download>
         </template>
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
     </nut-row>
 
     <h2>{{ translate('title4') }}</h2>
     <nut-row>
       <nut-badge :value="8" top="5" right="5">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge :value="76" top="10" right="10">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge value="NEW">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
     </nut-row>
 
@@ -113,7 +113,7 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
-  component: { Check, Download, Link },
+  components: { Check, Download, Link },
   setup() {
     initTranslate();
     return {

src/packages/__VUE/badge/doc.en-US.md

@@ -27,16 +27,16 @@ app.use(Badge);
 <template>
   <div class="demo">
     <nut-badge :value="8">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge :value="76">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge value="NEW">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge dot>
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
   </div>
 </template>
@@ -60,13 +60,13 @@ app.use(Badge);
 <template>
   <div class="demo">
     <nut-badge :value="200" :max="9">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge :value="200" :max="20">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge :value="200" :max="99">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
   </div>
 </template>
@@ -90,16 +90,16 @@ app.use(Badge);
 <template>
   <div class="demo">
     <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
   </div>
 </template>
@@ -126,19 +126,19 @@ app.use(Badge);
       <template #icons>
         <Check color="#ffffff" width="12px" height="12px"></Check>
       </template>
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge>
       <template #icons>
         <Link color="#ffffff" width="12px" height="12px"></Link>
       </template>
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge>
       <template #icons>
         <Download color="#ffffff" width="12px" height="12px"></Download>
       </template>
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
   </div>
 </template>
@@ -166,13 +166,13 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 <template>
   <div class="demo">
     <nut-badge :value="8" top="5" right="5">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge :value="76" top="10" right="10">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge value="NEW">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
    </div>
 </template>

src/packages/__VUE/badge/doc.md

@@ -27,16 +27,16 @@ app.use(Badge);
 <template>
   <div class="demo">
     <nut-badge :value="8">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge :value="76">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge value="NEW">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge dot>
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
   </div>
 </template>
@@ -60,13 +60,13 @@ app.use(Badge);
 <template>
   <div class="demo">
     <nut-badge :value="200" :max="9">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge :value="200" :max="20">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge :value="200" :max="99">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
   </div>
 </template>
@@ -90,16 +90,16 @@ app.use(Badge);
 <template>
   <div class="demo">
     <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
   </div>
 </template>
@@ -126,19 +126,19 @@ app.use(Badge);
       <template #icons>
         <Check color="#ffffff" width="12px" height="12px"></Check>
       </template>
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge>
       <template #icons>
         <Link color="#ffffff" width="12px" height="12px"></Link>
       </template>
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge>
       <template #icons>
        <Download color="#ffffff" width="12px" height="12px"></Download>
       </template>
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
   </div>
 </template>
@@ -166,13 +166,13 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 <template>
   <div class="demo">
     <nut-badge :value="8" top="5" right="5">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge :value="76" top="10" right="10">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
     <nut-badge value="NEW">
-      <nut-avatar icon="my" shape="square"></nut-avatar>
+      <nut-avatar shape="square"></nut-avatar>
     </nut-badge>
    </div>
 </template>

src/sites/mobile-taro/vue/src/exhibition/pages/badge/index.vue

@@ -3,44 +3,44 @@
     <h2>默认用法</h2>
     <nut-row>
       <nut-badge :value="8">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge :value="76">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge value="NEW">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge dot>
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
     </nut-row>
     <h2>最大值</h2>
     <nut-row>
       <nut-badge :value="200" :max="9">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge :value="200" :max="20">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge :value="200" :max="99">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
     </nut-row>
 
     <h2>自定义颜色</h2>
     <nut-row>
       <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
     </nut-row>
 
@@ -48,34 +48,34 @@
     <nut-row>
       <nut-badge>
         <template #icons>
-          <nut-icon name="Check" color="#ffffff" size="12"></nut-icon>
+          <Check color="#ffffff" width="12px" height="12px"></Check>
         </template>
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge>
         <template #icons>
-          <nut-icon name="link" color="#ffffff" size="12"></nut-icon>
+          <Link color="#ffffff" width="12px" height="12px"></Link>
         </template>
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge>
         <template #icons>
-          <nut-icon name="download" color="#ffffff" size="12"></nut-icon>
+          <Download color="#ffffff" width="12px" height="12px"></Download>
         </template>
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
     </nut-row>
 
     <h2>自定义位置</h2>
     <nut-row>
       <nut-badge :value="8" top="5" right="5">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge :value="76" top="10" right="10">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge value="NEW">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"></nut-avatar>
       </nut-badge>
     </nut-row>
 
@@ -87,10 +87,8 @@
     </nut-row>
   </view>
 </template>
-<script lang="ts">
-export default {
-  setup() {}
-};
+<script lang="ts" setup>
+import { Check, Link, Download } from '@nutui/icons-vue';
 </script>
 
 <style lang="scss">