Merge branch 'v4' of https://github.com/Ymm0008/nutui into v4

src/packages/__VUE/audio/index.vue

@@ -14,7 +14,7 @@
           inactive-color="#cccccc"
           active-color="#fa2c19"
         >
-          <template #button>
+          <template v-slot:button>
             <div class="nut-audio__button--custom"></div>
           </template>
         </nut-range>
@@ -112,7 +112,7 @@ export default create({
   },
   emits: ['fastBack', 'play', 'forward', 'ended', 'changeProgress', 'mute', 'can-play'],
 
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const audioRef = ref(null);
 
     const audioData = reactive({
@@ -277,7 +277,8 @@ export default create({
       audioEnd,
       onTimeupdate,
       handleMute,
-      onCanplay
+      onCanplay,
+      slots
     };
   }
 });

src/packages/__VUE/audiooperate/index.vue

@@ -43,7 +43,14 @@ export default create({
 
   setup(props, { emit }) {
     const audio: any = inject('audioParent');
-    const parent: any = reactive(audio);
+    const parent: {
+      children: [];
+      audioData: any;
+      handleMute: ((payload: MouseEvent) => void) | undefined;
+      forward: ((payload: MouseEvent) => void) | undefined;
+      fastBack: ((payload: MouseEvent) => void) | undefined;
+      changeStatus: ((payload: MouseEvent) => void) | undefined;
+    } = reactive(audio);
     const customSlot = ref(useSlots().default);
 
     return { ...toRefs(props), ...toRefs(parent), customSlot, translate };

src/packages/__VUE/backtop/index.vue

@@ -10,6 +10,7 @@
 import { computed, onMounted, onUnmounted, onActivated, onDeactivated, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('backtop');
+import requestAniFrame, { cancelRaf } from '@/packages/utils/raf';
 import { Top } from '@nutui/icons-vue';
 export default create({
   components: {
@@ -88,13 +89,13 @@ export default create({
     }
 
     function scrollAnimation() {
-      let cid = requestAniFrame()(function fn() {
+      let cid = requestAniFrame(function fn() {
         var t = props.duration - Math.max(0, state.startTime - +new Date() + props.duration);
         var y = (t * -state.scrollTop) / props.duration + state.scrollTop;
         scroll(y);
-        cid = requestAniFrame()(fn);
+        cid = requestAniFrame(fn);
         if (t == props.duration || y == 0) {
-          window.cancelAnimationFrame(cid);
+          cancelRaf(cid);
         }
       });
     }
@@ -109,20 +110,6 @@ export default create({
       state.scrollEl.removeEventListener('resize', scrollListener, false);
     }
 
-    function initCancelAniFrame() {
-      window.cancelAnimationFrame = window.webkitCancelAnimationFrame;
-    }
-
-    function requestAniFrame() {
-      return (
-        window.requestAnimationFrame ||
-        window.webkitRequestAnimationFrame ||
-        function (callback) {
-          window.setTimeout(callback, 1000 / 60);
-        }
-      );
-    }
-
     function click(e: MouseEvent) {
       state.startTime = +new Date();
       props.isAnimation && props.duration > 0 ? scrollAnimation() : scroll();
@@ -135,7 +122,6 @@ export default create({
       }
 
       addEventListener();
-      initCancelAniFrame();
     }
 
     onMounted(() => {

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>
 
@@ -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>{{ 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>
 
@@ -92,6 +92,7 @@
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('badge');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Check, Link, Download } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -112,6 +113,7 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  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>
@@ -124,25 +124,29 @@ app.use(Badge);
   <div class="demo">
     <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>
   </div>
 </template>
 
+<script setup>
+import { Check, Link, Download } from '@nutui/icons-vue';
+</script>
+
 <style lang="scss" scoped>
 .demo{
   padding: 30px 17px 0 17px;
@@ -162,13 +166,13 @@ app.use(Badge);
 <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>
@@ -124,25 +124,29 @@ app.use(Badge);
   <div class="demo">
     <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>
   </div>
 </template>
 
+<script setup>
+import { Check, Link, Download } from '@nutui/icons-vue';
+</script>
+
 <style lang="scss" scoped>
 .demo{
   padding: 30px 17px 0 17px;
@@ -162,13 +166,13 @@ app.use(Badge);
 <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/cell/demo.vue

@@ -55,7 +55,11 @@
     </nut-cell-group>
 
     <h2>{{ translate('displayIcon') }}</h2>
-    <nut-cell :title="translate('name')" :desc="translate('desc')" isLink> </nut-cell>
+    <nut-cell :title="translate('name')" :desc="translate('desc')" isLink>
+      <template v-slot:icon>
+        <My />
+      </template>
+    </nut-cell>
     <h2>{{ translate('title6') }}</h2>
     <nut-cell desc-text-align="left" :desc="translate('desc')"></nut-cell>
 
@@ -69,6 +73,7 @@ import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('cell');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { My } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -121,6 +126,7 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: { My },
   setup() {
     initTranslate();
     const testClick = (event: Event) => {

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

@@ -159,8 +159,21 @@ app.use(CellGroup);
 
 ```html
 <template>
-  <nut-cell title="Name" icon="my" desc="Description"></nut-cell>
+  <nut-cell title="Name" desc="Description">
+      <template v-slot:icon>
+        <My />
+      </template>
+  </nut-cell>
 </template>
+<script lang="ts">
+import { My } from '@nutui/icons-vue';
+export default {
+  components: { My },
+  setup() {
+    return { My };
+  }
+};
+</script>
 ```
 
 :::

src/packages/__VUE/cell/doc.md

@@ -163,8 +163,21 @@ app.use(CellGroup);
 
 ```html
 <template>
-  <nut-cell title="姓名" desc="张三"></nut-cell>
+  <nut-cell title="姓名" desc="张三">
+    <template v-slot:icon>
+        <My />
+      </template>
+  </nut-cell>
 </template>
+<script lang="ts">
+import { My } from '@nutui/icons-vue';
+export default {
+  components: { My },
+  setup() {
+    return { My };
+  }
+};
+</script>
 ```
 
 :::

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

@@ -20,7 +20,7 @@
         :class="['nut-collapse-item__title-icon', { 'nut-collapse-item__title-icon--expanded': openExpanded }]"
         :style="{ transform: 'rotate(' + (openExpanded ? rotate : 0) + 'deg)' }"
       >
-        <component :is="renderIcon(icon)"></component>
+        <component v-if="icon" :is="renderIcon(icon)"></component>
       </view>
     </view>
     <view v-if="$slots.extraRender" class="nut-collapse__item-extraWrapper">

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

@@ -133,7 +133,7 @@ export default create({
       return 32 - new Date(year, month - 1, 32).getDate();
     }
     const getBoundary = (type: string, value: Date) => {
-      const boundary = props[`${type}Date`];
+      const boundary = type == 'min' ? props.minDate : props.maxDate;
       const year = boundary.getFullYear();
       let month = 1;
       let date = 1;

src/packages/__VUE/dialog/index.ts

@@ -1,5 +1,5 @@
 import Dialog from './index.vue';
-import { h, VNode, CSSProperties } from 'vue';
+import { h, VNode, CSSProperties, Component } from 'vue';
 import Popup from '../popup/index.vue';
 import Icon from '../icon/index.vue';
 import Button from '../button/index.vue';
@@ -58,7 +58,7 @@ class DialogFunction {
             }
             options.teleport = `#${root.id}`;
             return () => {
-              return h(Dialog, options);
+              return h(Dialog as Component, options);
             };
           }
         };

src/packages/__VUE/elevator/demo.vue

@@ -28,7 +28,7 @@
     <div class="elevator-wrapper">
       <nut-elevator :index-list="temp" :height="260" @click-item="clickItem" @click-index="clickIndex">
         <template v-slot:default="slotProps">
-          <nut-icon name="JD" size="12"></nut-icon>
+          <Jd width="12px"></Jd>
           <span :style="{ marginLeft: '15px' }">{{ slotProps.item.name }}</span>
         </template>
       </nut-elevator>
@@ -41,6 +41,7 @@ import { computed, reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('elevator');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Jd } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -137,6 +138,9 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: {
+    Jd
+  },
   setup() {
     initTranslate();
     const state = reactive({

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

@@ -21,7 +21,7 @@ app.use(Elevator);
 
 :::demo
 
-``` html
+```vue
 <template>
   <nut-elevator :index-list="dataList" :height="260" @click-item="clickItem" @click-index="clickIndex"></nut-elevator>
 </template>
@@ -99,7 +99,7 @@ app.use(Elevator);
 
 :::demo
 
-``` html
+```vue
 <template>
   <nut-elevator :index-list="dataList2" :height="220" :acceptKey="acceptKey" @click-item="clickItem" @click-index="clickIndex"></nut-elevator>
 </template>
@@ -232,7 +232,7 @@ app.use(Elevator);
 
 :::demo
 
-``` html
+```vue
 <template>
   <nut-elevator :index-list="dataList3" :is-sticky="true" :height="220"  @click-item="clickItem" @click-index="clickIndex"></nut-elevator>
 </template>
@@ -377,18 +377,22 @@ app.use(Elevator);
 
 :::demo
 
-``` html
+```vue
 <template>
   <nut-elevator :index-list="dataList" :height="260" @click-item="clickItem" @click-index="clickIndex">
       <template v-slot:default="slotProps">
-        <nut-icon name='JD' size="12"></nut-icon>
+        <Jd width="12px"></Jd>
         <span :style="{marginLeft: '15px'}">{{ slotProps.item.name }}</span>
       </template>
   </nut-elevator>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
+  import { Jd } from '@nutui/icons-vue'
   export default {
+    components: {
+      Jd,
+    },
     setup() {
       const state = reactive({
         acceptKey: 'num',

src/packages/__VUE/elevator/doc.md

@@ -377,18 +377,22 @@ app.use(Elevator);
 
 :::demo
 
-``` html
+```vue
 <template>
   <nut-elevator :index-list="dataList" :height="260" @click-item="clickItem" @click-index="clickIndex">
       <template v-slot:default="slotProps">
-        <nut-icon name='JD' size="12"></nut-icon>
+        <Jd width="12px"></Jd>
         <span :style="{marginLeft: '15px'}">{{ slotProps.item.name }}</span>
       </template>
   </nut-elevator>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
+  import { Jd } from '@nutui/icons-vue'
   export default {
+    components: {
+      Jd,
+    },
     setup() {
       const state = reactive({
         acceptKey: 'num',

src/packages/__VUE/imagepreview/index.ts

@@ -1,5 +1,5 @@
 import ImagePreview from './index.vue';
-import { h } from 'vue';
+import { Component, h } from 'vue';
 import { ImageInterface } from './types';
 import { CreateComponent } from '@/packages/utils/create';
 import { Interceptor } from '@/packages/utils/util';
@@ -48,7 +48,7 @@ class ImagePreviewFunction {
               options.onClose = () => {
                 unmount();
               };
-              return h(ImagePreview, options);
+              return h(ImagePreview as Component, options);
             };
           }
         };

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

@@ -32,7 +32,7 @@
       </nut-form-item>
     </nut-form>
     <div v-if="submit" class="nut-invoice__submit">
-      <nut-button type="primary" block @click="submit">提交审批</nut-button>
+      <nut-button type="primary" block @click="submitFun">提交审批</nut-button>
     </div>
   </view>
 </template>
@@ -93,7 +93,7 @@ export default create({
       list.value = props.data;
     };
 
-    const submit = () => {
+    const submitFun = () => {
       formRef.value.validate().then(({ valid, errors }: any) => {
         emit('onSubmit', valid, errors);
       });
@@ -110,7 +110,7 @@ export default create({
       classes,
       formRef,
       list,
-      submit
+      submitFun
     };
   }
 });

src/packages/__VUE/invoice/index.vue

@@ -32,7 +32,7 @@
       </nut-form-item>
     </nut-form>
     <div v-if="submit" class="nut-invoice__submit">
-      <nut-button type="primary" block @click="submit">提交审批</nut-button>
+      <nut-button type="primary" block @click="submitFun">提交审批</nut-button>
     </div>
   </view>
 </template>
@@ -93,7 +93,7 @@ export default create({
       list.value = props.data;
     };
 
-    const submit = () => {
+    const submitFun = () => {
       formRef.value.validate().then(({ valid, errors }: any) => {
         emit('onSubmit', valid, errors);
       });
@@ -110,7 +110,7 @@ export default create({
       classes,
       formRef,
       list,
-      submit
+      submitFun
     };
   }
 });

src/packages/__VUE/picker/Column.vue

@@ -134,7 +134,7 @@ export default create({
         let dom = roller.value as any;
         const { transform } = window.getComputedStyle(dom);
         if (props.threeDimensional) {
-          const circle = Math.floor(parseFloat(touchDeg.value) / 360);
+          const circle = Math.floor(touchDeg.value / 360);
           const cos = +transform.split(', ')[5];
           const sin = +transform.split(', ')[6] < 0 ? 180 : 0;
           const endDeg = circle * 360 + (Math.acos(cos) / Math.PI) * 180 + sin;

src/packages/__VUE/picker/common.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted, onBeforeUnmount, reactive, watch, computed, CSSProperties, toRefs, PropType } from 'vue';
+import { ref, onMounted, reactive, watch, computed, CSSProperties, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('picker');
 import { usePicker } from './usePicker';
@@ -16,7 +16,10 @@ export const componentWeb = {
     const { changeHandler, confirm, defaultValues, columnsList, selectedOptions, columnsType, classes, cancel } =
       usePicker(props, emit);
 
-    const state = reactive({
+    const state = reactive<{
+      ENV: TaroGeneral.ENV_TYPE;
+      ENV_TYPE: Taro.TARO_ENV_TYPE;
+    }>({
       ENV: Taro.getEnv(),
       ENV_TYPE: Taro.ENV_TYPE
     });

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

@@ -46,7 +46,7 @@
           :visibleOptionNum="visibleOptionNum"
           :optionHeight="optionHeight"
           @change="
-            (option) => {
+            (option:PickerOption) => {
               changeHandler(columnIndex, option);
             }
           "
@@ -61,8 +61,10 @@ import { createComponent } from '@/packages/utils/create';
 import { componentWeb, componentWeapp } from './common';
 import Taro from '@tarojs/taro';
 const { create } = createComponent('picker');
+import { Component } from 'vue';
+import { PickerOption } from './types';
 
-const component: any = Taro.getEnv() == Taro.ENV_TYPE.WEB ? componentWeb : componentWeapp;
+const component: Component = Taro.getEnv() == Taro.ENV_TYPE.WEB ? componentWeb : componentWeapp;
 
 export default create(component);
 </script>

src/packages/__VUE/picker/index.vue

@@ -20,7 +20,7 @@
           :visibleOptionNum="visibleOptionNum"
           :optionHeight="optionHeight"
           @change="
-            (option) => {
+            (option:PickerOption) => {
               changeHandler(columnIndex, option);
             }
           "
@@ -38,6 +38,7 @@ import { usePicker } from './usePicker';
 import column from './Column.vue';
 import baseProps from './baseProps';
 const { componentName, create, translate } = createComponent('picker');
+import { PickerOption } from './types';
 
 export default create({
   components: {

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

@@ -85,7 +85,7 @@ export default create({
   components: {},
   props: {
     visible: { type: Boolean, default: false },
-    list: { type: Array, default: [] },
+    list: { type: Array as PropType<import('./type').PopoverList[]>, default: [] },
     theme: { type: String as PropType<import('./type').PopoverTheme>, default: 'light' },
     location: { type: String as PropType<import('./type').PopoverLocation>, default: 'bottom' },
     offset: { type: Array, default: [0, 12] },
@@ -131,7 +131,7 @@ export default create({
       const base = 16;
 
       if (bgColor) {
-        styles[`border${upperCaseFirst(direction)}Color`] = bgColor;
+        styles[`border${upperCaseFirst(direction)}Color` as any] = bgColor;
       }
 
       if (props.arrowOffset != 0) {

src/packages/__VUE/popover/index.vue

@@ -24,7 +24,7 @@
           :class="[item.className, item.disabled && 'nut-popover-menu-disabled', 'nut-popover-menu-item']"
           @click.stop="chooseItem(item, index)"
         >
-          <component :is="renderIcon(item.icon)" class="nut-popover-item-img"></component>
+          <component v-if="item.icon" :is="renderIcon(item.icon)" class="nut-popover-item-img"></component>
 
           <view class="nut-popover-menu-item-name">{{ item.name }}</view>
         </view>
@@ -87,7 +87,7 @@ export default create({
       const base = 16;
 
       if (bgColor) {
-        styles[`border${upperCaseFirst(direction)}Color`] = bgColor;
+        styles[`border${upperCaseFirst(direction)}Color` as any] = bgColor;
       }
 
       if (props.arrowOffset != 0) {
@@ -187,7 +187,7 @@ export default create({
     const getContentWidth = () => {
       let rect = useRect(popoverRef.value);
       if (props.targetId) {
-        rect = useRect(document.querySelector(`#${props.targetId}`));
+        rect = useRect(document.querySelector(`#${props.targetId}`) as Element);
       }
       rootRect.value = rect;
       setTimeout(() => {
@@ -241,7 +241,7 @@ export default create({
       let el = element && !element.contains(event.target);
 
       if (props.targetId) {
-        const dom = document.querySelector(`#${props.targetId}`);
+        const dom: any = document.querySelector(`#${props.targetId}`);
         el = dom && !dom.contains(event.target);
       }
       if (el && elContent && !elContent.contains(event.target) && props.closeOnClickOutside) {

src/packages/__VUE/popover/type.ts

@@ -1,3 +1,5 @@
+import { Component } from 'vue';
+
 export type PopoverTheme = 'light' | 'dark';
 
 export type PopoverLocation =
@@ -16,7 +18,7 @@ export type PopoverLocation =
 
 export type PopoverList = {
   name: string;
-  icon?: string;
+  icon?: Component;
   disabled?: boolean;
   className?: any;
   [key: PropertyKey]: any;

src/packages/__VUE/tour/index.vue

@@ -149,9 +149,12 @@ export default create({
       active: 0
     });
 
-    const maskRect = ref<{
-      [props: string]: number;
-    }>({});
+    const maskRect = ref<
+      | DOMRect
+      | {
+          [props: string]: number;
+        }
+    >({});
 
     const classes = computed(() => {
       const prefixCls = 'nut-tour';

src/packages/utils/raf.ts

@@ -1,4 +1,7 @@
 const _window = window as any;
+
+export const inBrowser = typeof window !== 'undefined';
+
 function requestAniFrame() {
   if (typeof _window !== 'undefined') {
     return (
@@ -15,4 +18,12 @@ function requestAniFrame() {
   }
 }
 
+export function cancelRaf(id: number) {
+  if (inBrowser) {
+    cancelAnimationFrame(id);
+  } else {
+    clearTimeout(id);
+  }
+}
+
 export default requestAniFrame();

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

@@ -53,7 +53,11 @@
     </nut-cell-group>
 
     <h2>展示图标</h2>
-    <nut-cell title="姓名" icon="my" desc="张三" isLink> </nut-cell>
+    <nut-cell title="姓名" icon="my" desc="张三" isLink>
+      <template v-slot:icon>
+        <My />
+      </template>
+    </nut-cell>
     <h2>只展示 desc ，可通过 desc-text-align 调整内容位置</h2>
     <nut-cell desc-text-align="left" desc="张三"></nut-cell>
     <h2>垂直居中</h2>
@@ -63,7 +67,9 @@
 
 <script lang="ts">
 import { ref } from 'vue';
+import { My } from '@nutui/icons-vue-taro';
 export default {
+  components: { My },
   setup() {
     const testClick = (event: Event) => {
       // console.log('点击事件');

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">

src/sites/mobile-taro/vue/src/nav/pages/elevator/index.vue

@@ -2,22 +2,50 @@
   <div class="demo elevator-demo">
     <h2>基本用法</h2>
     <div class="elevator-wrapper">
+      <nut-elevator :index-list="temp" :height="260" @click-item="clickItem" @click-index="clickIndex"></nut-elevator>
+    </div>
+    <h2>自定义索引key</h2>
+    <div class="elevator-wrapper">
       <nut-elevator
-        :index-list="dataList"
+        :index-list="dataList2"
+        :height="220"
+        :acceptKey="acceptKey"
+        @click-item="clickItem"
+        @click-index="clickIndex"
+      ></nut-elevator>
+    </div>
+    <h2>索引吸顶</h2>
+    <div class="elevator-wrapper">
+      <nut-elevator
+        :index-list="dataList3"
         :is-sticky="true"
-        height="500px"
+        :height="220"
         @click-item="clickItem"
         @click-index="clickIndex"
       ></nut-elevator>
     </div>
+    <h2>自定义内容</h2>
+    <div class="elevator-wrapper">
+      <nut-elevator :index-list="temp" :height="260" @click-item="clickItem" @click-index="clickIndex">
+        <template v-slot:default="slotProps">
+          <Jd width="12px"></Jd>
+          <span :style="{ marginLeft: '15px' }">{{ slotProps.item.name }}</span>
+        </template>
+      </nut-elevator>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
+import { computed, reactive, toRefs, defineComponent } from 'vue';
+import { Jd } from '@nutui/icons-vue-taro';
 export default defineComponent({
+  components: {
+    Jd
+  },
   setup() {
     const state = reactive({
+      acceptKey: 'num',
       dataList: [
         {
           title: 'A',
@@ -38,6 +66,153 @@ export default defineComponent({
           ]
         },
         {
+          title: 'G',
+          list: [
+            {
+              name: '广西',
+              id: 5
+            },
+            {
+              name: '广东',
+              id: 6
+            }
+          ]
+        },
+        {
+          title: 'H',
+          list: [
+            {
+              name: '湖南',
+              id: 9
+            },
+            {
+              name: '湖北',
+              id: 10
+            }
+          ]
+        }
+      ],
+      dataList2: [
+        {
+          num: '一',
+          list: [
+            {
+              name: '北京',
+              id: 1
+            },
+            {
+              name: '上海',
+              id: 2
+            },
+            {
+              name: '深圳',
+              id: 3
+            },
+            {
+              name: '广州',
+              id: 4
+            },
+            {
+              name: '杭州',
+              id: 5
+            }
+          ]
+        },
+        {
+          num: '二',
+          list: [
+            {
+              name: '成都',
+              id: 6
+            },
+            {
+              name: '西安',
+              id: 7
+            },
+            {
+              name: '天津',
+              id: 8
+            },
+            {
+              name: '武汉',
+              id: 9
+            },
+            {
+              name: '长沙',
+              id: 10
+            },
+            {
+              name: '重庆',
+              id: 11
+            },
+            {
+              name: '苏州',
+              id: 12
+            },
+            {
+              name: '南京',
+              id: 13
+            }
+          ]
+        },
+        {
+          num: '三',
+          list: [
+            {
+              name: '西宁',
+              id: 14
+            },
+            {
+              name: '兰州',
+              id: 15
+            },
+            {
+              name: '石家庄',
+              id: 16
+            },
+            {
+              name: '秦皇岛',
+              id: 17
+            },
+            {
+              name: '大连',
+              id: 18
+            },
+            {
+              name: '哈尔滨',
+              id: 19
+            },
+            {
+              name: '长春',
+              id: 20
+            },
+            {
+              name: '太原',
+              id: 21
+            }
+          ]
+        }
+      ],
+      dataList3: [
+        {
+          title: 'A',
+          list: [
+            {
+              name: '安徽',
+              id: 1
+            }
+          ]
+        },
+        {
+          title: 'B',
+          list: [
+            {
+              name: '北京',
+              id: 2
+            }
+          ]
+        },
+        {
           title: 'C',
           list: [
             {
@@ -134,6 +309,10 @@ export default defineComponent({
       ]
     });
 
+    const temp = computed(() => {
+      return state.dataList;
+    });
+
     const clickItem = (key: string, item: any) => {
       console.log(key, JSON.stringify(item));
     };
@@ -142,7 +321,7 @@ export default defineComponent({
       console.log(key);
     };
 
-    return { ...toRefs(state), clickItem, clickIndex };
+    return { ...toRefs(state), temp, clickItem, clickIndex };
   }
 });
 </script>