小程序demo 文档对比修改 (#2012)

src/packages/__VUE/addresslist/components/GeneralShell.vue

@@ -1,14 +1,6 @@
 <template>
-  <div class="nut-address-list-general">
-    <item-contents
-      :item="item"
-      @delIcon="delShellClick"
-      @editIcon="editShellClick"
-      @itemClick="itemShellClick"
-      @touchstart="holddownstart"
-      @touchend="holddownend"
-      @touchmove="holddownmove"
-    >
+  <div class="nut-address-list-general" v-if="!swipeEdition">
+    <component :is="renderCompontent()" @touchstart="holddownstart" @touchend="holddownend" @touchmove="holddownmove">
       <template v-slot:contentTop>
         <slot name="contentInfo"></slot>
       </template>
@@ -18,7 +10,7 @@
       <template v-slot:contentAddr>
         <slot name="contentAddrs"></slot>
       </template>
-    </item-contents>
+    </component>
     <div class="nut-address-list-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
       <slot name="longpressAll">
         <div class="nut-address-list-general__mask-copy" @click="copyCLick">
@@ -27,16 +19,36 @@
         <div class="nut-address-list-general__mask-set" @click="setDefault">
           <div class="nut-address-list-mask-contain"> 设置<br />默认 </div>
         </div>
-        <div class="nut-address-list-general__mask-del" @click="delClick">
+        <div class="nut-address-list-general__mask-del" @click="delLongClick">
           <div class="nut-address-list-mask-contain"> 删除<br />地址 </div>
         </div>
       </slot>
     </div>
     <div class="nut-address-list__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>
   </div>
+  <nut-swipe v-else>
+    <div class="nut-address-list-swipe">
+      <component :is="renderCompontent()" @touchmove="swipemove" @touchstart="swipestart">
+        <template v-slot:contentTop>
+          <slot name="contentInfo"></slot>
+        </template>
+        <template v-slot:contentIcon>
+          <slot name="contentIcons"></slot>
+        </template>
+        <template v-slot:contentAddr>
+          <slot name="contentAddrs"></slot>
+        </template>
+      </component>
+    </div>
+    <template #right>
+      <slot name="swiperightbtn">
+        <nut-button shape="square" style="height: 100%" type="danger" @click="swipeDelClick">删除</nut-button>
+      </slot>
+    </template>
+  </nut-swipe>
 </template>
 <script lang="ts">
-import { ref } from 'vue';
+import { ref, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('addresslist-general');
 import ItemContents from './ItemContents.vue';
@@ -50,29 +62,53 @@ export default create({
     longPress: {
       type: Boolean,
       default: false
+    },
+    swipeEdition: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['delIcon', 'editIcon', 'itemClick', 'longDown', 'longCopy', 'longSet', 'longDel'],
+  emits: ['delIcon', 'editIcon', 'itemClick', 'longDown', 'longCopy', 'longSet', 'longDel', 'swipeDel'],
   components: {
     ItemContents
   },
 
   setup(props, { emit }) {
+    const renderCompontent = () => {
+      return h(ItemContents, {
+        item: props.item,
+        onDelIcon(event: Event) {
+          delClick(event);
+        },
+        onEditIcon(event: Event) {
+          editClick(event);
+        },
+        onItemClick(event: Event) {
+          itemClick(event);
+        }
+      });
+    };
     let loop: any = null;
+    const moveRef = ref(false);
     const showMaskRef = ref(false);
 
-    const delShellClick = (event: Event) => {
+    const delClick = (event: Event) => {
       emit('delIcon', event, props.item);
       event.stopPropagation();
     };
-    const editShellClick = (event: Event) => {
+    const editClick = (event: Event) => {
       emit('editIcon', event, props.item);
       event.stopPropagation();
     };
-    const itemShellClick = (event: Event) => {
+    const itemClick = (event: Event) => {
+      if (moveRef.value) return;
       emit('itemClick', event, props.item);
       event.stopPropagation();
     };
+    const delLongClick = (event: Event) => {
+      emit('longDel', event, props.item);
+      event.stopPropagation();
+    };
     const holdingFunc = (event: Event) => {
       loop = 0;
       showMaskRef.value = true;
@@ -103,10 +139,6 @@ export default create({
       emit('longSet', event, props.item);
       event.stopPropagation();
     };
-    const delClick = (event: Event) => {
-      emit('longDel', event, props.item);
-      event.stopPropagation();
-    };
     const maskClick = (event: Event) => {
       if (loop != 0) {
         // 排除长按时触发点击的情况
@@ -115,20 +147,34 @@ export default create({
       event.stopPropagation();
       event.preventDefault();
     };
+    const swipeDelClick = (event: Event) => {
+      emit('swipeDel', event, props.item);
+      event.stopPropagation();
+    };
+    const swipestart = () => {
+      moveRef.value = false;
+    };
+    const swipemove = () => {
+      moveRef.value = true;
+    };
 
     return {
-      delShellClick,
-      editShellClick,
-      itemShellClick,
+      renderCompontent,
+      showMaskRef,
+      itemClick,
+      editClick,
+      delClick,
+      delLongClick,
       holddownstart,
       holddownmove,
       holddownend,
-      showMaskRef,
-      delClick,
       copyCLick,
       hideMaskClick,
       setDefault,
-      maskClick
+      maskClick,
+      swipeDelClick,
+      swipestart,
+      swipemove
     };
   }
 });

src/packages/__VUE/addresslist/components/SwipeShell.vue

@@ -1,85 +0,0 @@
-<template>
-  <nut-swipe>
-    <div class="nut-address-list-swipe">
-      <item-contents
-        :item="item"
-        @delIcon="delClick"
-        @editIcon="editClick"
-        @itemClick="itemClick"
-        @touchmove="swipemove"
-        @touchstart="swipestart"
-      >
-        <template v-slot:contentTop>
-          <slot name="contentInfo"></slot>
-        </template>
-        <template v-slot:contentIcon>
-          <slot name="contentIcons"></slot>
-        </template>
-        <template v-slot:contentAddr>
-          <slot name="contentAddrs"></slot>
-        </template>
-      </item-contents>
-    </div>
-    <template #right>
-      <slot name="swiperightbtn">
-        <nut-button shape="square" style="height: 100%" type="danger" @click="swipeDelClick">删除</nut-button>
-      </slot>
-    </template>
-  </nut-swipe>
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { create } = createComponent('addresslist-swipe');
-import ItemContents from './ItemContents.vue';
-
-export default create({
-  props: {
-    item: {
-      type: Object,
-      default: {}
-    }
-  },
-  emits: ['delIcon', 'editIcon', 'itemClick', 'swipeDel'],
-  components: {
-    ItemContents
-  },
-
-  setup(props, { emit }) {
-    const moveRef = ref(false);
-    const delClick = (event: Event) => {
-      emit('delIcon', event, props.item);
-      event.stopPropagation();
-    };
-    const editClick = (event: Event) => {
-      emit('editIcon', event, props.item);
-      event.stopPropagation();
-    };
-    const itemClick = (event: Event) => {
-      if (moveRef.value) return;
-      emit('itemClick', event, props.item);
-      event.stopPropagation();
-    };
-    const swipeDelClick = (event: Event) => {
-      emit('swipeDel', event, props.item);
-      event.stopPropagation();
-    };
-
-    const swipestart = () => {
-      moveRef.value = false;
-    };
-    const swipemove = () => {
-      moveRef.value = true;
-    };
-
-    return {
-      delClick,
-      editClick,
-      itemClick,
-      swipeDelClick,
-      swipestart,
-      swipemove
-    };
-  }
-});
-</script>

src/packages/__VUE/addresslist/demo.vue

@@ -24,7 +24,7 @@
       :dataMapOptions="dataMapOptions"
     >
     </nut-address-list>
-    <h2>{{ translate('title1') }}</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-address-list
       :data="data"
       swipeEdition

src/packages/__VUE/addresslist/index.taro.vue

@@ -1,57 +1,35 @@
 <template>
   <div :class="classes">
-    <template v-if="!swipeEdition">
-      <general-shell
-        v-for="(item, index) of dataArray"
-        :key="index"
-        :item="item"
-        :longPress="longPress"
-        @delIcon="clickDelIcon"
-        @editIcon="clickEditIcon"
-        @itemClick="clickContentItem"
-        @swipeDel="clickSwipeDel"
-        @longCopy="clickLongCopy"
-        @longSet="clickLongSet"
-        @longDel="clickLongDel"
-      >
-        <template v-slot:contentInfo v-if="longPress">
-          <slot name="iteminfos"></slot>
-        </template>
-        <template v-slot:contentIcons v-if="longPress">
-          <slot name="itemicon"></slot>
-        </template>
-        <template v-slot:contentAddrs v-if="longPress">
-          <slot name="itemaddr"></slot>
-        </template>
-        <template v-slot:longpressAll v-if="longPress">
-          <slot name="longpressbtns"></slot>
-        </template>
-      </general-shell>
-    </template>
-    <template v-if="swipeEdition">
-      <swipe-shell
-        v-for="(item, index) of dataArray"
-        :key="index"
-        :item="item"
-        @delIcon="clickDelIcon"
-        @editIcon="clickEditIcon"
-        @itemClick="clickContentItem"
-        @swipeDel="clickSwipeDel"
-      >
-        <template v-slot:contentInfo>
-          <slot name="iteminfos"></slot>
-        </template>
-        <template v-slot:contentIcons>
-          <slot name="itemicon"></slot>
-        </template>
-        <template v-slot:contentAddrs>
-          <slot name="itemaddr"></slot>
-        </template>
-        <template v-slot:swiperightbtn>
-          <slot name="swiperight"></slot>
-        </template>
-      </swipe-shell>
-    </template>
+    <general-shell
+      v-for="(item, index) of dataArray"
+      :key="index"
+      :item="item"
+      :longPress="longPress"
+      :swipeEdition="swipeEdition"
+      @delIcon="clickDelIcon"
+      @editIcon="clickEditIcon"
+      @itemClick="clickContentItem"
+      @swipeDel="clickSwipeDel"
+      @longCopy="clickLongCopy"
+      @longSet="clickLongSet"
+      @longDel="clickLongDel"
+    >
+      <template v-slot:contentInfo>
+        <slot name="iteminfos"></slot>
+      </template>
+      <template v-slot:contentIcons>
+        <slot name="itemicon"></slot>
+      </template>
+      <template v-slot:contentAddrs>
+        <slot name="itemaddr"></slot>
+      </template>
+      <template v-slot:longpressAll v-if="longPress">
+        <slot name="longpressbtns"></slot>
+      </template>
+      <template v-slot:swiperightbtn v-if="swipeEdition">
+        <slot name="swiperight"></slot>
+      </template>
+    </general-shell>
     <div class="nut-address-list__bottom" v-if="showBottomButton" @click="addAddress">
       <nut-button block type="danger">{{ translate('addAddress') }}</nut-button>
     </div>
@@ -61,7 +39,6 @@
 import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('address-list');
-import SwipeShell from './components/SwipeShell.vue';
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
 import Button from '../button/index.taro.vue';
@@ -90,7 +67,6 @@ export default create({
     }
   },
   components: {
-    SwipeShell,
     GeneralShell,
     [Button.name]: Button,
     [Swipe.name]: Swipe

src/packages/__VUE/addresslist/index.vue

@@ -1,57 +1,35 @@
 <template>
   <div :class="classes">
-    <template v-if="!swipeEdition">
-      <general-shell
-        v-for="(item, index) of dataArray"
-        :key="index"
-        :item="item"
-        :longPress="longPress"
-        @delIcon="clickDelIcon"
-        @editIcon="clickEditIcon"
-        @itemClick="clickContentItem"
-        @swipeDel="clickSwipeDel"
-        @longCopy="clickLongCopy"
-        @longSet="clickLongSet"
-        @longDel="clickLongDel"
-      >
-        <template v-slot:contentInfo v-if="longPress">
-          <slot name="iteminfos"></slot>
-        </template>
-        <template v-slot:contentIcons v-if="longPress">
-          <slot name="itemicon"></slot>
-        </template>
-        <template v-slot:contentAddrs v-if="longPress">
-          <slot name="itemaddr"></slot>
-        </template>
-        <template v-slot:longpressAll v-if="longPress">
-          <slot name="longpressbtns"></slot>
-        </template>
-      </general-shell>
-    </template>
-    <template v-if="swipeEdition">
-      <swipe-shell
-        v-for="(item, index) of dataArray"
-        :key="index"
-        :item="item"
-        @delIcon="clickDelIcon"
-        @editIcon="clickEditIcon"
-        @itemClick="clickContentItem"
-        @swipeDel="clickSwipeDel"
-      >
-        <template v-slot:contentInfo>
-          <slot name="iteminfos"></slot>
-        </template>
-        <template v-slot:contentIcons>
-          <slot name="itemicon"></slot>
-        </template>
-        <template v-slot:contentAddrs>
-          <slot name="itemaddr"></slot>
-        </template>
-        <template v-slot:swiperightbtn>
-          <slot name="swiperight"></slot>
-        </template>
-      </swipe-shell>
-    </template>
+    <general-shell
+      v-for="(item, index) of dataArray"
+      :key="index"
+      :item="item"
+      :longPress="longPress"
+      :swipeEdition="swipeEdition"
+      @delIcon="clickDelIcon"
+      @editIcon="clickEditIcon"
+      @itemClick="clickContentItem"
+      @swipeDel="clickSwipeDel"
+      @longCopy="clickLongCopy"
+      @longSet="clickLongSet"
+      @longDel="clickLongDel"
+    >
+      <template v-slot:contentInfo>
+        <slot name="iteminfos"></slot>
+      </template>
+      <template v-slot:contentIcons>
+        <slot name="itemicon"></slot>
+      </template>
+      <template v-slot:contentAddrs>
+        <slot name="itemaddr"></slot>
+      </template>
+      <template v-slot:longpressAll v-if="longPress">
+        <slot name="longpressbtns"></slot>
+      </template>
+      <template v-slot:swiperightbtn v-if="swipeEdition">
+        <slot name="swiperight"></slot>
+      </template>
+    </general-shell>
     <div class="nut-address-list__bottom" v-if="showBottomButton" @click="addAddress">
       <nut-button block type="danger">{{ translate('addAddress') }}</nut-button>
     </div>
@@ -61,7 +39,6 @@
 import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('address-list');
-import SwipeShell from './components/SwipeShell.vue';
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
 import Button from '../button/index.vue';
@@ -90,7 +67,6 @@ export default create({
     }
   },
   components: {
-    SwipeShell,
     GeneralShell,
     [Button.name]: Button,
     [Swipe.name]: Swipe

src/packages/__VUE/avatar/index.scss

@@ -7,6 +7,7 @@
   flex: 0 0 auto; // 防止被压缩
   text-align: center;
   img {
+    display: block;
     width: 100%;
     height: 100%;
   }

src/packages/__VUE/avatar/index.taro.vue

@@ -6,9 +6,7 @@
     v-if="showMax || !avatarGroup?.props?.maxCount || index <= avatarGroup?.props?.maxCount"
   >
     <template v-if="!avatarGroup?.props?.maxCount || index <= avatarGroup?.props?.maxCount">
-      <view>
-        <slot></slot>
-      </view>
+      <slot></slot>
     </template>
     <!-- 折叠头像 -->
     <template v-if="showMax && avatarGroup?.props?.maxCount">

src/packages/__VUE/price/doc.md

@@ -84,6 +84,7 @@ app.use(Price);
     <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
 </template>
 ```
+:::
 
 :::
 

src/packages/__VUE/steps/demo.vue

@@ -61,7 +61,7 @@
         <nut-step :content="translate('content3')" :title="translate('start')">3</nut-step>
       </nut-steps>
     </div>
-    <h2>{{ translate('verstep') }}</h2>
+    <h2>{{ translate('verstepDot') }}</h2>
     <div class="steps-wrapper" style="height: 350px; padding: 15px 40px">
       <nut-steps current="2" direction="vertical" progress-dot>
         <nut-step :content="translate('content1')" :title="translate('complete')">1</nut-step>
@@ -105,7 +105,8 @@ const initTranslate = () =>
       content3: '收货地址为：北京市经济技术开发区科创十一街18号院京东大厦',
       content4: '收货地址为',
       content5: '北京市经济技术开发区科创十一街18号院京东大厦',
-      verstep: '竖向步骤条'
+      verstep: '竖向步骤条',
+      verstepDot: '点状步骤和垂直方向'
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -126,7 +127,8 @@ const initTranslate = () =>
         'The receiving address is Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological Development Zone',
       content4: 'The receiving address is',
       content5: 'Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological Development Zone',
-      verstep: 'Vertical step bar'
+      verstep: 'Vertical step bar',
+      verstepDot: 'Point steps and vertical orientation'
     }
   });
 export default createDemo({

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

@@ -48,6 +48,38 @@ app.use(Step);
 ```
 :::
 
+### Basic Usage(Dot)
+
+:::demo
+
+```html
+<template>
+  <nut-steps :current="current2" progress-dot>
+    <nut-step></nut-step>
+    <nut-step></nut-step>
+    <nut-step></nut-step>
+  </nut-steps>
+  <div class="steps-button">
+    <nut-button size="mini" type="primary" @click="handleStep('current2')">{{ translate('next') }}</nut-button>
+  </div>
+</template>
+<script>
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        current2: 1,
+      });
+      const handleClickStep = (index: number) => {
+        console.log(index)
+      };
+      return { ...toRefs(state), handleClickStep };
+    }
+  };
+</script>
+```
+:::
+
 ### Title and description information
 
 :::demo

src/packages/__VUE/steps/doc.md

@@ -48,6 +48,38 @@ app.use(Step);
 ```
 :::
 
+### 基本用法（点状）
+
+:::demo
+
+```html
+<template>
+  <nut-steps :current="current2" progress-dot>
+    <nut-step></nut-step>
+    <nut-step></nut-step>
+    <nut-step></nut-step>
+  </nut-steps>
+  <div class="steps-button">
+    <nut-button size="mini" type="primary" @click="handleStep('current2')">{{ translate('next') }}</nut-button>
+  </div>
+</template>
+<script>
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        current2: 1,
+      });
+      const handleClickStep = (index: number) => {
+        console.log(index)
+      };
+      return { ...toRefs(state), handleClickStep };
+    }
+  };
+</script>
+```
+:::
+
 ### 标题和描述信息
 
 :::demo

src/packages/__VUE/steps/doc.taro.md

@@ -48,6 +48,38 @@ app.use(Step);
 ```
 :::
 
+### 基本用法（点状）
+
+:::demo
+
+```html
+<template>
+  <nut-steps :current="current2" progress-dot>
+    <nut-step></nut-step>
+    <nut-step></nut-step>
+    <nut-step></nut-step>
+  </nut-steps>
+  <div class="steps-button">
+    <nut-button size="mini" type="primary" @click="handleStep('current2')">{{ translate('next') }}</nut-button>
+  </div>
+</template>
+<script>
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        current2: 1,
+      });
+      const handleClickStep = (index: number) => {
+        console.log(index)
+      };
+      return { ...toRefs(state), handleClickStep };
+    }
+  };
+</script>
+```
+:::
+
 ### 标题和描述信息
 
 :::demo

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

@@ -274,6 +274,70 @@ Support dynamic addition / deletion of pictures
 
 :::
 
+### 自定义指示器(异步3s)
+
+:::demo
+
+```html
+<template>
+  <nut-swiper :init-page="page" :loop="true" @change="change" auto-play="2000">
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
+      </nut-swiper-item>
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      </nut-swiper-item>
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
+      </nut-swiper-item>
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
+      </nut-swiper-item>
+      <template v-slot:page>
+        <div class="page"> {{ current1 }}/4 </div>
+      </template>
+  </nut-swiper>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        page: 0,
+        current1: 1
+      });
+      const change = (index: number) => {
+        state.current1 = index + 1;
+      };
+      return { ...toRefs(state), change };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .nut-swiper-item {
+    line-height: 150px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .page {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 46px;
+    height: 22px;
+    background: rgba(0, 0, 0, 0.33);
+    border-radius: 22px;
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+  }
+</style>
+```
+
+:::
+
 ### Manual switching
 
 You can manually switch through `api` (`prev`, `next`)

src/packages/__VUE/swiper/doc.md

@@ -274,6 +274,70 @@ app.use(SwiperItem);
 
 :::
 
+### 自定义指示器(异步3s)
+
+:::demo
+
+```html
+<template>
+  <nut-swiper :init-page="page" :loop="true" @change="change" auto-play="2000">
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
+      </nut-swiper-item>
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      </nut-swiper-item>
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
+      </nut-swiper-item>
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
+      </nut-swiper-item>
+      <template v-slot:page>
+        <div class="page"> {{ current1 }}/4 </div>
+      </template>
+  </nut-swiper>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        page: 0,
+        current1: 1
+      });
+      const change = (index: number) => {
+        state.current1 = index + 1;
+      };
+      return { ...toRefs(state), change };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .nut-swiper-item {
+    line-height: 150px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .page {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 46px;
+    height: 22px;
+    background: rgba(0, 0, 0, 0.33);
+    border-radius: 22px;
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+  }
+</style>
+```
+
+:::
+
 ### 手动切换
 
 可通过 `API`(`prev`,`next`)进行手动切换

src/packages/__VUE/swiper/doc.taro.md

@@ -274,6 +274,70 @@ app.use(SwiperItem);
 
 :::
 
+### 自定义指示器(异步3s)
+
+:::demo
+
+```html
+<template>
+  <nut-swiper :init-page="page" :loop="true" @change="change" auto-play="2000">
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
+      </nut-swiper-item>
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      </nut-swiper-item>
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
+      </nut-swiper-item>
+      <nut-swiper-item>
+        <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
+      </nut-swiper-item>
+      <template v-slot:page>
+        <div class="page"> {{ current1 }}/4 </div>
+      </template>
+  </nut-swiper>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        page: 0,
+        current1: 1
+      });
+      const change = (index: number) => {
+        state.current1 = index + 1;
+      };
+      return { ...toRefs(state), change };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .nut-swiper-item {
+    line-height: 150px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .page {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 46px;
+    height: 22px;
+    background: rgba(0, 0, 0, 0.33);
+    border-radius: 22px;
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+  }
+</style>
+```
+
+:::
+
 ### 手动切换
 
 可通过 `API`(`prev`,`next`)进行手动切换

src/packages/__VUE/switch/demo.vue

@@ -2,32 +2,27 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked" />
+      <nut-switch v-model="checked1" />
     </nut-cell>
 
     <h2>{{ translate('title1') }}</h2>
     <nut-cell>
-      <nut-switch
-        :v-model="translate('text1')"
-        :activeValue="translate('text1')"
-        :inactiveValue="translate('text2')"
-        @change="change"
-      />
+      <nut-switch :v-model="translate('text1')" :activeValue="translate('text1')" :inactiveValue="translate('text2')" />
     </nut-cell>
 
     <h2>{{ translate('title2') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked" disable />
+      <nut-switch v-model="checked2" disable />
     </nut-cell>
 
     <h2>{{ translate('title3') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked" loading color="red" />
+      <nut-switch v-model="checked3" loading color="red" />
     </nut-cell>
 
     <h2>{{ translate('title4') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked" @change="change" />
+      <nut-switch v-model="checked4" @change="change" />
     </nut-cell>
 
     <h2>{{ translate('title5') }}</h2>
@@ -37,14 +32,13 @@
 
     <h2>{{ translate('title6') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked" @change="change" active-color="blue" />
+      <nut-switch v-model="checked6" active-color="blue" />
     </nut-cell>
 
     <h2>{{ translate('title7') }}</h2>
     <nut-cell>
       <nut-switch
-        v-model="checked"
-        @change="change"
+        v-model="checked7"
         :active-text="translate('text1')"
         :inactive-text="translate('text2')"
         class="switch-demo1"
@@ -53,7 +47,7 @@
 
     <h2>{{ translate('title8') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked" @change="change" loading>
+      <nut-switch v-model="checked8" loading>
         <template #icon><Loading name="loading" /></template>
       </nut-switch>
     </nut-cell>
@@ -61,7 +55,7 @@
 </template>
 
 <script lang="ts">
-import { ref, getCurrentInstance } from 'vue';
+import { ref, reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Loading } from '@nutui/icons-vue';
 import { showToast } from '@/packages/nutui.vue';
@@ -100,17 +94,25 @@ export default createDemo({
   components: { Loading },
   setup() {
     initTranslate();
-    const checked = ref(true);
+    const data = reactive({
+      checked1: true,
+      checked2: true,
+      checked3: true,
+      checked4: true,
+      checked6: true,
+      checked7: true,
+      checked8: true
+    });
     const checkedAsync = ref(true);
     const loadingAsync = ref(false);
 
     // const checkedStr = ref('开');
 
-    const change = (value: boolean, event: Event) => {
+    const change = (value: boolean) => {
       showToast.text(`value：${value}`);
     };
 
-    const changeAsync = (value: boolean, event: Event) => {
+    const changeAsync = (value: boolean) => {
       showToast.text(`after 2 second： ${value}`);
       loadingAsync.value = true;
       setTimeout(() => {
@@ -120,7 +122,7 @@ export default createDemo({
     };
 
     return {
-      checked,
+      ...toRefs(data),
       checkedAsync,
       // checkedStr,
       loadingAsync,

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

@@ -160,6 +160,27 @@ app.use(Switch);
 ```
 :::
 
+### Custom loading icon
+:::demo
+``` html
+<template>
+  <nut-switch v-model="checked" loading>
+    <template #icon><Loading name="loading" /></template>
+  </nut-switch>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  import { Loading } from '@nutui/icons-vue';
+  export default {
+    setup() {
+      const checked = ref(true);
+      return { checked };
+    }
+  };
+</script>
+```
+:::
+
 ## API
 
 ### Props

src/packages/__VUE/switch/doc.md

@@ -84,7 +84,7 @@ app.use(Switch);
     setup() {
       const checked = ref(true);
       const change = (value: boolean, event: Event) => {
-        showToast.text(`触发了change事件，开关状态：${value}`);
+        showToast.text(`value：${value}`);
       };
       return {
         checked,
@@ -160,6 +160,27 @@ app.use(Switch);
 ```
 :::
 
+### 自定义加载图标
+:::demo
+``` html
+<template>
+  <nut-switch v-model="checked" loading>
+    <template #icon><Loading name="loading" /></template>
+  </nut-switch>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  import { Loading } from '@nutui/icons-vue';
+  export default {
+    setup() {
+      const checked = ref(true);
+      return { checked };
+    }
+  };
+</script>
+```
+:::
+
 ## API
 
 ### Props

src/packages/__VUE/switch/doc.taro.md

@@ -82,7 +82,7 @@ app.use(Switch);
     setup() {
       const checked = ref(true);
       const change = (value: boolean, event: Event) => {
-        console.log(`触发了change事件，开关状态：${value}`);
+        console.log(`value：${value}`);
       };
       return {
         checked,
@@ -155,6 +155,27 @@ app.use(Switch);
 ```
 :::
 
+### 自定义加载图标
+:::demo
+``` html
+<template>
+  <nut-switch v-model="checked" loading>
+    <template #icon><Loading name="loading" /></template>
+  </nut-switch>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  import { Loading } from '@nutui/icons-vue';
+  export default {
+    setup() {
+      const checked = ref(true);
+      return { checked };
+    }
+  };
+</script>
+```
+:::
+
 ## API
 
 ### Props

src/sites/mobile-taro/vue/src/basic/pages/popup/index.vue

@@ -40,6 +40,9 @@
     <h2>圆角弹框</h2>
     <nut-cell title="圆角弹框" is-link @click="showRound = true"></nut-cell>
     <nut-popup position="bottom" closeable round :style="{ height: '30%' }" v-model:visible="showRound"></nut-popup>
+    <h2>指定挂载节点</h2>
+    <nut-cell title="指定挂载节点" is-link @click="showTeleport = true"></nut-cell>
+    <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" v-model:visible="showTeleport">app</nut-popup>
     <h2>多层堆叠</h2>
     <nut-cell title="多层堆叠" is-link @click="showPop1 = true"></nut-cell>
     <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop1">
@@ -68,7 +71,8 @@ export default {
       showRound: false,
       showCombination: false,
       showPop1: false,
-      showPop2: false
+      showPop2: false,
+      showTeleport: false
     });
     return { ...toRefs(state) };
   }

src/sites/mobile-taro/vue/src/business/pages/category/index.vue

@@ -10,7 +10,7 @@
       <nut-category-pane type="text" :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane
     ></nut-category>
 
-    <h2>自定义</h2>
+    <h2>自定义分类</h2>
     <nut-category
       ><nut-category-pane type="custom" :customCategory="customCategory" @onChange="changeCustom"> </nut-category-pane
     ></nut-category>

src/sites/mobile-taro/vue/src/dentry/pages/input/index.vue

@@ -58,10 +58,10 @@
     <nut-input v-model="state.disabled" :border="false" placeholder="无边框" />
     <nut-input v-model="state.showIcon" :border="false" placeholder="无边框" />
 
-    <h2>点击事件</h2>
+    <h2>事件演示</h2>
     <nut-input
       v-model="state.event"
-      placeholder="点击"
+      placeholder="事件演示"
       clearable
       :adjust-position="state.adjustPosition"
       @update:model-value="change"

src/sites/mobile-taro/vue/src/dentry/pages/radio/index.vue

@@ -54,7 +54,7 @@
         </nut-radio-group>
       </nut-cell>
     </nut-cell-group>
-    <nut-cell-group title="Radio自定义图标">
+    <nut-cell-group title="自定义图标">
       <nut-cell>
         <nut-radio-group v-model="radioVal5">
           <nut-radio label="1">

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

@@ -1,35 +1,31 @@
 <template>
   <div class="demo">
-    <nut-cell-group title="基本用法 small normal large">
+    <nut-cell-group title="支持三种尺寸：small、normal、large">
       <nut-cell>
-        <nut-price :price="0" size="small" :need-symbol="true" :thousands="true" />
+        <nut-price :price="0" size="small" :need-symbol="false" />
       </nut-cell>
       <nut-cell>
-        <nut-price :price="0" size="normal" :need-symbol="true" :thousands="true" />
+        <nut-price :price="0" size="normal" :need-symbol="false" />
       </nut-cell>
       <nut-cell>
-        <nut-price :price="0" size="large" :need-symbol="true" :thousands="true" />
+        <nut-price :price="0" size="large" :need-symbol="false" />
       </nut-cell>
     </nut-cell-group>
     <h2>不保留小数</h2>
     <nut-cell>
-      <nut-price :price="8888" :decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+      <nut-price :price="8888" :decimal-digits="0" />
     </nut-cell>
-    <h2>调整 symbol 符号位置</h2>
+    <h2>货币符号</h2>
     <nut-cell>
-      <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
+      <nut-price :price="10010.01" symbol="¥" />
     </nut-cell>
-    <h2>有人民币符号，无千位分隔</h2>
+    <h2>货币符号位置</h2>
     <nut-cell>
-      <nut-price :price="10010.01" size="normal" :need-symbol="true" :thousands="false" />
+      <nut-price :price="8888.01" position="after" symbol="元" />
     </nut-cell>
-    <h2>带人民币符号，有千位分隔，保留小数点后三位</h2>
+    <h2>千位分隔</h2>
     <nut-cell>
-      <nut-price :price="15213.1221" size="normal" :decimal-digits="3" :need-symbol="true" :thousands="true" />
-    </nut-cell>
-    <h2>异步随机变更</h2>
-    <nut-cell>
-      <nut-price :price="price" size="normal" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+      <nut-price :price="15213.1221" :decimal-digits="3" :thousands="true" />
     </nut-cell>
   </div>
 </template>

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

@@ -14,20 +14,31 @@
         <nut-button type="primary" @click="handleStep('current1')">下一步</nut-button>
       </div>
     </div>
+    <h2>基本用法（点状）</h2>
+    <div class="steps-wrapper">
+      <nut-steps :current="current2" progress-dot>
+        <nut-step></nut-step>
+        <nut-step></nut-step>
+        <nut-step></nut-step>
+      </nut-steps>
+      <div class="steps-button">
+        <nut-button size="mini" type="primary" @click="handleStep('current2')">下一步</nut-button>
+      </div>
+    </div>
     <h2>标题和描述信息</h2>
     <div class="steps-wrapper">
-      <nut-steps :current="current2">
+      <nut-steps :current="current3">
         <nut-step title="步骤一" content="步骤描述">1</nut-step>
         <nut-step title="步骤二" content="步骤描述"></nut-step>
         <nut-step title="步骤三" content="步骤描述"></nut-step>
       </nut-steps>
       <div class="steps-button" style="margin-top: 10px">
-        <nut-button type="primary" @click="handleStep('current2')">下一步</nut-button>
+        <nut-button type="primary" @click="handleStep('current3')">下一步</nut-button>
       </div>
     </div>
     <h2>自定义图标</h2>
     <div class="steps-wrapper">
-      <nut-steps current="1">
+      <nut-steps current="4">
         <nut-step title="已完成" icon="service">1</nut-step>
         <nut-step title="进行中" icon="people">2</nut-step>
         <nut-step title="未开始" icon="location2">3</nut-step>
@@ -41,7 +52,7 @@
         <nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step>
       </nut-steps>
     </div>
-    <h2>竖向步骤条</h2>
+    <h2>点状步骤和垂直方向</h2>
     <div class="steps-wrapper" style="height: 300px; padding: 15px 40px">
       <nut-steps direction="vertical" progress-dot current="2">
         <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>

src/sites/mobile-taro/vue/src/feedback/pages/switch/index.vue

@@ -2,22 +2,22 @@
   <div class="demo">
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-switch v-model="checked" />
+      <nut-switch v-model="checked1" />
     </nut-cell>
 
     <h2>禁用状态</h2>
     <nut-cell>
-      <nut-switch v-model="checked" disable />
+      <nut-switch v-model="checked2" disable />
     </nut-cell>
 
     <h2>加载状态</h2>
     <nut-cell>
-      <nut-switch v-model="checked" loading />
+      <nut-switch v-model="checked3" loading />
     </nut-cell>
 
     <h2>change事件</h2>
     <nut-cell>
-      <nut-switch v-model="checked" @change="change" />
+      <nut-switch v-model="checked4" @change="change" />
     </nut-cell>
 
     <h2>异步控制</h2>
@@ -27,34 +27,42 @@
 
     <h2>自定义颜色</h2>
     <nut-cell>
-      <nut-switch v-model="checked" @change="switchChange" active-color="blue" />
+      <nut-switch v-model="checked6" active-color="blue" />
     </nut-cell>
 
     <h2>支持文字</h2>
     <nut-cell>
-      <nut-switch v-model="checked" @change="switchChange" active-text="开" inactive-text="关" />
+      <nut-switch v-model="checked7" active-text="开" inactive-text="关" />
     </nut-cell>
 
     <h2>自定义加载图标</h2>
     <nut-cell>
-      <nut-switch v-model="checked" @change="switchChange"><Loading name="loading" /></nut-switch>
+      <nut-switch v-model="checked8" loading><Loading name="loading" /></nut-switch>
     </nut-cell>
   </div>
 </template>
 
 <script lang="ts">
-import { ref, getCurrentInstance } from 'vue';
+import { ref, reactive, toRefs, getCurrentInstance } from 'vue';
 import { Loading } from '@nutui/icons-vue-taro';
 export default {
   components: { Loading },
   setup() {
     let { proxy } = getCurrentInstance() as any;
-    const checked = ref(true);
+    const data = reactive({
+      checked1: true,
+      checked2: true,
+      checked3: true,
+      checked4: true,
+      checked6: true,
+      checked7: true,
+      checked8: true
+    });
     const checkedAsync = ref(true);
     const loadingAsync = ref(false);
 
     const change = (value: boolean, event: Event) => {
-      console.log(`触发了change事件，开关状态：${value}`);
+      console.log(`value：${value}`);
     };
     const changeAsync = (value: boolean, event: Event) => {
       console.log(`2秒后异步触发 ${value}`);
@@ -66,7 +74,7 @@ export default {
     };
 
     return {
-      checked,
+      ...toRefs(data),
       checkedAsync,
       loadingAsync,
       change,