diff --git a/packages/nutui-eslint-config/index.js b/packages/nutui-eslint-config/index.js
index 0a4368b9ce..1d6fb7e70c 100644
--- a/packages/nutui-eslint-config/index.js
+++ b/packages/nutui-eslint-config/index.js
@@ -41,7 +41,6 @@ module.exports = {
     'vue/multi-word-component-names': 'off',
     'vue/no-v-text-v-html-on-component': 'off',
     // will be removed someday
-    'vue/attributes-order': 'off',
     'vue/attribute-hyphenation': 'off'
   }
 };
diff --git a/src/packages/__VUE/actionsheet/demo.vue b/src/packages/__VUE/actionsheet/demo.vue
index 1118a81a86..d6b803e2c3 100644
--- a/src/packages/__VUE/actionsheet/demo.vue
+++ b/src/packages/__VUE/actionsheet/demo.vue
@@ -27,8 +27,8 @@
       :title="translate('title')"
       :description="desc"
       :menu-items="menuItemsTwo"
-      @choose="chooseItemThree"
       :cancel-txt="translate('cancelTxt')"
+      @choose="chooseItemThree"
     />
 
     <h2>{{ translate('optionStatus') }}</h2>
@@ -40,8 +40,8 @@
       v-model:visible="state.isVisible4"
       :cancel-txt="translate('cancelTxt')"
       :menu-items="menuItemsThree"
-      @choose="chooseItemFour"
       :choose-tag-value="chooseTagValue"
+      @choose="chooseItemFour"
     />
 
     <h2>{{ translate('customContent') }}</h2>
diff --git a/src/packages/__VUE/actionsheet/index.taro.vue b/src/packages/__VUE/actionsheet/index.taro.vue
index cea5894e86..79e1571535 100644
--- a/src/packages/__VUE/actionsheet/index.taro.vue
+++ b/src/packages/__VUE/actionsheet/index.taro.vue
@@ -1,20 +1,20 @@
 <template>
-  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :closeOnClickOverlay="closeAbled">
+  <nut-popup :visible="visible" position="bottom" round :closeOnClickOverlay="closeAbled" @click-overlay="close">
     <view :class="classes">
       <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
       <slot></slot>
       <view v-if="!slotDefault">
-        <view class="nut-action-sheet__item nut-action-sheet__desc" v-if="description">{{ description }}</view>
-        <view class="nut-action-sheet__menu" v-if="menuItems.length">
+        <view v-if="description" class="nut-action-sheet__item nut-action-sheet__desc">{{ description }}</view>
+        <view v-if="menuItems.length" class="nut-action-sheet__menu">
           <view
             v-for="(item, index) of menuItems"
+            :key="index"
             class="nut-action-sheet__item"
             :class="{
               'nut-action-sheet__item--disabled': item.disable,
               'nut-action-sheet__item--loading': item.loading
             }"
             :style="{ color: isHighlight(item) || item.color }"
-            :key="index"
             @click="chooseItem(item, index)"
           >
             <Loading v-if="item.loading"></Loading>
@@ -22,7 +22,7 @@
             <view class="nut-action-sheet__subdesc">{{ item[optionSubTag] }}</view>
           </view>
         </view>
-        <view class="nut-action-sheet__cancel" v-if="cancelTxt" @click="cancelActionSheet">
+        <view v-if="cancelTxt" class="nut-action-sheet__cancel" @click="cancelActionSheet">
           {{ cancelTxt }}
         </view>
       </view>
diff --git a/src/packages/__VUE/actionsheet/index.vue b/src/packages/__VUE/actionsheet/index.vue
index 6e70e262b1..c57c7fb506 100644
--- a/src/packages/__VUE/actionsheet/index.vue
+++ b/src/packages/__VUE/actionsheet/index.vue
@@ -1,20 +1,20 @@
 <template>
-  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :closeOnClickOverlay="closeAbled">
+  <nut-popup :visible="visible" position="bottom" round :closeOnClickOverlay="closeAbled" @click-overlay="close">
     <view :class="classes">
       <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
       <slot></slot>
       <view v-if="!slotDefault">
-        <view class="nut-action-sheet__item nut-action-sheet__desc" v-if="description">{{ description }}</view>
-        <view class="nut-action-sheet__menu" v-if="menuItems.length">
+        <view v-if="description" class="nut-action-sheet__item nut-action-sheet__desc">{{ description }}</view>
+        <view v-if="menuItems.length" class="nut-action-sheet__menu">
           <view
             v-for="(item, index) of menuItems"
+            :key="index"
             class="nut-action-sheet__item"
             :class="{
               'nut-action-sheet__item--disabled': item.disable,
               'nut-action-sheet__item--loading': item.loading
             }"
             :style="{ color: isHighlight(item) || item.color }"
-            :key="index"
             @click="chooseItem(item, index)"
           >
             <Loading v-if="item.loading" name="loading"></Loading>
@@ -22,7 +22,7 @@
             <view class="nut-action-sheet__subdesc">{{ item[optionSubTag] }}</view>
           </view>
         </view>
-        <view class="nut-action-sheet__cancel" v-if="cancelTxt" @click="cancelActionSheet">
+        <view v-if="cancelTxt" class="nut-action-sheet__cancel" @click="cancelActionSheet">
           {{ cancelTxt }}
         </view>
       </view>
diff --git a/src/packages/__VUE/address/demo.vue b/src/packages/__VUE/address/demo.vue
index 47ac522bac..5f4d409a20 100644
--- a/src/packages/__VUE/address/demo.vue
+++ b/src/packages/__VUE/address/demo.vue
@@ -23,9 +23,9 @@
       :city="city"
       :country="country"
       :town="town"
+      :columns-placeholder="placeholder"
       @change="(cal) => onChange(cal, 'select')"
       @close="close6"
-      :columns-placeholder="placeholder"
     ></nut-address>
 
     <h2>{{ translate('customAddress2') }}</h2>
@@ -51,8 +51,8 @@
       v-model:visible="exist"
       type="exist"
       :exist-address="existAddress"
-      @close="close2"
       :is-show-custom-address="false"
+      @close="close2"
       @selected="selected"
     ></nut-address>
 
@@ -63,8 +63,8 @@
       v-model:visible="customImg"
       type="exist"
       :exist-address="existAddress"
-      @close="close3"
       :is-show-custom-address="false"
+      @close="close3"
       @selected="selected"
     >
       <template #unselected-icon>
diff --git a/src/packages/__VUE/address/index.taro.vue b/src/packages/__VUE/address/index.taro.vue
index c1949e4ed0..fc30bd9192 100644
--- a/src/packages/__VUE/address/index.taro.vue
+++ b/src/packages/__VUE/address/index.taro.vue
@@ -1,12 +1,12 @@
 <template>
   <nut-popup
+    v-model:visible="showPopup"
     position="bottom"
     :lock-scroll="lockScroll"
     :round="round"
     @close="close"
     @click-overlay="clickOverlay"
     @open="closeWay = 'self'"
-    v-model:visible="showPopup"
   >
     <view class="nut-address">
       <view class="nut-address__header">
@@ -32,24 +32,24 @@
       </view>
 
       <!-- 请选择 -->
-      <view class="nut-address__custom" v-if="['custom', 'custom2'].includes(privateType)">
-        <view class="nut-address__region" ref="tabRegion">
+      <view v-if="['custom', 'custom2'].includes(privateType)" class="nut-address__custom">
+        <view ref="tabRegion" class="nut-address__region">
           <view
-            :class="['nut-address__region-item', index == tabIndex ? 'active' : '']"
             v-for="(item, index) in selectedRegion"
             :key="index"
+            :class="['nut-address__region-item', index == tabIndex ? 'active' : '']"
             @click="changeRegionTab(item, index)"
           >
             <view>{{ getTabName(item, index) }} </view>
             <view :class="{ 'nut-address__region-line--mini': true, active: index == tabIndex }"></view>
           </view>
-          <view class="active nut-address__region-item" v-if="tabIndex == selectedRegion.length">
+          <view v-if="tabIndex == selectedRegion.length" class="active nut-address__region-item">
             <view>{{ getTabName(null, selectedRegion.length) }} </view>
             <view class="nut-address__region-line--mini active"></view>
           </view>
         </view>
 
-        <view class="nut-address__detail" v-if="privateType == 'custom'">
+        <view v-if="privateType == 'custom'" class="nut-address__detail">
           <div class="nut-address__detail-list">
             <nut-scroll-view
               :scroll-y="true"
@@ -64,7 +64,7 @@
                 @click="nextAreaList(item)"
               >
                 <div>
-                  <slot name="icon" v-if="selectedRegion[tabIndex]?.id == item.id">
+                  <slot v-if="selectedRegion[tabIndex]?.id == item.id" name="icon">
                     <Check class="nut-address-select-icon" width="13px"></Check> </slot
                   >{{ item.name }}
                 </div>
@@ -73,7 +73,7 @@
           </div>
         </view>
 
-        <view class="nut-address__elevator-group" v-else>
+        <view v-else class="nut-address__elevator-group">
           <nut-elevator
             :height="height"
             :index-list="transformData(regionList)"
@@ -83,26 +83,26 @@
       </view>
 
       <!-- 配送至 -->
-      <view class="nut-address__exist" v-else-if="privateType == 'exist'">
+      <view v-else-if="privateType == 'exist'" class="nut-address__exist">
         <div class="nut-address__exist-group">
           <ul class="nut-address__exist-group-list">
             <li
-              class="nut-address__exist-group-item"
-              :class="[item.selectedAddress ? 'active' : '']"
               v-for="(item, index) in existAddress"
               :key="index"
+              class="nut-address__exist-group-item"
+              :class="[item.selectedAddress ? 'active' : '']"
               @click="selectedExist(item)"
             >
-              <slot name="unselected-icon" v-if="!item.selectedAddress">
+              <slot v-if="!item.selectedAddress" name="unselected-icon">
                 <Location2 class="nut-address-select-icon" width="13px"></Location2>
               </slot>
 
-              <slot name="icon" v-if="item.selectedAddress">
+              <slot v-if="item.selectedAddress" name="icon">
                 <Check class="nut-address-select-icon" width="13px"></Check>
               </slot>
 
               <div class="nut-address__exist-item-info">
-                <div class="nut-address__exist-item-info-top" v-if="item.name && item.phone">
+                <div v-if="item.name && item.phone" class="nut-address__exist-item-info-top">
                   <div class="nut-address__exist-item-info-name">{{ item.name }}</div>
                   <div class="nut-address__exist-item-info-phone">{{ item.phone }}</div>
                 </div>
@@ -115,7 +115,7 @@
             </li>
           </ul>
         </div>
-        <div class="nut-address__exist-choose" @click="switchModule" v-if="isShowCustomAddress">
+        <div v-if="isShowCustomAddress" class="nut-address__exist-choose" @click="switchModule">
           <div class="nut-address__exist-choose-btn">{{
             customAndExistTitle || translate('chooseAnotherAddress')
           }}</div>
diff --git a/src/packages/__VUE/address/index.vue b/src/packages/__VUE/address/index.vue
index 9b0b51bccc..19ddffe85b 100644
--- a/src/packages/__VUE/address/index.vue
+++ b/src/packages/__VUE/address/index.vue
@@ -1,14 +1,14 @@
 <template>
   <nut-popup
+    v-model:visible="showPopup"
     position="bottom"
     :lock-scroll="lockScroll"
     :round="round"
+    :teleportDisable="teleportDisable"
+    :teleport="teleport"
     @close="close"
     @click-overlay="clickOverlay"
     @open="closeWay = 'self'"
-    v-model:visible="showPopup"
-    :teleportDisable="teleportDisable"
-    :teleport="teleport"
   >
     <view class="nut-address">
       <view class="nut-address__header">
@@ -34,25 +34,25 @@
       </view>
 
       <!-- 请选择 -->
-      <view class="nut-address__custom" v-if="['custom', 'custom2'].includes(privateType)">
-        <view class="nut-address__region" ref="tabRegion">
+      <view v-if="['custom', 'custom2'].includes(privateType)" class="nut-address__custom">
+        <view ref="tabRegion" class="nut-address__region">
           <view
-            :class="['nut-address__region-item', index == tabIndex ? 'active' : '']"
             v-for="(item, index) in selectedRegion"
             :key="index"
+            :class="['nut-address__region-item', index == tabIndex ? 'active' : '']"
             @click="changeRegionTab(item, index)"
           >
             <view>{{ getTabName(item, index) }} </view>
           </view>
-          <view class="active nut-address__region-item" v-if="tabIndex == selectedRegion.length">
+          <view v-if="tabIndex == selectedRegion.length" class="active nut-address__region-item">
             <view>{{ getTabName(null, selectedRegion.length) }} </view>
           </view>
 
-          <view class="nut-address__region-line" ref="regionLine" :style="{ left: lineDistance + 'px' }"></view>
+          <view ref="regionLine" class="nut-address__region-line" :style="{ left: lineDistance + 'px' }"></view>
         </view>
 
-        <view class="nut-address__detail" v-if="privateType == 'custom'">
-          <ul class="nut-address__detail-list" ref="scrollDom">
+        <view v-if="privateType == 'custom'" class="nut-address__detail">
+          <ul ref="scrollDom" class="nut-address__detail-list">
             <li
               v-for="(item, index) in regionList"
               :key="index"
@@ -60,7 +60,7 @@
               @click="nextAreaList(item)"
             >
               <div>
-                <slot name="icon" v-if="selectedRegion[tabIndex]?.id == item.id">
+                <slot v-if="selectedRegion[tabIndex]?.id == item.id" name="icon">
                   <Check class="nut-address-select-icon" size="13px"></Check> </slot
                 >{{ item.name }}
               </div>
@@ -68,7 +68,7 @@
           </ul>
         </view>
 
-        <view class="nut-address__elevator-group" v-else>
+        <view v-else class="nut-address__elevator-group">
           <nut-elevator
             :height="height"
             :index-list="transformData(regionList)"
@@ -78,26 +78,26 @@
       </view>
 
       <!-- 配送至 -->
-      <view class="nut-address__exist" v-else>
+      <view v-else class="nut-address__exist">
         <div class="nut-address__exist-group">
           <ul class="nut-address__exist-group-list">
             <li
-              :class="['nut-address__exist-group-item', item.selectedAddress ? 'active' : '']"
               v-for="(item, index) in existAddress"
               :key="index"
+              :class="['nut-address__exist-group-item', item.selectedAddress ? 'active' : '']"
               @click="selectedExist(item)"
             >
-              <slot name="unselected-icon" v-if="!item.selectedAddress">
+              <slot v-if="!item.selectedAddress" name="unselected-icon">
                 <Location2 class="nut-address-select-icon" size="13px"></Location2>
               </slot>
 
-              <slot name="icon" v-if="item.selectedAddress">
+              <slot v-if="item.selectedAddress" name="icon">
                 <Check class="nut-address-select-icon" size="13px"></Check>
               </slot>
 
               <div class="nut-address__exist-item-info">
-                <div class="nut-address__exist-item-info-name" v-if="item.name">{{ item.name }}</div>
-                <div class="nut-address__exist-item-info-phone" v-if="item.phone">{{ item.phone }}</div>
+                <div v-if="item.name" class="nut-address__exist-item-info-name">{{ item.name }}</div>
+                <div v-if="item.phone" class="nut-address__exist-item-info-phone">{{ item.phone }}</div>
                 <div class="nut-address__exist-item-info-bottom">
                   <view>
                     {{ item.provinceName + item.cityName + item.countyName + item.townName + item.addressDetail }}
@@ -108,7 +108,7 @@
           </ul>
         </div>
 
-        <div class="nut-address__exist-choose" @click="switchModule" v-if="isShowCustomAddress">
+        <div v-if="isShowCustomAddress" class="nut-address__exist-choose" @click="switchModule">
           <div class="nut-address__exist-choose-btn">{{
             customAndExistTitle || translate('chooseAnotherAddress')
           }}</div>
diff --git a/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue b/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue
index 9898a21604..682b4c8f55 100644
--- a/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue
+++ b/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="nut-address-list-general" v-if="!swipeEdition">
+  <div v-if="!swipeEdition" class="nut-address-list-general">
     <component :is="renderCompontent()" @touchstart="holddownstart" @touchend="holddownend" @touchmove="holddownmove">
       <template #content-top>
         <slot name="content-info"></slot>
@@ -11,14 +11,14 @@
         <slot name="content-addrs"></slot>
       </template>
     </component>
-    <div class="nut-address-list-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
+    <div v-if="longPress && showMaskRef" class="nut-address-list-general__mask" @click="maskClick">
       <slot name="longpress-all">
         <div class="nut-address-list-general__mask-copy" @click="copyCLick"> 复制地址 </div>
         <div class="nut-address-list-general__mask-set" @click="setDefault"> 设置默认 </div>
         <div class="nut-address-list-general__mask-del" @click="delLongClick"> 删除地址 </div>
       </slot>
     </div>
-    <div class="nut-address-list__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>
+    <div v-if="showMaskRef" class="nut-address-list__mask-bottom" @click="hideMaskClick"></div>
   </div>
   <nut-swipe v-else>
     <div class="nut-address-list-swipe">
diff --git a/src/packages/__VUE/addresslist/components/GeneralShell.vue b/src/packages/__VUE/addresslist/components/GeneralShell.vue
index 47106fa786..ecfa89cd8a 100644
--- a/src/packages/__VUE/addresslist/components/GeneralShell.vue
+++ b/src/packages/__VUE/addresslist/components/GeneralShell.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="nut-address-list-general" v-if="!swipeEdition">
+  <div v-if="!swipeEdition" class="nut-address-list-general">
     <component :is="renderCompontent()" @touchstart="holddownstart" @touchend="holddownend" @touchmove="holddownmove">
       <template #content-top>
         <slot name="content-info"></slot>
@@ -11,14 +11,14 @@
         <slot name="content-addrs"></slot>
       </template>
     </component>
-    <div class="nut-address-list-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
+    <div v-if="longPress && showMaskRef" class="nut-address-list-general__mask" @click="maskClick">
       <slot name="longpress-all">
         <div class="nut-address-list-general__mask-copy" @click="copyCLick"> 复制地址 </div>
         <div class="nut-address-list-general__mask-set" @click="setDefault"> 设置默认 </div>
         <div class="nut-address-list-general__mask-del" @click="delLongClick"> 删除地址 </div>
       </slot>
     </div>
-    <div class="nut-address-list__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>
+    <div v-if="showMaskRef" class="nut-address-list__mask-bottom" @click="hideMaskClick"></div>
   </div>
   <nut-swipe v-else>
     <div class="nut-address-list-swipe">
diff --git a/src/packages/__VUE/addresslist/components/ItemContents.taro.vue b/src/packages/__VUE/addresslist/components/ItemContents.taro.vue
index 2f10881a8e..04a7698e88 100644
--- a/src/packages/__VUE/addresslist/components/ItemContents.taro.vue
+++ b/src/packages/__VUE/addresslist/components/ItemContents.taro.vue
@@ -5,7 +5,7 @@
         <slot name="content-top">
           <div class="nut-address-list-item__info-contact-name">{{ item.addressName }}</div>
           <div class="nut-address-list-item__info-contact-tel">{{ item.phone }}</div>
-          <div class="nut-address-list-item__info-contact-default" v-if="item.defaultAddress">{{
+          <div v-if="item.defaultAddress" class="nut-address-list-item__info-contact-default">{{
             translate('default')
           }}</div>
         </slot>
diff --git a/src/packages/__VUE/addresslist/components/ItemContents.vue b/src/packages/__VUE/addresslist/components/ItemContents.vue
index 5dc7346721..c93ddae40f 100644
--- a/src/packages/__VUE/addresslist/components/ItemContents.vue
+++ b/src/packages/__VUE/addresslist/components/ItemContents.vue
@@ -5,7 +5,7 @@
         <slot name="content-top">
           <div class="nut-address-list-item__info-contact-name">{{ item.addressName }}</div>
           <div class="nut-address-list-item__info-contact-tel">{{ item.phone }}</div>
-          <div class="nut-address-list-item__info-contact-default" v-if="item.defaultAddress">{{
+          <div v-if="item.defaultAddress" class="nut-address-list-item__info-contact-default">{{
             translate('default')
           }}</div>
         </slot>
diff --git a/src/packages/__VUE/addresslist/demo.vue b/src/packages/__VUE/addresslist/demo.vue
index 3034cf4a17..6bb165996f 100644
--- a/src/packages/__VUE/addresslist/demo.vue
+++ b/src/packages/__VUE/addresslist/demo.vue
@@ -3,11 +3,11 @@
     <h2>{{ translate('basic') }}</h2>
     <nut-address-list
       :data="data"
+      :show-bottom-button="false"
+      :data-options="dataOptions"
       @click-item="clickItem"
       @del-icon="delClick"
       @edit-icon="editClick"
-      :show-bottom-button="false"
-      :data-options="dataOptions"
     >
     </nut-address-list>
     <h2>{{ translate('title1') }}</h2>
@@ -15,13 +15,13 @@
       :data="data"
       long-Press
       :show-bottom-button="false"
+      :data-options="dataOptions"
       @click-item="clickItem"
       @del-icon="delClick"
       @edit-icon="editClick"
       @long-copy="copyClick"
       @long-set="setClick"
       @long-del="delClickLong"
-      :data-options="dataOptions"
     >
     </nut-address-list>
     <h2>{{ translate('title2') }}</h2>
@@ -29,12 +29,12 @@
       :data="data"
       swipeEdition
       show-bottom-button
+      :data-options="dataOptions"
       @click-item="clickItem"
       @del-icon="delClick"
       @edit-icon="editClick"
       @swipe-del="delClickSwipe"
       @add="addAddress"
-      :data-options="dataOptions"
     >
     </nut-address-list>
   </div>
diff --git a/src/packages/__VUE/addresslist/index.taro.vue b/src/packages/__VUE/addresslist/index.taro.vue
index f7658277d8..70f991cd43 100644
--- a/src/packages/__VUE/addresslist/index.taro.vue
+++ b/src/packages/__VUE/addresslist/index.taro.vue
@@ -23,14 +23,14 @@
       <template #content-addrs>
         <slot name="item-addr" :item="item"></slot>
       </template>
-      <template #longpress-all v-if="longPress">
+      <template v-if="longPress" #longpress-all>
         <slot name="longpress-btns" :item="item"></slot>
       </template>
-      <template #swipe-right-btn v-if="swipeEdition">
+      <template v-if="swipeEdition" #swipe-right-btn>
         <slot name="swipe-right" :item="item"></slot>
       </template>
     </general-shell>
-    <div class="nut-address-list__bottom" v-if="showBottomButton" @click="addAddress">
+    <div v-if="showBottomButton" class="nut-address-list__bottom" @click="addAddress">
       <nut-button block type="danger">{{ translate('addAddress') }}</nut-button>
     </div>
   </view>
diff --git a/src/packages/__VUE/addresslist/index.vue b/src/packages/__VUE/addresslist/index.vue
index e7f217f110..0538410424 100644
--- a/src/packages/__VUE/addresslist/index.vue
+++ b/src/packages/__VUE/addresslist/index.vue
@@ -23,14 +23,14 @@
       <template #content-addrs>
         <slot name="item-addr" :item="item"></slot>
       </template>
-      <template #longpress-all v-if="longPress">
+      <template v-if="longPress" #longpress-all>
         <slot name="longpress-btns" :item="item"></slot>
       </template>
-      <template #swipe-right-btn v-if="swipeEdition">
+      <template v-if="swipeEdition" #swipe-right-btn>
         <slot name="swipe-right" :item="item"></slot>
       </template>
     </general-shell>
-    <div class="nut-address-list__bottom" v-if="showBottomButton" @click="addAddress">
+    <div v-if="showBottomButton" class="nut-address-list__bottom" @click="addAddress">
       <nut-button block type="danger">{{ translate('addAddress') }}</nut-button>
     </div>
   </div>
diff --git a/src/packages/__VUE/animate/index.taro.vue b/src/packages/__VUE/animate/index.taro.vue
index 77c1862f84..3d15cebbd3 100644
--- a/src/packages/__VUE/animate/index.taro.vue
+++ b/src/packages/__VUE/animate/index.taro.vue
@@ -2,10 +2,10 @@
   <view class="nut-animate">
     <view
       :class="classes"
-      @click="handleClick"
       :style="{
         animationDuration: duration ? `${duration}ms` : undefined
       }"
+      @click="handleClick"
     >
       <slot></slot>
     </view>
diff --git a/src/packages/__VUE/animate/index.vue b/src/packages/__VUE/animate/index.vue
index 77c1862f84..3d15cebbd3 100644
--- a/src/packages/__VUE/animate/index.vue
+++ b/src/packages/__VUE/animate/index.vue
@@ -2,10 +2,10 @@
   <view class="nut-animate">
     <view
       :class="classes"
-      @click="handleClick"
       :style="{
         animationDuration: duration ? `${duration}ms` : undefined
       }"
+      @click="handleClick"
     >
       <slot></slot>
     </view>
diff --git a/src/packages/__VUE/audio/demo.vue b/src/packages/__VUE/audio/demo.vue
index ac1b1d557b..e63a61b2a4 100644
--- a/src/packages/__VUE/audio/demo.vue
+++ b/src/packages/__VUE/audio/demo.vue
@@ -12,14 +12,14 @@
 
     <h2>{{ translate('voicePlay') }}</h2>
     <nut-audio
+      ref="audioDemo"
       style="margin-left: 20px"
       url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
       :muted="muted"
       :autoplay="autoplay"
       :loop="false"
-      @can-play="onCanplay"
       type="none"
-      ref="audioDemo"
+      @can-play="onCanplay"
     >
       <div class="nut-voice">
         <Voice></Voice>
diff --git a/src/packages/__VUE/audio/index.vue b/src/packages/__VUE/audio/index.vue
index 4c64b14cbc..9db79418c8 100644
--- a/src/packages/__VUE/audio/index.vue
+++ b/src/packages/__VUE/audio/index.vue
@@ -3,16 +3,16 @@
 
   <div class="nut-audio">
     <!-- 进度条 -->
-    <div class="nut-audio__progress" v-if="type == 'progress'">
+    <div v-if="type == 'progress'" class="nut-audio__progress">
       <!-- 时间显示 -->
       <div class="nut-audio__time">{{ currentDuration }}</div>
       <div class="nut-audio__bar">
         <nut-range
           v-model="percent"
           hidden-range
-          @change="progressChange"
           inactive-color="#cccccc"
           active-color="#fa2c19"
+          @change="progressChange"
         >
           <template #button>
             <div class="nut-audio__button--custom"></div>
@@ -24,7 +24,7 @@
     </div>
 
     <!-- 自定义 -->
-    <div class="nut-audio__icon" v-if="type == 'icon'">
+    <div v-if="type == 'icon'" class="nut-audio__icon">
       <div
         :class="['nut-audio__icon--box', playing ? 'nut-audio__icon--play' : 'nut-audio__icon--stop']"
         @click="changeStatus"
@@ -44,17 +44,17 @@
     </template>
 
     <audio
+      ref="audioRef"
       class="audioMain"
       :controls="type == 'controls'"
-      ref="audioRef"
       :src="url"
       :preload="preload"
       :autoplay="autoplay"
       :loop="loop"
+      :muted="hanMuted"
       @timeupdate="onTimeupdate"
       @canplay="onCanplay"
       @ended="audioEnd"
-      :muted="hanMuted"
     >
     </audio>
   </div>
diff --git a/src/packages/__VUE/audiooperate/index.vue b/src/packages/__VUE/audiooperate/index.vue
index 5f0bd521d3..c89a335d01 100644
--- a/src/packages/__VUE/audiooperate/index.vue
+++ b/src/packages/__VUE/audiooperate/index.vue
@@ -1,21 +1,21 @@
 <template>
   <!--配合进度条使用 播放时长、 兼容是否支持 、暂停、 开启-->
   <div class="nut-audio-operate">
-    <div class="nut-audio-operate-item" @click="fastBack" v-if="type == 'back'"
-      ><nut-button type="primary" size="small" v-if="!customSlot">{{ translate('back') }}</nut-button
+    <div v-if="type == 'back'" class="nut-audio-operate-item" @click="fastBack"
+      ><nut-button v-if="!customSlot" type="primary" size="small">{{ translate('back') }}</nut-button
       ><slot></slot
     ></div>
-    <div class="nut-audio-operate-item" @click="changeStatus" v-if="type == 'play'"
-      ><nut-button type="primary" size="small" v-if="!customSlot">{{
+    <div v-if="type == 'play'" class="nut-audio-operate-item" @click="changeStatus"
+      ><nut-button v-if="!customSlot" type="primary" size="small">{{
         !audioData.playing ? `${translate('start')}` : `${translate('pause')}`
       }}</nut-button>
       <slot></slot
     ></div>
-    <div class="nut-audio-operate-item" @click="forward" v-if="type == 'forward'"
-      ><nut-button type="primary" size="small" v-if="!customSlot">快进</nut-button><slot></slot
+    <div v-if="type == 'forward'" class="nut-audio-operate-item" @click="forward"
+      ><nut-button v-if="!customSlot" type="primary" size="small">快进</nut-button><slot></slot
     ></div>
-    <div class="nut-audio-operate-item" @click="handleMute" v-if="type == 'mute'"
-      ><nut-button :type="!audioData.hanMuted ? 'primary' : 'default'" size="small" v-if="!customSlot">{{
+    <div v-if="type == 'mute'" class="nut-audio-operate-item" @click="handleMute"
+      ><nut-button v-if="!customSlot" :type="!audioData.hanMuted ? 'primary' : 'default'" size="small">{{
         translate('mute')
       }}</nut-button
       ><slot></slot
diff --git a/src/packages/__VUE/avatar/demo.vue b/src/packages/__VUE/avatar/demo.vue
index bf8c9c6105..f548b6ec87 100644
--- a/src/packages/__VUE/avatar/demo.vue
+++ b/src/packages/__VUE/avatar/demo.vue
@@ -116,7 +116,7 @@
     </nut-cell>
 
     <h2 class="demo-avatar-group-title"
-      >{{ translate('title9') }}<nut-button @click="addAvatar" size="mini">{{ translate('add') }}</nut-button></h2
+      >{{ translate('title9') }}<nut-button size="mini" @click="addAvatar">{{ translate('add') }}</nut-button></h2
     >
     <nut-cell>
       <nut-avatar-group max-count="4" zIndex="right">
diff --git a/src/packages/__VUE/avatar/index.taro.vue b/src/packages/__VUE/avatar/index.taro.vue
index 27cc032af2..0653644530 100644
--- a/src/packages/__VUE/avatar/index.taro.vue
+++ b/src/packages/__VUE/avatar/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :style="styles" :class="classes" ref="avatarRef">
+  <view ref="avatarRef" :style="styles" :class="classes">
     <slot></slot>
   </view>
 </template>
diff --git a/src/packages/__VUE/avatar/index.vue b/src/packages/__VUE/avatar/index.vue
index 27cc032af2..0653644530 100644
--- a/src/packages/__VUE/avatar/index.vue
+++ b/src/packages/__VUE/avatar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :style="styles" :class="classes" ref="avatarRef">
+  <view ref="avatarRef" :style="styles" :class="classes">
     <slot></slot>
   </view>
 </template>
diff --git a/src/packages/__VUE/avatargroup/index.taro.vue b/src/packages/__VUE/avatargroup/index.taro.vue
index b0dcd0ce15..b4f207ecee 100644
--- a/src/packages/__VUE/avatargroup/index.taro.vue
+++ b/src/packages/__VUE/avatargroup/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="nut-avatar-group" ref="avatarGroupRef" :style="styles">
+  <view ref="avatarGroupRef" class="nut-avatar-group" :style="styles">
     <slot></slot>
     <nut-avatar
       v-if="foldCount > 0"
diff --git a/src/packages/__VUE/avatargroup/index.vue b/src/packages/__VUE/avatargroup/index.vue
index d8a0820f27..1767367ee9 100644
--- a/src/packages/__VUE/avatargroup/index.vue
+++ b/src/packages/__VUE/avatargroup/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="nut-avatar-group" ref="avatarGroupRef" :style="styles">
+  <view ref="avatarGroupRef" class="nut-avatar-group" :style="styles">
     <slot></slot>
     <nut-avatar
       v-if="foldCount > 0"
diff --git a/src/packages/__VUE/backtop/demo.vue b/src/packages/__VUE/backtop/demo.vue
index 4fd6d38bf5..f8b1f2a5b5 100644
--- a/src/packages/__VUE/backtop/demo.vue
+++ b/src/packages/__VUE/backtop/demo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo" id="elId">
+  <div id="elId" class="demo">
     <h2>{{ translate('title') }}</h2>
     <div class="text-data">{{ translate('content') }}1</div>
     <div class="text-data">{{ translate('content') }}2</div>
@@ -25,13 +25,13 @@
     <div class="text-data">{{ translate('content') }}22</div>
     <div class="text-data">{{ translate('content') }}23</div>
     <div class="text-data">{{ translate('content') }}24</div>
-    <nut-backtop @click="handleClick" el-id="elId" :distance="100" :bottom="110">
+    <nut-backtop el-id="elId" :distance="100" :bottom="110" @click="handleClick">
       <view class="backtop-demo">
         <Top width="12px" height="12px" class="nut-backtop-main"></Top>
         <view class="title">{{ translate('backText') }}</view>
       </view>
     </nut-backtop>
-    <nut-backtop @click="handleClick" el-id="elId" :distance="200" :bottom="50"></nut-backtop>
+    <nut-backtop el-id="elId" :distance="200" :bottom="50" @click="handleClick"></nut-backtop>
   </div>
 </template>
 
diff --git a/src/packages/__VUE/backtop/index.taro.vue b/src/packages/__VUE/backtop/index.taro.vue
index 4d429b0924..21b6ca12a1 100644
--- a/src/packages/__VUE/backtop/index.taro.vue
+++ b/src/packages/__VUE/backtop/index.taro.vue
@@ -3,9 +3,9 @@
     <nut-scroll-view
       :scroll-y="true"
       :style="{ height }"
-      @scroll="scroll"
       :scroll-top="scrollTop"
       scroll-with-animation="true"
+      @scroll="scroll"
     >
       <slot name="content"></slot>
     </nut-scroll-view>
diff --git a/src/packages/__VUE/badge/index.taro.vue b/src/packages/__VUE/badge/index.taro.vue
index e0f1d29ce7..3546c767b1 100644
--- a/src/packages/__VUE/badge/index.taro.vue
+++ b/src/packages/__VUE/badge/index.taro.vue
@@ -1,15 +1,15 @@
 <template>
   <view class="nut-badge">
-    <view class="nut-badge__icon" v-show="!hidden && !dot && $slots.icon" :style="stl">
+    <view v-show="!hidden && !dot && $slots.icon" class="nut-badge__icon" :style="stl">
       <slot name="icon"></slot>
     </view>
     <slot></slot>
     <view
       v-show="!hidden && (content || dot)"
-      v-text="content"
       class="nut-badge__content nut-badge__content--sup"
       :class="{ 'nut-badge__content--dot': dot, 'nut-badge__content--bubble': !dot && bubble }"
       :style="stl"
+      v-text="content"
     >
     </view>
   </view>
diff --git a/src/packages/__VUE/badge/index.vue b/src/packages/__VUE/badge/index.vue
index e0f1d29ce7..3546c767b1 100644
--- a/src/packages/__VUE/badge/index.vue
+++ b/src/packages/__VUE/badge/index.vue
@@ -1,15 +1,15 @@
 <template>
   <view class="nut-badge">
-    <view class="nut-badge__icon" v-show="!hidden && !dot && $slots.icon" :style="stl">
+    <view v-show="!hidden && !dot && $slots.icon" class="nut-badge__icon" :style="stl">
       <slot name="icon"></slot>
     </view>
     <slot></slot>
     <view
       v-show="!hidden && (content || dot)"
-      v-text="content"
       class="nut-badge__content nut-badge__content--sup"
       :class="{ 'nut-badge__content--dot': dot, 'nut-badge__content--bubble': !dot && bubble }"
       :style="stl"
+      v-text="content"
     >
     </view>
   </view>
diff --git a/src/packages/__VUE/barrage/demo.vue b/src/packages/__VUE/barrage/demo.vue
index 8219a16887..2bb50f618f 100644
--- a/src/packages/__VUE/barrage/demo.vue
+++ b/src/packages/__VUE/barrage/demo.vue
@@ -5,7 +5,7 @@
       <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
     </nut-cell>
     <div class="test">
-      <nut-button @click="addDanmu" class="add nut-button--primary">{{ translate('btn1') }}</nut-button>
+      <nut-button class="add nut-button--primary" @click="addDanmu">{{ translate('btn1') }}</nut-button>
     </div>
     <h2>{{ translate('slotTitle') }}</h2>
     <nut-cell class="danmu-box">
diff --git a/src/packages/__VUE/barrage/index.vue b/src/packages/__VUE/barrage/index.vue
index 7dcab17a0a..993167acd4 100644
--- a/src/packages/__VUE/barrage/index.vue
+++ b/src/packages/__VUE/barrage/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div ref="dmBody" :class="classes">
     <div ref="dmContainer" :class="['dmContainer', $slots.default && 'slotContainer']">
-      <div :class="['slotBody', 'slotBody' + classTime]" v-if="$slots.default">
+      <div v-if="$slots.default" :class="['slotBody', 'slotBody' + classTime]">
         <slot></slot>
       </div>
     </div>
diff --git a/src/packages/__VUE/button/index.taro.vue b/src/packages/__VUE/button/index.taro.vue
index eb7428c206..1845bb284b 100644
--- a/src/packages/__VUE/button/index.taro.vue
+++ b/src/packages/__VUE/button/index.taro.vue
@@ -2,14 +2,14 @@
   <button
     :class="classes"
     :style="getStyle"
-    @click="handleClick"
     :type="Taro.getEnv() === Taro.ENV_TYPE.WEB ? formType : undefined"
     :formType="formType === 'button' ? undefined : formType"
+    @click="handleClick"
   >
     <view class="nut-button__wrap">
-      <Loading class="nut-icon-loading" v-if="loading" />
-      <slot name="icon" v-if="$slots.icon && !loading"></slot>
-      <view :class="{ 'nut-button__text': $slots.icon || loading }" v-if="$slots.default">
+      <Loading v-if="loading" class="nut-icon-loading" />
+      <slot v-if="$slots.icon && !loading" name="icon"></slot>
+      <view v-if="$slots.default" :class="{ 'nut-button__text': $slots.icon || loading }">
         <slot></slot>
       </view>
     </view>
diff --git a/src/packages/__VUE/button/index.vue b/src/packages/__VUE/button/index.vue
index 9d40ac1c36..b582188a2b 100644
--- a/src/packages/__VUE/button/index.vue
+++ b/src/packages/__VUE/button/index.vue
@@ -1,9 +1,9 @@
 <template>
   <view :class="classes" :style="getStyle" @click="handleClick">
     <view class="nut-button__wrap">
-      <Loading class="nut-icon-loading" v-if="loading" />
-      <slot name="icon" v-if="$slots.icon && !loading"></slot>
-      <view :class="{ 'nut-button__text': $slots.icon || loading }" v-if="$slots.default">
+      <Loading v-if="loading" class="nut-icon-loading" />
+      <slot v-if="$slots.icon && !loading" name="icon"></slot>
+      <view v-if="$slots.default" :class="{ 'nut-button__text': $slots.icon || loading }">
         <slot></slot>
       </view>
     </view>
diff --git a/src/packages/__VUE/calendar/demo.vue b/src/packages/__VUE/calendar/demo.vue
index 0992dbd072..db4e6e0e44 100644
--- a/src/packages/__VUE/calendar/demo.vue
+++ b/src/packages/__VUE/calendar/demo.vue
@@ -12,10 +12,10 @@
       <nut-calendar
         v-model:visible="isVisible"
         :default-value="date"
-        @close="closeSwitch('isVisible')"
-        @choose="setChooseValue"
         :start-date="`2022-01-11`"
         :end-date="`2022-11-30`"
+        @close="closeSwitch('isVisible')"
+        @choose="setChooseValue"
       >
       </nut-calendar>
     </div>
@@ -74,10 +74,10 @@
         type="week"
         :start-date="`2019-12-22`"
         :end-date="`2021-01-08`"
+        :first-day-of-week="1"
         @close="closeSwitch('isVisible9')"
         @choose="setChooseValue9"
         @select="select"
-        :first-day-of-week="1"
       >
       </nut-calendar>
     </div>
@@ -92,12 +92,12 @@
       </nut-cell>
       <nut-calendar
         v-model:visible="isVisible3"
-        @close="closeSwitch('isVisible3')"
-        @choose="setChooseValue3"
         :default-value="date3"
         :start-date="null"
         :end-date="null"
         :is-auto-back-fill="true"
+        @close="closeSwitch('isVisible3')"
+        @choose="setChooseValue3"
       >
       </nut-calendar>
     </div>
@@ -105,8 +105,8 @@
       <nut-cell
         :show-icon="true"
         :title="translate('range')"
-        @click="openSwitch('isVisible4')"
         :desc="date4 ? `${date4[0]}${translate('conjunction')}${date4[1]}` : translate('please')"
+        @click="openSwitch('isVisible4')"
       >
       </nut-cell>
       <nut-calendar
@@ -115,9 +115,9 @@
         type="range"
         :start-date="`2022-01-01`"
         :end-date="`2022-12-31`"
+        :is-auto-back-fill="true"
         @close="closeSwitch('isVisible4')"
         @choose="setChooseValue4"
-        :is-auto-back-fill="true"
       >
       </nut-calendar>
     </div>
@@ -168,14 +168,14 @@
         v-model:visible="isVisible6"
         :default-value="date6"
         type="range"
-        @close="closeSwitch('isVisible6')"
-        @choose="setChooseValue6"
         :start-date="`2022-01-01`"
         :end-date="`2022-12-31`"
         confirm-text="submit"
         :start-text="translate('enter')"
         :end-text="translate('leave')"
         :title="translate('please')"
+        @close="closeSwitch('isVisible6')"
+        @choose="setChooseValue6"
       >
         <template #day="date">
           <span>{{ renderDate(date) }}</span>
@@ -197,9 +197,9 @@
       <nut-calendar
         v-model:visible="isVisible8"
         :default-value="date8"
+        :first-day-of-week="2"
         @close="closeSwitch('isVisible8')"
         @choose="setChooseValue8"
-        :first-day-of-week="2"
       >
       </nut-calendar>
     </div>
@@ -209,9 +209,9 @@
         :poppable="false"
         :default-value="date2"
         :is-auto-back-fill="true"
-        @choose="setChooseValue2"
         :start-date="`2020-02-01`"
         :end-date="`2020-12-30`"
+        @choose="setChooseValue2"
       >
       </nut-calendar>
     </div>
diff --git a/src/packages/__VUE/calendar/index.taro.vue b/src/packages/__VUE/calendar/index.taro.vue
index 362be39c0f..c903c78483 100644
--- a/src/packages/__VUE/calendar/index.taro.vue
+++ b/src/packages/__VUE/calendar/index.taro.vue
@@ -6,9 +6,9 @@
     round
     closeable
     v-bind="$attrs"
+    :style="{ height: '85vh' }"
     @click-overlay="closePopup"
     @click-close-icon="closePopup"
-    :style="{ height: '85vh' }"
   >
     <nut-calendar-item
       ref="calendarRef"
@@ -19,10 +19,6 @@
       :default-value="defaultValue"
       :start-date="startDate"
       :end-date="endDate"
-      @update="update"
-      @close="close"
-      @choose="choose"
-      @select="select"
       :confirm-text="confirmText"
       :start-text="startText"
       :end-text="endText"
@@ -31,53 +27,57 @@
       :show-sub-title="showSubTitle"
       :to-date-animation="toDateAnimation"
       :first-day-of-week="firstDayOfWeek"
+      @update="update"
+      @close="close"
+      @choose="choose"
+      @select="select"
     >
-      <template #btn v-if="showTopBtn">
+      <template v-if="showTopBtn" #btn>
         <slot name="btn"> </slot>
       </template>
-      <template #day="date" v-if="dayInfo">
+      <template v-if="dayInfo" #day="date">
         <slot name="day" :date="date.date"> </slot>
       </template>
-      <template #top-info="date" v-if="topInfo">
+      <template v-if="topInfo" #top-info="date">
         <slot name="top-info" :date="date.date"> </slot>
       </template>
-      <template #bottom-info="date" v-if="bottomInfo">
+      <template v-if="bottomInfo" #bottom-info="date">
         <slot name="bottom-info" :date="date.date"> </slot>
       </template>
     </nut-calendar-item>
   </nut-popup>
   <nut-calendar-item
     v-else
+    ref="calendarRef"
     :type="type"
     :is-auto-back-fill="isAutoBackFill"
     :poppable="poppable"
     :title="title"
-    ref="calendarRef"
     :confirm-text="confirmText"
     :start-text="startText"
     :end-text="endText"
     :default-value="defaultValue"
     :start-date="startDate"
     :end-date="endDate"
-    @close="close"
-    @choose="choose"
-    @select="select"
     :show-title="showTitle"
     :show-sub-title="showSubTitle"
     :to-date-animation="toDateAnimation"
     :show-today="showToday"
     :first-day-of-week="firstDayOfWeek"
+    @close="close"
+    @choose="choose"
+    @select="select"
   >
-    <template #btn v-if="showTopBtn">
+    <template v-if="showTopBtn" #btn>
       <slot name="btn"> </slot>
     </template>
-    <template #day="date" v-if="dayInfo">
+    <template v-if="dayInfo" #day="date">
       <slot name="day" :date="date.date"> </slot>
     </template>
-    <template #top-info="date" v-if="topInfo">
+    <template v-if="topInfo" #top-info="date">
       <slot name="top-info" :date="date.date"> </slot>
     </template>
-    <template #bottom-info="date" v-if="bottomInfo">
+    <template v-if="bottomInfo" #bottom-info="date">
       <slot name="bottom-info" :date="date.date"> </slot>
     </template>
   </nut-calendar-item>
diff --git a/src/packages/__VUE/calendar/index.vue b/src/packages/__VUE/calendar/index.vue
index ad0858ec8e..b9cfc4937a 100644
--- a/src/packages/__VUE/calendar/index.vue
+++ b/src/packages/__VUE/calendar/index.vue
@@ -6,9 +6,9 @@
     round
     closeable
     v-bind="$attrs"
+    :style="{ height: '85vh' }"
     @click-overlay="closePopup"
     @click-close-icon="closePopup"
-    :style="{ height: '85vh' }"
   >
     <nut-calendar-item
       ref="calendarRef"
@@ -19,10 +19,6 @@
       :default-value="defaultValue"
       :start-date="startDate"
       :end-date="endDate"
-      @update="update"
-      @close="close"
-      @choose="choose"
-      @select="select"
       :confirm-text="confirmText"
       :start-text="startText"
       :end-text="endText"
@@ -31,54 +27,58 @@
       :show-sub-title="showSubTitle"
       :to-date-animation="toDateAnimation"
       :first-day-of-week="firstDayOfWeek"
+      @update="update"
+      @close="close"
+      @choose="choose"
+      @select="select"
     >
-      <template #btn v-if="showTopBtn">
+      <template v-if="showTopBtn" #btn>
         <slot name="btn"> </slot>
       </template>
-      <template #day="date" v-if="dayInfo">
+      <template v-if="dayInfo" #day="date">
         <slot name="day" :date="date.date"> </slot>
       </template>
-      <template #top-info="date" v-if="topInfo">
+      <template v-if="topInfo" #top-info="date">
         <slot name="top-info" :date="date.date"> </slot>
       </template>
-      <template #bottom-info="date" v-if="bottomInfo">
+      <template v-if="bottomInfo" #bottom-info="date">
         <slot name="bottom-info" :date="date.date"> </slot>
       </template>
     </nut-calendar-item>
   </nut-popup>
   <nut-calendar-item
     v-else
+    ref="calendarRef"
     :type="type"
     :is-auto-back-fill="isAutoBackFill"
     :poppable="poppable"
     :title="title"
-    ref="calendarRef"
     :confirm-text="confirmText"
     :start-text="startText"
     :end-text="endText"
     :default-value="defaultValue"
     :start-date="startDate"
     :end-date="endDate"
-    @update="update"
-    @close="close"
-    @choose="choose"
-    @select="select"
     :show-title="showTitle"
     :show-sub-title="showSubTitle"
     :to-date-animation="toDateAnimation"
     :show-today="showToday"
     :first-day-of-week="firstDayOfWeek"
+    @update="update"
+    @close="close"
+    @choose="choose"
+    @select="select"
   >
-    <template #btn v-if="showTopBtn">
+    <template v-if="showTopBtn" #btn>
       <slot name="btn"> </slot>
     </template>
-    <template #day="date" v-if="dayInfo">
+    <template v-if="dayInfo" #day="date">
       <slot name="day" :date="date.date"> </slot>
     </template>
-    <template #top-info="date" v-if="topInfo">
+    <template v-if="topInfo" #top-info="date">
       <slot name="top-info" :date="date.date"> </slot>
     </template>
-    <template #bottom-info="date" v-if="bottomInfo">
+    <template v-if="bottomInfo" #bottom-info="date">
       <slot name="bottom-info" :date="date.date"> </slot>
     </template>
   </nut-calendar-item>
diff --git a/src/packages/__VUE/calendaritem/index.taro.vue b/src/packages/__VUE/calendaritem/index.taro.vue
index 5adecd87c1..9199758e27 100644
--- a/src/packages/__VUE/calendaritem/index.taro.vue
+++ b/src/packages/__VUE/calendaritem/index.taro.vue
@@ -8,33 +8,33 @@
   >
     <!-- header -->
     <view class="nut-calendar__header">
-      <view class="nut-calendar__header-title" v-if="showTitle">{{ title || translate('title') }}</view>
-      <view class="nut-calendar__header-slot" v-if="showTopBtn">
+      <view v-if="showTitle" class="nut-calendar__header-title">{{ title || translate('title') }}</view>
+      <view v-if="showTopBtn" class="nut-calendar__header-slot">
         <slot name="btn"> </slot>
       </view>
-      <view class="nut-calendar__header-subtitle" v-if="showSubTitle">{{ yearMonthTitle }}</view>
+      <view v-if="showSubTitle" class="nut-calendar__header-subtitle">{{ yearMonthTitle }}</view>
       <view class="nut-calendar__weekdays">
         <view
-          class="nut-calendar__weekday"
-          :class="{ weekend: item.weekend }"
           v-for="(item, index) of weeks"
           :key="index"
+          class="nut-calendar__weekday"
+          :class="{ weekend: item.weekend }"
           >{{ item.day }}</view
         >
       </view>
     </view>
     <!-- content-->
     <nut-scroll-view
+      ref="months"
       :scroll-top="scrollTop"
       :scroll-y="true"
       class="nut-calendar__content"
-      @scroll="mothsViewScroll"
       :scroll-with-animation="scrollWithAnimation"
-      ref="months"
+      @scroll="mothsViewScroll"
     >
       <view class="nut-calendar__panel" :style="{ height: containerHeight }">
         <view class="nut-calendar__body" :style="{ transform: `translateY(${translateY}px)` }">
-          <view class="nut-calendar__month" v-for="(month, index) of compConthsData" :key="index">
+          <view v-for="(month, index) of compConthsData" :key="index" class="nut-calendar__month">
             <view class="nut-calendar__month-title">{{ month.title }}</view>
             <view class="nut-calendar__days">
               <view class="nut-calendar__days-item" :class="type === 'range' ? 'nut-calendar__days-item--range' : ''">
@@ -46,23 +46,23 @@
                         {{ day.type == 'curr' ? day.day : '' }}
                       </slot>
                     </view>
-                    <view class="nut-calendar__day-tips nut-calendar__day-tips--top" v-if="topInfo">
+                    <view v-if="topInfo" class="nut-calendar__day-tips nut-calendar__day-tips--top">
                       <slot name="top-info" :date="day.type == 'curr' ? day : ''"> </slot>
                     </view>
-                    <view class="nut-calendar__day-tips nut-calendar__day-tips--bottom" v-if="bottomInfo">
+                    <view v-if="bottomInfo" class="nut-calendar__day-tips nut-calendar__day-tips--bottom">
                       <slot name="bottom-info" :date="day.type == 'curr' ? day : ''"> </slot>
                     </view>
-                    <view class="nut-calendar__day-tips--curr" v-if="!bottomInfo && showToday && isCurrDay(day)">
+                    <view v-if="!bottomInfo && showToday && isCurrDay(day)" class="nut-calendar__day-tips--curr">
                       {{ translate('today') }}
                     </view>
                     <view
+                      v-if="isStartTip(day, month)"
                       class="nut-calendar__day-tip"
                       :class="{ 'nut-calendar__day-tips--top': rangeTip() }"
-                      v-if="isStartTip(day, month)"
                     >
                       {{ startText || translate('start') }}
                     </view>
-                    <view class="nut-calendar__day-tip" v-if="isEndTip(day, month)">{{
+                    <view v-if="isEndTip(day, month)" class="nut-calendar__day-tip">{{
                       endText || translate('end')
                     }}</view>
                   </view>
@@ -74,7 +74,7 @@
       </view>
     </nut-scroll-view>
     <!-- footer-->
-    <view class="nut-calendar__footer" v-if="poppable && !isAutoBackFill">
+    <view v-if="poppable && !isAutoBackFill" class="nut-calendar__footer">
       <view class="nut-calendar__confirm" @click="confirm">{{ confirmText || translate('confirm') }}</view>
     </view>
   </view>
diff --git a/src/packages/__VUE/calendaritem/index.vue b/src/packages/__VUE/calendaritem/index.vue
index ab3468b427..2378535728 100644
--- a/src/packages/__VUE/calendaritem/index.vue
+++ b/src/packages/__VUE/calendaritem/index.vue
@@ -8,26 +8,26 @@
   >
     <!-- header -->
     <view class="nut-calendar__header">
-      <view class="nut-calendar__header-title" v-if="showTitle">{{ title || translate('title') }}</view>
-      <view class="nut-calendar__header-slot" v-if="showTopBtn">
+      <view v-if="showTitle" class="nut-calendar__header-title">{{ title || translate('title') }}</view>
+      <view v-if="showTopBtn" class="nut-calendar__header-slot">
         <slot name="btn"> </slot>
       </view>
-      <view class="nut-calendar__header-subtitle" v-if="showSubTitle">{{ yearMonthTitle }}</view>
-      <view class="nut-calendar__weekdays" ref="weeksPanel">
+      <view v-if="showSubTitle" class="nut-calendar__header-subtitle">{{ yearMonthTitle }}</view>
+      <view ref="weeksPanel" class="nut-calendar__weekdays">
         <view
-          class="nut-calendar__weekday"
-          :class="{ weekend: item.weekend }"
           v-for="(item, index) of weeks"
           :key="index"
+          class="nut-calendar__weekday"
+          :class="{ weekend: item.weekend }"
           >{{ item.day }}</view
         >
       </view>
     </view>
     <!-- content-->
-    <view class="nut-calendar__content" ref="months" @scroll="mothsViewScroll">
-      <view class="nut-calendar__panel" ref="monthsPanel">
-        <view class="nut-calendar__body" ref="viewArea" :style="{ transform: `translateY(${translateY}px)` }">
-          <view class="nut-calendar__month" v-for="(month, index) of compConthsData" :key="index">
+    <view ref="months" class="nut-calendar__content" @scroll="mothsViewScroll">
+      <view ref="monthsPanel" class="nut-calendar__panel">
+        <view ref="viewArea" class="nut-calendar__body" :style="{ transform: `translateY(${translateY}px)` }">
+          <view v-for="(month, index) of compConthsData" :key="index" class="nut-calendar__month">
             <view class="nut-calendar__month-title">{{ month.title }}</view>
             <view class="nut-calendar__days">
               <view class="nut-calendar__days-item" :class="type === 'range' ? 'nut-calendar__days-item--range' : ''">
@@ -39,23 +39,23 @@
                         {{ day.type == 'curr' ? day.day : '' }}
                       </slot>
                     </view>
-                    <view class="nut-calendar__day-tips nut-calendar__day-tips--top" v-if="topInfo">
+                    <view v-if="topInfo" class="nut-calendar__day-tips nut-calendar__day-tips--top">
                       <slot name="top-info" :date="day.type == 'curr' ? day : ''"> </slot>
                     </view>
-                    <view class="nut-calendar__day-tips nut-calendar__day-tips--bottom" v-if="bottomInfo">
+                    <view v-if="bottomInfo" class="nut-calendar__day-tips nut-calendar__day-tips--bottom">
                       <slot name="bottom-info" :date="day.type == 'curr' ? day : ''"> </slot>
                     </view>
-                    <view class="nut-calendar__day-tips--curr" v-if="!bottomInfo && showToday && isCurrDay(day)">
+                    <view v-if="!bottomInfo && showToday && isCurrDay(day)" class="nut-calendar__day-tips--curr">
                       {{ translate('today') }}
                     </view>
                     <view
+                      v-if="isStartTip(day, month)"
                       class="nut-calendar__day-tip"
                       :class="{ 'nut-calendar__day-tips--top': rangeTip() }"
-                      v-if="isStartTip(day, month)"
                     >
                       {{ startText || translate('start') }}
                     </view>
-                    <view class="nut-calendar__day-tip" v-if="isEndTip(day, month)">{{
+                    <view v-if="isEndTip(day, month)" class="nut-calendar__day-tip">{{
                       endText || translate('end')
                     }}</view>
                   </view>
@@ -67,7 +67,7 @@
       </view>
     </view>
     <!-- footer-->
-    <view class="nut-calendar__footer" v-if="poppable && !isAutoBackFill">
+    <view v-if="poppable && !isAutoBackFill" class="nut-calendar__footer">
       <view class="nut-calendar__confirm" @click="confirm">{{ confirmText || translate('confirm') }}</view>
     </view>
   </view>
diff --git a/src/packages/__VUE/card/index.taro.vue b/src/packages/__VUE/card/index.taro.vue
index 323f58629c..d409d4ce56 100644
--- a/src/packages/__VUE/card/index.taro.vue
+++ b/src/packages/__VUE/card/index.taro.vue
@@ -6,7 +6,7 @@
     <div class="nut-card__right">
       <div class="nut-card__right__title">{{ title }}</div>
       <slot name="prolist"></slot>
-      <div class="nut-card__right__price" v-if="isNeedPrice">
+      <div v-if="isNeedPrice" class="nut-card__right__price">
         <slot name="price">
           <nut-price :price="price"></nut-price>
         </slot>
diff --git a/src/packages/__VUE/card/index.vue b/src/packages/__VUE/card/index.vue
index d8afe2c168..b8f05786b9 100644
--- a/src/packages/__VUE/card/index.vue
+++ b/src/packages/__VUE/card/index.vue
@@ -6,7 +6,7 @@
     <div class="nut-card__right">
       <div class="nut-card__right__title">{{ title }}</div>
       <slot name="prolist"></slot>
-      <div class="nut-card__right__price" v-if="isNeedPrice">
+      <div v-if="isNeedPrice" class="nut-card__right__price">
         <slot name="price">
           <nut-price :price="price"></nut-price>
         </slot>
diff --git a/src/packages/__VUE/cascader/cascader-item.taro.vue b/src/packages/__VUE/cascader/cascader-item.taro.vue
index 62acd4bc12..c6be5832ab 100644
--- a/src/packages/__VUE/cascader/cascader-item.taro.vue
+++ b/src/packages/__VUE/cascader/cascader-item.taro.vue
@@ -1,7 +1,7 @@
 <template>
-  <nut-tabs class="nut-cascader" v-model="tabsCursor" @click="handleTabClick" title-scroll>
+  <nut-tabs v-model="tabsCursor" class="nut-cascader" title-scroll @click="handleTabClick">
     <template v-if="!initLoading && panes.length">
-      <nut-tab-pane v-for="(pane, index) in panes" :title="formatTabTitle(pane)" :key="index">
+      <nut-tab-pane v-for="(pane, index) in panes" :key="index" :title="formatTabTitle(pane)">
         <view role="menu" class="nut-cascader-pane">
           <nut-scroll-view :scrollY="true" style="height: 100%">
             <template v-for="node in pane.nodes" :key="node.value">
diff --git a/src/packages/__VUE/cascader/cascader-item.vue b/src/packages/__VUE/cascader/cascader-item.vue
index 1e2f139e8e..464584d9dd 100644
--- a/src/packages/__VUE/cascader/cascader-item.vue
+++ b/src/packages/__VUE/cascader/cascader-item.vue
@@ -1,7 +1,7 @@
 <template>
-  <nut-tabs class="nut-cascader" v-model="tabsCursor" @click="handleTabClick" title-scroll>
+  <nut-tabs v-model="tabsCursor" class="nut-cascader" title-scroll @click="handleTabClick">
     <template v-if="!initLoading && panes.length">
-      <nut-tab-pane v-for="(pane, index) in panes" :title="formatTabTitle(pane)" :key="index">
+      <nut-tab-pane v-for="(pane, index) in panes" :key="index" :title="formatTabTitle(pane)">
         <view role="menu" class="nut-cascader-pane">
           <template v-for="node in pane.nodes" :key="node.value">
             <view
diff --git a/src/packages/__VUE/cascader/demo.vue b/src/packages/__VUE/cascader/demo.vue
index 2c5526ebb7..0a3198423e 100644
--- a/src/packages/__VUE/cascader/demo.vue
+++ b/src/packages/__VUE/cascader/demo.vue
@@ -9,12 +9,12 @@
     >
     </nut-cell>
     <nut-cascader
-      :title="translate('addressTip')"
       v-model:visible="demo1.visible"
       v-model="demo1.value"
+      :title="translate('addressTip')"
+      :options="demo1.options"
       @change="events.change"
       @path-change="events.pathChange"
-      :options="demo1.options"
     ></nut-cascader>
 
     <h2>{{ translate('title1') }}</h2>
@@ -25,15 +25,15 @@
     >
     </nut-cell>
     <nut-cascader
-      :title="translate('addressTip')"
       v-model:visible="demo2.visible"
       v-model="demo2.value"
+      :title="translate('addressTip')"
       labelKey="text"
-      @change="events.change"
-      @path-change="events.pathChange"
       valueKey="text"
       childrenKey="items"
       :options="demo2.options"
+      @change="events.change"
+      @path-change="events.pathChange"
     ></nut-cascader>
 
     <h2>{{ translate('title2') }}</h2>
@@ -44,13 +44,13 @@
     >
     </nut-cell>
     <nut-cascader
-      :title="translate('addressTip')"
       v-model:visible="demo3.visible"
       v-model="demo3.value"
-      @change="events.change"
-      @path-change="events.pathChange"
+      :title="translate('addressTip')"
       lazy
       :lazyLoad="demo3.lazyLoad"
+      @change="events.change"
+      @path-change="events.pathChange"
     ></nut-cascader>
 
     <h2>{{ translate('title3') }}</h2>
@@ -61,14 +61,14 @@
     >
     </nut-cell>
     <nut-cascader
-      :title="translate('addressTip')"
       v-model:visible="demo4.visible"
       v-model="demo4.value"
-      @change="events.change"
-      @path-change="events.pathChange"
+      :title="translate('addressTip')"
       :options="demo4.options"
       lazy
       :lazyLoad="demo4.lazyLoad"
+      @change="events.change"
+      @path-change="events.pathChange"
     ></nut-cascader>
 
     <h2>{{ translate('title4') }}</h2>
@@ -79,13 +79,13 @@
     >
     </nut-cell>
     <nut-cascader
-      :title="translate('addressTip')"
       v-model:visible="demo5.visible"
       v-model="demo5.value"
-      @change="events.change"
-      @path-change="events.pathChange"
+      :title="translate('addressTip')"
       :options="demo5.options"
       :convertConfig="demo5.convertConfig"
+      @change="events.change"
+      @path-change="events.pathChange"
     ></nut-cascader>
   </div>
 </template>
diff --git a/src/packages/__VUE/cascader/index.taro.vue b/src/packages/__VUE/cascader/index.taro.vue
index e92079038b..092bbef8f5 100644
--- a/src/packages/__VUE/cascader/index.taro.vue
+++ b/src/packages/__VUE/cascader/index.taro.vue
@@ -16,8 +16,6 @@
       </template>
 
       <nut-cascader-item
-        @change="onChange"
-        @path-change="onPathChange"
         :modelValue="innerValue"
         :options="options"
         :lazy="lazy"
@@ -27,14 +25,14 @@
         :children-key="childrenKey"
         :convert-config="convertConfig"
         :visible="innerVisible"
+        @change="onChange"
+        @path-change="onPathChange"
       />
     </nut-popup>
   </template>
 
   <template v-else>
     <nut-cascader-item
-      @change="onChange"
-      @path-change="onPathChange"
       :modelValue="innerValue"
       :options="options"
       :lazy="lazy"
@@ -44,6 +42,8 @@
       :children-key="childrenKey"
       :convert-config="convertConfig"
       :visible="innerVisible"
+      @change="onChange"
+      @path-change="onPathChange"
     />
   </template>
 </template>
diff --git a/src/packages/__VUE/cascader/index.vue b/src/packages/__VUE/cascader/index.vue
index b5cc4426b3..a2f7c95b4a 100644
--- a/src/packages/__VUE/cascader/index.vue
+++ b/src/packages/__VUE/cascader/index.vue
@@ -14,8 +14,6 @@
       </template>
 
       <nut-cascader-item
-        @change="onChange"
-        @path-change="onPathChange"
         :modelValue="innerValue"
         :options="options"
         :lazy="lazy"
@@ -25,13 +23,13 @@
         :children-key="childrenKey"
         :convert-config="convertConfig"
         :visible="innerVisible"
+        @change="onChange"
+        @path-change="onPathChange"
       />
     </nut-popup>
   </template>
   <template v-else>
     <nut-cascader-item
-      @change="onChange"
-      @path-change="onPathChange"
       :modelValue="innerValue"
       :options="options"
       :lazy="lazy"
@@ -41,6 +39,8 @@
       :children-key="childrenKey"
       :convert-config="convertConfig"
       :visible="innerVisible"
+      @change="onChange"
+      @path-change="onPathChange"
     />
   </template>
 </template>
diff --git a/src/packages/__VUE/category/index.taro.vue b/src/packages/__VUE/category/index.taro.vue
index 8c03dd4dd4..27a04572b2 100644
--- a/src/packages/__VUE/category/index.taro.vue
+++ b/src/packages/__VUE/category/index.taro.vue
@@ -2,7 +2,7 @@
   <view class="nut-category">
     <div class="nut-category__cateList">
       <div v-if="type == 'classify' || type == 'text'">
-        <div class="nut-category__cateListLeft" v-for="(item, index) in category" :key="index">
+        <div v-for="(item, index) in category" :key="index" class="nut-category__cateListLeft">
           <div
             :class="[checkIndex == index ? 'nut-category__cateListItemChecked' : 'nut-category__cateListItem']"
             @click="getChildList(index)"
diff --git a/src/packages/__VUE/category/index.vue b/src/packages/__VUE/category/index.vue
index afa22626ea..50723bd3fe 100644
--- a/src/packages/__VUE/category/index.vue
+++ b/src/packages/__VUE/category/index.vue
@@ -2,7 +2,7 @@
   <div class="nut-category">
     <div class="nut-category__cateList">
       <div v-if="type == 'classify' || type == 'text'">
-        <div class="nut-category__cateListLeft" v-for="(item, index) in category" :key="index">
+        <div v-for="(item, index) in category" :key="index" class="nut-category__cateListLeft">
           <div
             :class="[checkIndex == index ? 'nut-category__cateListItemChecked' : 'nut-category__cateListItem']"
             @click="getChildList(index)"
diff --git a/src/packages/__VUE/categorypane/index.taro.vue b/src/packages/__VUE/categorypane/index.taro.vue
index baf3e7a709..481a357ef3 100644
--- a/src/packages/__VUE/categorypane/index.taro.vue
+++ b/src/packages/__VUE/categorypane/index.taro.vue
@@ -7,8 +7,8 @@
         <div v-if="item?.catType == 1" class="nut-category-pane__childItemList">
           <div
             v-for="(sku, key) in item.childCateList"
-            class="nut-category-pane__childItem"
             :key="key"
+            class="nut-category-pane__childItem"
             @click="onChange(sku)"
           >
             <img class="nut-category-pane__childImg" :src="sku.backImg" />
@@ -26,8 +26,8 @@
         <div v-if="item?.catType == 1" class="nut-category-pane__childItemList">
           <div
             v-for="(sku, key) in item.childCateList"
-            class="nut-category-pane__childItem"
             :key="key"
+            class="nut-category-pane__childItem"
             @click="onChange(sku)"
           >
             <div class="nut-category-pane__skuName">{{ sku?.catName }}</div>
@@ -39,7 +39,7 @@
     <!-- 自定义 -->
 
     <div v-if="type == 'custom'" class="nut-category-pane__selfItemList">
-      <div v-for="(sku, key) in customCategory" class="nut-category-pane__skuName" :key="key" @click="onChange(sku)">
+      <div v-for="(sku, key) in customCategory" :key="key" class="nut-category-pane__skuName" @click="onChange(sku)">
         {{ sku?.catName }}
       </div>
     </div>
diff --git a/src/packages/__VUE/categorypane/index.vue b/src/packages/__VUE/categorypane/index.vue
index c2fba5245c..913b360bad 100644
--- a/src/packages/__VUE/categorypane/index.vue
+++ b/src/packages/__VUE/categorypane/index.vue
@@ -7,8 +7,8 @@
         <div v-if="item?.catType == 1" class="nut-category-pane__childItemList">
           <div
             v-for="(sku, key) in item.childCateList"
-            class="nut-category-pane__childItem"
             :key="key"
+            class="nut-category-pane__childItem"
             @click="onChange(sku)"
           >
             <img class="nut-category-pane__childImg" :src="sku.backImg" />
@@ -26,8 +26,8 @@
         <div v-if="item?.catType == 1" class="nut-category-pane__childItemList">
           <div
             v-for="(sku, key) in item.childCateList"
-            class="nut-category-pane__childItem"
             :key="key"
+            class="nut-category-pane__childItem"
             @click="onChange(sku)"
           >
             <div class="nut-category-pane__skuName">{{ sku?.catName }}</div>
@@ -39,7 +39,7 @@
     <!-- 自定义 -->
 
     <div v-if="type == 'custom'" class="nut-category-pane__selfItemList">
-      <div v-for="(sku, key) in customCategory" class="nut-category-pane__skuName" :key="key" @click="onChange(sku)">
+      <div v-for="(sku, key) in customCategory" :key="key" class="nut-category-pane__skuName" @click="onChange(sku)">
         {{ sku?.catName }}
       </div>
     </div>
diff --git a/src/packages/__VUE/checkbox/demo.vue b/src/packages/__VUE/checkbox/demo.vue
index 185e1dfa6f..dd1f7c5f3a 100644
--- a/src/packages/__VUE/checkbox/demo.vue
+++ b/src/packages/__VUE/checkbox/demo.vue
@@ -79,17 +79,17 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('selectGroup')">
       <nut-cell>
-        <nut-checkbox-group v-model="checkboxgroup3" ref="group" @change="changeBox4">
+        <nut-checkbox-group ref="group" v-model="checkboxgroup3" @change="changeBox4">
           <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">
             {{ item.value }}
           </nut-checkbox>
         </nut-checkbox-group>
       </nut-cell>
       <nut-cell>
-        <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">
+        <nut-button type="primary" style="margin: 0 20px 0 0" @click="toggleAll(true)">
           {{ translate('selectAll') }}
         </nut-button>
-        <nut-button type="info" @click="toggleAll(false)" style="margin: 0 20px 0 0">
+        <nut-button type="info" style="margin: 0 20px 0 0" @click="toggleAll(false)">
           {{ translate('cancel') }}
         </nut-button>
         <nut-button type="warning" @click="toggleReverse()">{{ translate('selectReverse') }}</nut-button>
@@ -111,11 +111,11 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('useGroupInte')">
       <nut-cell>
-        <nut-checkbox :indeterminate="indeterminate" v-model="checkbox10" @change="changeBox5">{{
+        <nut-checkbox v-model="checkbox10" :indeterminate="indeterminate" @change="changeBox5">{{
           translate('selectAll')
         }}</nut-checkbox>
       </nut-cell>
-      <nut-checkbox-group v-model="checkboxgroup5" ref="group2" @change="changeBox6">
+      <nut-checkbox-group ref="group2" v-model="checkboxgroup5" @change="changeBox6">
         <nut-cell>
           <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
         </nut-cell>
diff --git a/src/packages/__VUE/collapse/index.taro.vue b/src/packages/__VUE/collapse/index.taro.vue
index 97abe4316e..2f71ee2f8b 100644
--- a/src/packages/__VUE/collapse/index.taro.vue
+++ b/src/packages/__VUE/collapse/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" ref="collapseDom">
+  <view ref="collapseDom" :class="classes">
     <slot></slot>
   </view>
 </template>
diff --git a/src/packages/__VUE/collapse/index.vue b/src/packages/__VUE/collapse/index.vue
index 97abe4316e..2f71ee2f8b 100644
--- a/src/packages/__VUE/collapse/index.vue
+++ b/src/packages/__VUE/collapse/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" ref="collapseDom">
+  <view ref="collapseDom" :class="classes">
     <slot></slot>
   </view>
 </template>
diff --git a/src/packages/__VUE/collapseitem/index.taro.vue b/src/packages/__VUE/collapseitem/index.taro.vue
index ed68783f1d..e66467c5fa 100644
--- a/src/packages/__VUE/collapseitem/index.taro.vue
+++ b/src/packages/__VUE/collapseitem/index.taro.vue
@@ -8,15 +8,15 @@
         <view class="nut-collapse-item__title-main-value">
           <slot v-if="$slots.title" name="title"></slot>
           <template v-else>
-            <view v-html="title" class="nut-collapse-item__title-mtitle"></view>
+            <view class="nut-collapse-item__title-mtitle" v-html="title"></view>
           </template>
-          <view class="nut-collapse-item__title-label" v-if="label">{{ label }}</view>
+          <view v-if="label" class="nut-collapse-item__title-label">{{ label }}</view>
         </view>
       </view>
       <view v-if="$slots.value" class="nut-collapse-item__title-sub">
         <slot name="value"></slot>
       </view>
-      <view v-else v-html="value" class="nut-collapse-item__title-sub"></view>
+      <view v-else class="nut-collapse-item__title-sub" v-html="value"></view>
       <view
         :class="['nut-collapse-item__title-icon', { 'nut-collapse-item__title-icon--expanded': expanded }]"
         :style="{ transform: 'rotate(' + (expanded ? rotate : 0) + 'deg)' }"
@@ -31,14 +31,14 @@
       </div>
     </view>
     <view
-      class="nut-collapse__item-wrapper"
       ref="wrapperRef"
+      class="nut-collapse__item-wrapper"
       :style="{
         willChange: 'height',
         height: wrapperHeight
       }"
     >
-      <view class="nut-collapse__item-wrapper__content" :id="`nut-collapse__item-${refRandomId}`">
+      <view :id="`nut-collapse__item-${refRandomId}`" class="nut-collapse__item-wrapper__content">
         <slot></slot>
       </view>
     </view>
diff --git a/src/packages/__VUE/collapseitem/index.vue b/src/packages/__VUE/collapseitem/index.vue
index dee1fe81c4..d97a4d7397 100644
--- a/src/packages/__VUE/collapseitem/index.vue
+++ b/src/packages/__VUE/collapseitem/index.vue
@@ -5,15 +5,15 @@
         <view class="nut-collapse-item__title-main-value">
           <slot v-if="$slots.title" name="title"></slot>
           <template v-else>
-            <view v-html="title" class="nut-collapse-item__title-mtitle"></view>
+            <view class="nut-collapse-item__title-mtitle" v-html="title"></view>
           </template>
-          <view class="nut-collapse-item__title-label" v-if="label">{{ label }}</view>
+          <view v-if="label" class="nut-collapse-item__title-label">{{ label }}</view>
         </view>
       </view>
       <view v-if="$slots.value" class="nut-collapse-item__title-sub">
         <slot name="value"></slot>
       </view>
-      <view v-else v-html="value" class="nut-collapse-item__title-sub"></view>
+      <view v-else class="nut-collapse-item__title-sub" v-html="value"></view>
       <view
         :class="['nut-collapse-item__title-icon', { 'nut-collapse-item__title-icon--expanded': expanded }]"
         :style="{ transform: 'rotate(' + (expanded ? rotate : 0) + 'deg)' }"
@@ -28,15 +28,15 @@
       </div>
     </view>
     <view
-      class="nut-collapse__item-wrapper"
       ref="wrapperRef"
+      class="nut-collapse__item-wrapper"
       :style="{
         willChange: 'height',
         height: wrapperHeight
       }"
       @transitionend="onTransitionEnd"
     >
-      <view class="nut-collapse__item-wrapper__content" ref="contentRef">
+      <view ref="contentRef" class="nut-collapse__item-wrapper__content">
         <slot></slot>
       </view>
     </view>
diff --git a/src/packages/__VUE/comment/components/CmtBottom.taro.vue b/src/packages/__VUE/comment/components/CmtBottom.taro.vue
index 7b9646e122..ebfe9cfb12 100644
--- a/src/packages/__VUE/comment/components/CmtBottom.taro.vue
+++ b/src/packages/__VUE/comment/components/CmtBottom.taro.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="nut-comment-bottom">
-    <view @click="handleClick" class="nut-comment-bottom__lable">
+    <view class="nut-comment-bottom__lable" @click="handleClick">
       <span v-if="type != 'complex'" style="display: inline">{{ info.size }}</span></view
     >
 
@@ -14,7 +14,7 @@
           </template>
           <template v-if="name == 'more'">
             <MoreX></MoreX>
-            <view class="nut-comment-bottom__cpx-item-popover" v-if="showPopver" @click="operate('popover')">{{
+            <view v-if="showPopver" class="nut-comment-bottom__cpx-item-popover" @click="operate('popover')">{{
               translate('complaintsText')
             }}</view>
           </template>
diff --git a/src/packages/__VUE/comment/components/CmtBottom.vue b/src/packages/__VUE/comment/components/CmtBottom.vue
index afe4a05de2..e24160009e 100644
--- a/src/packages/__VUE/comment/components/CmtBottom.vue
+++ b/src/packages/__VUE/comment/components/CmtBottom.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="nut-comment-bottom">
-    <view @click="handleClick" class="nut-comment-bottom__lable">
+    <view class="nut-comment-bottom__lable" @click="handleClick">
       <span v-if="type != 'complex'">{{ info.size }}</span></view
     >
 
@@ -14,7 +14,7 @@
           </template>
           <template v-if="name == 'more'">
             <MoreX></MoreX>
-            <view class="nut-comment-bottom__cpx-item-popover" v-if="showPopver" @click="operate('popover')">{{
+            <view v-if="showPopver" class="nut-comment-bottom__cpx-item-popover" @click="operate('popover')">{{
               translate('complaintsText')
             }}</view>
           </template>
diff --git a/src/packages/__VUE/comment/components/CmtHeader.taro.vue b/src/packages/__VUE/comment/components/CmtHeader.taro.vue
index b28538fd53..d308461332 100644
--- a/src/packages/__VUE/comment/components/CmtHeader.taro.vue
+++ b/src/packages/__VUE/comment/components/CmtHeader.taro.vue
@@ -1,12 +1,12 @@
 <template>
   <view>
-    <view class="nut-comment-header" @click="handleClick" v-if="info">
+    <view v-if="info" class="nut-comment-header" @click="handleClick">
       <view class="nut-comment-header__user">
         <view class="nut-comment-header__user-avter">
           <img v-if="info.avatar" :src="info.avatar" />
         </view>
 
-        <view :class="[`nut-comment-header__user-${type}`]" v-if="type == 'default'">
+        <view v-if="type == 'default'" :class="[`nut-comment-header__user-${type}`]">
           <view :class="[`nut-comment-header__user-${type}-name`]">
             <span>{{ info.nickName }}</span>
             <slot name="labels"></slot>
@@ -17,14 +17,14 @@
           </view>
         </view>
 
-        <view :class="[`nut-comment-header__user-${type}`]" v-else>
+        <view v-else :class="[`nut-comment-header__user-${type}`]">
           <span :class="[`nut-comment-header__user-${type}-name`]">{{ info.nickName }}</span>
           <slot name="labels"></slot>
         </view>
       </view>
-      <view class="nut-comment-header__time" v-if="info.time">{{ info.time }}</view>
+      <view v-if="info.time" class="nut-comment-header__time">{{ info.time }}</view>
     </view>
-    <view :class="[`nut-comment-header__${type}-score`]" v-if="type == 'complex'">
+    <view v-if="type == 'complex'" :class="[`nut-comment-header__${type}-score`]">
       <nut-rate v-model="info.score" size="12" spacing="3" readonly />
       <i :class="[`nut-comment-header__${type}-score-i`]"></i>
       <view :class="[`nut-comment-header__${type}-score-size`]">{{ info.size }}</view>
diff --git a/src/packages/__VUE/comment/components/CmtHeader.vue b/src/packages/__VUE/comment/components/CmtHeader.vue
index d791781aa6..7ed3160d4b 100644
--- a/src/packages/__VUE/comment/components/CmtHeader.vue
+++ b/src/packages/__VUE/comment/components/CmtHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <view>
-    <view class="nut-comment-header" @click="handleClick" v-if="info">
+    <view v-if="info" class="nut-comment-header" @click="handleClick">
       <view class="nut-comment-header__user">
         <view class="nut-comment-header__user-avter">
           <img v-if="info.avatar" :src="info.avatar" />
         </view>
 
-        <view :class="[`nut-comment-header__user-${type}`]" v-if="type == 'default'">
+        <view v-if="type == 'default'" :class="[`nut-comment-header__user-${type}`]">
           <view :class="[`nut-comment-header__user-${type}-name`]">
             <span>{{ info.nickName }}</span>
             <slot name="labels"></slot>
@@ -17,14 +17,14 @@
           </view>
         </view>
 
-        <view :class="[`nut-comment-header__user-${type}`]" v-else>
+        <view v-else :class="[`nut-comment-header__user-${type}`]">
           <span :class="[`nut-comment-header__user-${type}-name`]">{{ info.nickName }}</span>
           <slot name="labels"></slot>
         </view>
       </view>
-      <view class="nut-comment-header__time" v-if="info.time">{{ info.time }}</view>
+      <view v-if="info.time" class="nut-comment-header__time">{{ info.time }}</view>
     </view>
-    <view :class="[`nut-comment-header__${type}-score`]" v-if="type == 'complex'">
+    <view v-if="type == 'complex'" :class="[`nut-comment-header__${type}-score`]">
       <nut-rate v-model="info.score" size="12" spacing="3" readonly />
       <i :class="[`nut-comment-header__${type}-score-i`]"></i>
       <view :class="[`nut-comment-header__${type}-score-size`]">{{ info.size }}</view>
diff --git a/src/packages/__VUE/comment/components/CmtImages.taro.vue b/src/packages/__VUE/comment/components/CmtImages.taro.vue
index fd29fee8f6..7cf7198ec1 100644
--- a/src/packages/__VUE/comment/components/CmtImages.taro.vue
+++ b/src/packages/__VUE/comment/components/CmtImages.taro.vue
@@ -2,9 +2,9 @@
   <view :class="`nut-comment-images nut-comment-images--${type}`">
     <!-- videos -->
     <view
-      class="nut-comment-images__item nut-comment-images__item--video"
       v-for="(itV, index) in videos"
       :key="itV.id"
+      class="nut-comment-images__item nut-comment-images__item--video"
       @click="showImages('video', index)"
     >
       <img :src="itV.mainUrl" />
@@ -13,15 +13,15 @@
     <!-- images -->
     <template v-for="(itI, index) in images" :key="itI.id">
       <view
-        class="nut-comment-images__item nut-comment-images__item--imgbox"
         v-if="(type == 'multi' && videos.length + index < 9) || type != 'multi'"
+        class="nut-comment-images__item nut-comment-images__item--imgbox"
         @click="showImages('img', index + videos.length)"
       >
         <img :src="itI.smallImgUrl ? itI.smallImgUrl : itI.imgUrl" />
 
         <view
-          class="nut-comment-images__mask"
           v-if="type == 'multi' && totalImages.length > 9 && videos.length + index > 7"
+          class="nut-comment-images__mask"
         >
           <span>共 {{ totalImages.length }} 张</span>
           <Right size="12px"></Right>
diff --git a/src/packages/__VUE/comment/components/CmtImages.vue b/src/packages/__VUE/comment/components/CmtImages.vue
index df5497b8b5..b62f74b131 100644
--- a/src/packages/__VUE/comment/components/CmtImages.vue
+++ b/src/packages/__VUE/comment/components/CmtImages.vue
@@ -2,9 +2,9 @@
   <view :class="`nut-comment-images nut-comment-images--${type}`">
     <!-- videos -->
     <view
-      class="nut-comment-images__item nut-comment-images__item--video"
       v-for="(itV, index) in videos"
       :key="itV.id"
+      class="nut-comment-images__item nut-comment-images__item--video"
       @click="showImages('video', index)"
     >
       <img :src="itV.mainUrl" />
@@ -13,15 +13,15 @@
     <!-- images -->
     <template v-for="(itI, index) in images" :key="itI.id">
       <view
-        class="nut-comment-images__item nut-comment-images__item--imgbox"
         v-if="(type == 'multi' && videos.length + index < 9) || type != 'multi'"
+        class="nut-comment-images__item nut-comment-images__item--imgbox"
         @click="showImages('img', index + videos.length)"
       >
         <img :src="itI.smallImgUrl ? itI.smallImgUrl : itI.imgUrl" />
 
         <view
-          class="nut-comment-images__mask"
           v-if="type == 'multi' && totalImages.length > 9 && videos.length + index > 7"
+          class="nut-comment-images__mask"
         >
           <span>共 {{ totalImages.length }} 张</span>
           <Right style="width: 12px"></Right>
diff --git a/src/packages/__VUE/comment/demo.vue b/src/packages/__VUE/comment/demo.vue
index 2d45630e9d..ed93ff0ee6 100644
--- a/src/packages/__VUE/comment/demo.vue
+++ b/src/packages/__VUE/comment/demo.vue
@@ -6,9 +6,9 @@
         :images="cmt.images"
         :videos="cmt.videos"
         :info="cmt.info"
+        :operation="['replay']"
         @click="handleclick"
         @click-images="clickImages"
-        :operation="['replay']"
       >
         <template #comment-labels>
           <img
diff --git a/src/packages/__VUE/comment/index.taro.vue b/src/packages/__VUE/comment/index.taro.vue
index 28aaf5e4cc..bfb2c618d7 100644
--- a/src/packages/__VUE/comment/index.taro.vue
+++ b/src/packages/__VUE/comment/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" v-if="info && Object.keys(info)">
+  <view v-if="info && Object.keys(info)" :class="classes">
     <!-- 根据展示信息的多少，分为3种展示风格：simple，base，complex -->
     <comment-header :type="headerType" :info="info" :labels="labels" @handle-click="handleClick">
       <template #labels>
@@ -18,10 +18,10 @@
 
     <comment-images :images="images" :videos="videos" :type="imagesRows" @click-images="clickImages"></comment-images>
 
-    <view class="nut-comment__follow" v-if="follow && follow.days > 0" @click="handleClick">
+    <view v-if="follow && follow.days > 0" class="nut-comment__follow" @click="handleClick">
       <view class="nut-comment__follow-title">购买{{ follow.days }}天后追评</view>
       <view class="nut-comment__follow-com">{{ follow.content }}</view>
-      <view class="nut-comment__follow-img" v-if="follow.images && follow.images.length > 0"
+      <view v-if="follow.images && follow.images.length > 0" class="nut-comment__follow-img"
         >{{ follow.images.length }} 张追评图片 <Right size="12px"></Right
       ></view>
     </view>
diff --git a/src/packages/__VUE/comment/index.vue b/src/packages/__VUE/comment/index.vue
index c0f54d0f83..4fded2d13d 100644
--- a/src/packages/__VUE/comment/index.vue
+++ b/src/packages/__VUE/comment/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" v-if="info && Object.keys(info)">
+  <view v-if="info && Object.keys(info)" :class="classes">
     <!-- 根据展示信息的多少，分为3种展示风格：simple，base，complex -->
     <comment-header :type="headerType" :info="info" :labels="labels" @handle-click="handleClick">
       <template #labels>
@@ -18,10 +18,10 @@
 
     <comment-images :images="images" :videos="videos" :type="imagesRows" @click-images="clickImages"></comment-images>
 
-    <view class="nut-comment__follow" v-if="follow && follow.days > 0" @click="handleClick">
+    <view v-if="follow && follow.days > 0" class="nut-comment__follow" @click="handleClick">
       <view class="nut-comment__follow-title">{{ translate('additionalReview', follow.days) }}</view>
       <view class="nut-comment__follow-com">{{ follow.content }}</view>
-      <view class="nut-comment__follow-img" v-if="follow.images && follow.images.length > 0"
+      <view v-if="follow.images && follow.images.length > 0" class="nut-comment__follow-img"
         >{{ translate('additionalImages', follow.images.length) }} <Right width="12px"></Right
       ></view>
     </view>
diff --git a/src/packages/__VUE/configprovider/demo.vue b/src/packages/__VUE/configprovider/demo.vue
index 0bb5022696..e0171f9c7c 100644
--- a/src/packages/__VUE/configprovider/demo.vue
+++ b/src/packages/__VUE/configprovider/demo.vue
@@ -17,7 +17,7 @@
           <nut-checkbox v-model="formData2.checkbox">{{ translate('checkbox') }}</nut-checkbox>
         </nut-form-item>
         <nut-form-item :label="translate('radiogroup')">
-          <nut-radio-group direction="horizontal" v-model="formData2.radio">
+          <nut-radio-group v-model="formData2.radio" direction="horizontal">
             <nut-radio label="1">{{ translate('option', 1) }}</nut-radio>
             <nut-radio disabled label="2">{{ translate('option', 2) }}</nut-radio>
             <nut-radio label="3">{{ translate('option', 3) }}</nut-radio>
@@ -30,20 +30,20 @@
           <nut-input-number v-model="formData2.number" />
         </nut-form-item>
         <nut-form-item :label="translate('range')">
-          <nut-range hidden-tag v-model="formData2.range"></nut-range>
+          <nut-range v-model="formData2.range" hidden-tag></nut-range>
         </nut-form-item>
         <nut-form-item :label="translate('uploader')">
-          <nut-uploader url="http://apiurl" v-model:file-list="formData2.defaultFileList" maximum="3" multiple>
+          <nut-uploader v-model:file-list="formData2.defaultFileList" url="http://apiurl" maximum="3" multiple>
           </nut-uploader>
         </nut-form-item>
         <nut-form-item :label="translate('address')">
           <input
-            class="nut-input-text"
             v-model="formData2.address"
-            @click="addressModule.methods.show"
+            class="nut-input-text"
             readonly
             :placeholder="translate('addressTip1')"
             type="text"
+            @click="addressModule.methods.show"
           />
           <!-- nut-address -->
           <nut-address
@@ -52,8 +52,8 @@
             :city="addressModule.state.city"
             :country="addressModule.state.country"
             :town="addressModule.state.town"
-            @close="addressModule.methods.onClose"
             :custom-address-title="translate('addressTip2')"
+            @close="addressModule.methods.onClose"
           ></nut-address>
         </nut-form-item>
       </nut-form>
@@ -62,7 +62,7 @@
     <nut-config-provider :theme-vars="themeVars">
       <nut-form>
         <nut-form-item :label="translate('range')">
-          <nut-range hidden-tag v-model="formData2.range"></nut-range>
+          <nut-range v-model="formData2.range" hidden-tag></nut-range>
         </nut-form-item>
       </nut-form>
     </nut-config-provider>
diff --git a/src/packages/__VUE/countdown/demo.vue b/src/packages/__VUE/countdown/demo.vue
index b929c10168..964d5afb16 100644
--- a/src/packages/__VUE/countdown/demo.vue
+++ b/src/packages/__VUE/countdown/demo.vue
@@ -58,7 +58,7 @@
 
     <h2>{{ translate('handleControl') }}</h2>
     <nut-cell>
-      <nut-countdown time="20000" ref="Countdown" :autoStart="false" format="ss:SS" />
+      <nut-countdown ref="Countdown" time="20000" :autoStart="false" format="ss:SS" />
     </nut-cell>
 
     <nut-grid :column-num="3">
diff --git a/src/packages/__VUE/countup/demo.vue b/src/packages/__VUE/countup/demo.vue
index 8ad9d86dc6..732e2e9cc7 100644
--- a/src/packages/__VUE/countup/demo.vue
+++ b/src/packages/__VUE/countup/demo.vue
@@ -39,8 +39,8 @@
       >
       </nut-countup>
       <div class="btnBtn">
-        <nut-button type="danger" @click="startRole" :disabled="startFlag">{{ translate('btn1') }}</nut-button>
-        <nut-button type="danger" @click="startRole2" :disabled="startFlag">{{ translate('btn2') }}</nut-button>
+        <nut-button type="danger" :disabled="startFlag" @click="startRole">{{ translate('btn1') }}</nut-button>
+        <nut-button type="danger" :disabled="startFlag" @click="startRole2">{{ translate('btn2') }}</nut-button>
       </div>
     </div>
   </div>
diff --git a/src/packages/__VUE/countup/index.taro.vue b/src/packages/__VUE/countup/index.taro.vue
index e9714bc767..62985ac90d 100644
--- a/src/packages/__VUE/countup/index.taro.vue
+++ b/src/packages/__VUE/countup/index.taro.vue
@@ -4,9 +4,9 @@
       <template v-if="type == 'machine'">
         <view class="nut-countup__machine" :style="{ height: numHeight + 'px' }">
           <view
-            class="nut-countup__machine-item"
             v-for="(val, index) of machineNum"
             :key="'mImg' + index"
+            class="nut-countup__machine-item"
             :style="{
               width: numWidth + 'px',
               height: numHeight + 'px',
@@ -19,9 +19,9 @@
       <template v-else>
         <view class="nut-countup__numberimg" :style="{ height: numHeight + 'px' }">
           <view
-            class="nut-countup__numberimg__item"
             v-for="(val, index) of num_total_len"
             :key="'cImg' + index"
+            class="nut-countup__numberimg__item"
             :style="{
               width: numWidth + 'px',
               height: numHeight + 'px',
@@ -64,10 +64,10 @@
         }"
       >
         <view
-          ref="nut-countup__number-item"
-          class="nut-countup__number-item"
           v-for="(val, index) of num_total_len"
+          ref="nut-countup__number-item"
           :key="val"
+          class="nut-countup__number-item"
           :style="{
             all: turnNumber(index) as any,
             top: topNumber(index),
@@ -77,8 +77,8 @@
         >
           <view
             v-for="(item, idx) of to0_10"
-            class="nut-countup__number-item__span"
             :key="'dote' + idx"
+            class="nut-countup__number-item__span"
             :style="{
               width: numWidth + 'px',
               height: numHeight + 'px',
diff --git a/src/packages/__VUE/countup/index.vue b/src/packages/__VUE/countup/index.vue
index 9d9a0c198b..327fbae62e 100644
--- a/src/packages/__VUE/countup/index.vue
+++ b/src/packages/__VUE/countup/index.vue
@@ -4,9 +4,9 @@
       <template v-if="type == 'machine'">
         <view class="nut-countup__machine" :style="{ height: numHeight + 'px' }">
           <view
-            class="nut-countup__machine-item"
             v-for="(val, index) of machineNum"
             :key="'mImg' + index"
+            class="nut-countup__machine-item"
             :style="{
               width: numWidth + 'px',
               height: numHeight + 'px',
@@ -19,9 +19,9 @@
       <template v-else>
         <view ref="runNumberImg" class="nut-countup__numberimg" :style="{ height: numHeight + 'px' }">
           <view
-            class="nut-countup__numberimg__item"
             v-for="(val, index) of num_total_len"
             :key="'cImg' + index"
+            class="nut-countup__numberimg__item"
             :style="{
               width: numWidth + 'px',
               height: numHeight + 'px',
@@ -65,10 +65,10 @@
         }"
       >
         <view
-          :ref="(el) => setRef(el)"
-          class="nut-countup__number-item"
           v-for="(val, index) of num_total_len"
+          :ref="(el) => setRef(el)"
           :key="val"
+          class="nut-countup__number-item"
           :style="{
             top: topNumber(index),
             left: numWidth * (index > num_total_len - pointNum - 1 ? index * 1.1 : index) + 'px'
@@ -77,8 +77,8 @@
         >
           <view
             v-for="(item, idx) of to0_10"
-            class="nut-countup__number-item__span"
             :key="'dote' + idx"
+            class="nut-countup__number-item__span"
             :style="{
               width: numWidth + 'px',
               height: numHeight + 'px',
diff --git a/src/packages/__VUE/datepicker/demo.vue b/src/packages/__VUE/datepicker/demo.vue
index b157a8a941..2a858546eb 100644
--- a/src/packages/__VUE/datepicker/demo.vue
+++ b/src/packages/__VUE/datepicker/demo.vue
@@ -6,21 +6,21 @@
       v-model="currentDate"
       :min-date="minDate"
       :max-date="maxDate"
-      @confirm="confirm"
       :is-show-chinese="true"
       :threeDimensional="false"
+      @confirm="confirm"
     ></nut-date-picker>
 
     <h2>{{ translate('popupDesc') }}</h2>
     <nut-cell :title="translate('basic')" :desc="popupDesc" @click="show = true"></nut-cell>
-    <nut-popup position="bottom" v-model:visible="show">
+    <nut-popup v-model:visible="show" position="bottom">
       <nut-date-picker
         v-model="currentDate"
         :min-date="minDate"
         :max-date="maxDate"
-        @confirm="popupConfirm"
         :is-show-chinese="true"
         :threeDimensional="false"
+        @confirm="popupConfirm"
       >
         <nut-button block type="primary" @click="alwaysFun">{{ translate('forever') }}</nut-button>
       </nut-date-picker>
diff --git a/src/packages/__VUE/datepicker/index.taro.vue b/src/packages/__VUE/datepicker/index.taro.vue
index 26ea2a9198..97b67797a1 100644
--- a/src/packages/__VUE/datepicker/index.taro.vue
+++ b/src/packages/__VUE/datepicker/index.taro.vue
@@ -3,16 +3,16 @@
     v-model="selectedValue"
     :okText="okText"
     :cancelText="cancelText"
-    @cancel="closeHandler"
     :columns="columns"
-    @change="changeHandler"
     :title="title"
-    @confirm="confirm"
     :threeDimensional="threeDimensional"
     :swipeDuration="swipeDuration"
     :showToolbar="showToolbar"
     :visibleOptionNum="visibleOptionNum"
     :optionHeight="optionHeight"
+    @cancel="closeHandler"
+    @change="changeHandler"
+    @confirm="confirm"
   >
     <template #top>
       <slot name="top"></slot>
diff --git a/src/packages/__VUE/datepicker/index.vue b/src/packages/__VUE/datepicker/index.vue
index b698bc62b1..3c1f118dbc 100644
--- a/src/packages/__VUE/datepicker/index.vue
+++ b/src/packages/__VUE/datepicker/index.vue
@@ -3,16 +3,16 @@
     v-model="selectedValue"
     :okText="okText"
     :cancelText="cancelText"
-    @cancel="closeHandler"
     :columns="columns"
-    @change="changeHandler"
     :title="title"
-    @confirm="confirm"
     :threeDimensional="threeDimensional"
     :swipeDuration="swipeDuration"
     :showToolbar="showToolbar"
     :visibleOptionNum="visibleOptionNum"
     :optionHeight="optionHeight"
+    @cancel="closeHandler"
+    @change="changeHandler"
+    @confirm="confirm"
   >
     <template #top>
       <slot name="top"></slot>
diff --git a/src/packages/__VUE/dialog/demo.vue b/src/packages/__VUE/dialog/demo.vue
index f339ac0f18..4c36dc2eaf 100644
--- a/src/packages/__VUE/dialog/demo.vue
+++ b/src/packages/__VUE/dialog/demo.vue
@@ -12,19 +12,19 @@
     <nut-cell-group :title="translate('title1')">
       <nut-cell :title="translate('title1')" @click="componentClick"></nut-cell>
       <nut-dialog
+        v-model:visible="visible"
         teleport="#app"
         :title="translate('title1')"
         :content="translate('content')"
-        v-model:visible="visible"
       >
       </nut-dialog>
       <nut-cell :title="translate('title')" @click="componentvVrticalClick"></nut-cell>
       <nut-dialog
+        v-model:visible="visible1"
         footer-direction="vertical"
         teleport="#app"
         :title="translate('title1')"
         :content="translate('content')"
-        v-model:visible="visible1"
       >
       </nut-dialog>
     </nut-cell-group>
diff --git a/src/packages/__VUE/dialog/index.taro.vue b/src/packages/__VUE/dialog/index.taro.vue
index fcc07b83af..4a55d4fdbc 100644
--- a/src/packages/__VUE/dialog/index.taro.vue
+++ b/src/packages/__VUE/dialog/index.taro.vue
@@ -1,7 +1,7 @@
 <template>
   <nut-popup
-    :teleport="teleport"
     v-model:visible="showPopup"
+    :teleport="teleport"
     :close-on-click-overlay="false"
     :lock-scroll="lockScroll"
     :pop-class="popClass"
@@ -21,18 +21,18 @@
       <view class="nut-dialog__content" :style="contentStyle">
         <slot v-if="$slots.default" name="default"></slot>
         <view v-else-if="typeof content === 'string'" v-html="content"></view>
-        <component v-else :is="content" />
+        <component :is="content" v-else />
       </view>
 
-      <view class="nut-dialog__footer" :class="{ [footerDirection]: footerDirection }" v-if="!noFooter">
+      <view v-if="!noFooter" class="nut-dialog__footer" :class="{ [footerDirection]: footerDirection }">
         <slot v-if="$slots.footer" name="footer"></slot>
         <template v-else>
           <nut-button
+            v-if="!noCancelBtn"
             size="small"
             plain
             type="primary"
             class="nut-dialog__footer-cancel"
-            v-if="!noCancelBtn"
             @click="onCancel"
           >
             {{ cancelText || translate('cancel') }}
diff --git a/src/packages/__VUE/dialog/index.vue b/src/packages/__VUE/dialog/index.vue
index ad7e98bc2f..2dbc68d213 100644
--- a/src/packages/__VUE/dialog/index.vue
+++ b/src/packages/__VUE/dialog/index.vue
@@ -1,7 +1,7 @@
 <template>
   <nut-popup
-    :teleport="teleport"
     v-model:visible="showPopup"
+    :teleport="teleport"
     :close-on-click-overlay="false"
     :lock-scroll="lockScroll"
     :pop-class="popClass"
@@ -21,18 +21,18 @@
       <view class="nut-dialog__content" :style="contentStyle">
         <slot v-if="$slots.default" name="default"></slot>
         <view v-else-if="typeof content === 'string'" v-html="content"></view>
-        <component v-else :is="content" />
+        <component :is="content" v-else />
       </view>
 
-      <view class="nut-dialog__footer" :class="{ [footerDirection]: footerDirection }" v-if="!noFooter">
+      <view v-if="!noFooter" class="nut-dialog__footer" :class="{ [footerDirection]: footerDirection }">
         <slot v-if="$slots.footer" name="footer"></slot>
         <template v-else>
           <nut-button
+            v-if="!noCancelBtn"
             size="small"
             plain
             type="primary"
             class="nut-dialog__footer-cancel"
-            v-if="!noCancelBtn"
             @click="onCancel"
           >
             {{ cancelText || translate('cancel') }}
diff --git a/src/packages/__VUE/drag/index.taro.vue b/src/packages/__VUE/drag/index.taro.vue
index 3bc5053d9f..04f13389f0 100644
--- a/src/packages/__VUE/drag/index.taro.vue
+++ b/src/packages/__VUE/drag/index.taro.vue
@@ -1,17 +1,17 @@
 <template>
   <view
-    :class="classes"
-    ref="myDrag"
     :id="'myDrag' + refRandomId"
+    ref="myDrag"
+    :class="classes"
     class="myDrag"
-    @touchstart="touchStart($event)"
-    @touchmove.prevent="touchMove($event)"
     catchtouchmove="true"
     :style="{
       transform: ` translate(${state.left + 'px'}, ${state.top + 'px'})`,
       top: state.top + 'px',
       left: state.left + 'px'
     }"
+    @touchstart="touchStart($event)"
+    @touchmove.prevent="touchMove($event)"
   >
     <slot></slot>
   </view>
diff --git a/src/packages/__VUE/drag/index.vue b/src/packages/__VUE/drag/index.vue
index 80abe27e69..c30733b1b5 100644
--- a/src/packages/__VUE/drag/index.vue
+++ b/src/packages/__VUE/drag/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view
-    :class="classes"
     ref="myDrag"
+    :class="classes"
     @touchstart="touchStart($event)"
     @touchmove="touchMove($event)"
     @touchend="touchEnd($event)"
diff --git a/src/packages/__VUE/ecard/demo.vue b/src/packages/__VUE/ecard/demo.vue
index 454b48e988..3cdca2aca0 100644
--- a/src/packages/__VUE/ecard/demo.vue
+++ b/src/packages/__VUE/ecard/demo.vue
@@ -4,10 +4,10 @@
     <nut-cell>
       <nut-ecard
         v-model="money"
+        :data-list="dataList"
         @input-change="inputChange"
         @change="change"
         @change-step="changeStep"
-        :data-list="dataList"
       ></nut-ecard>
     </nut-cell>
   </div>
diff --git a/src/packages/__VUE/ecard/index.taro.vue b/src/packages/__VUE/ecard/index.taro.vue
index 1649accc32..a949f370bb 100644
--- a/src/packages/__VUE/ecard/index.taro.vue
+++ b/src/packages/__VUE/ecard/index.taro.vue
@@ -14,11 +14,11 @@
         <view>{{ otherValueText || translate('otherValueText') }}</view>
         <view class="nut-ecard__list__input--con">
           <input
-            type="text"
             v-model="inputValue"
-            @input="change"
+            type="text"
             class="nut-ecard-input"
             :placeholder="placeholder || translate('placeholder')"
+            @input="change"
           />
           {{ suffix }}
         </view>
diff --git a/src/packages/__VUE/ecard/index.vue b/src/packages/__VUE/ecard/index.vue
index a60f74aed7..ab363f3398 100644
--- a/src/packages/__VUE/ecard/index.vue
+++ b/src/packages/__VUE/ecard/index.vue
@@ -14,11 +14,11 @@
         <view>{{ otherValueText || translate('otherValueText') }}</view>
         <view class="nut-ecard__list__input--con">
           <input
+            v-model="inputValue"
             class="nut-ecard__list__input--input"
             type="text"
-            v-model="inputValue"
-            @input="change"
             :placeholder="placeholder || translate('placeholder')"
+            @input="change"
           />
           {{ suffix }}
         </view>
diff --git a/src/packages/__VUE/elevator/index.taro.vue b/src/packages/__VUE/elevator/index.taro.vue
index dc92cca7ee..8fe81b755b 100644
--- a/src/packages/__VUE/elevator/index.taro.vue
+++ b/src/packages/__VUE/elevator/index.taro.vue
@@ -1,52 +1,52 @@
 <template>
   <view :class="classes">
     <nut-scroll-view
+      ref="listview"
       class="nut-elevator__list nut-elevator__list--mini"
       :scroll-top="scrollTop"
       :scroll-y="true"
       :scroll-with-animation="true"
       :scroll-anchoring="true"
-      ref="listview"
       :style="{ height: isNaN(+height) ? height : `${height}px` }"
       @scroll="listViewScroll"
     >
-      <view :style="fixedStyle" class="nut-elevator__list__fixed__wrapper" v-show="scrollY > 0">
-        <view class="nut-elevator__list__fixed nut-elevator__list__fixed--mini" v-if="isSticky">
+      <view v-show="scrollY > 0" :style="fixedStyle" class="nut-elevator__list__fixed__wrapper">
+        <view v-if="isSticky" class="nut-elevator__list__fixed nut-elevator__list__fixed--mini">
           <span class="nut-elevator__fixed-title">{{ indexList[currentIndex][acceptKey] }}</span>
         </view>
       </view>
       <view
-        :class="['nut-elevator__list__item', `elevator__item__${index}`]"
         v-for="(item, index) in indexList"
         :key="item[acceptKey]"
         :ref="setListGroup"
+        :class="['nut-elevator__list__item', `elevator__item__${index}`]"
       >
         <view class="nut-elevator__list__item__code">{{ item[acceptKey] }}</view>
         <view
+          v-for="subitem in item.list"
+          :key="subitem['id']"
           class="nut-elevator__list__item__name"
           :class="{
             'nut-elevator__list__item__name--highcolor': currentData.id === subitem.id && currentKey === item[acceptKey]
           }"
-          v-for="subitem in item.list"
-          :key="subitem['id']"
           @click="handleClickItem(item[acceptKey], subitem)"
         >
-          <span v-html="subitem.name" v-if="!$slots.default"></span>
-          <slot :item="subitem" v-else></slot>
+          <span v-if="!$slots.default" v-html="subitem.name"></span>
+          <slot v-else :item="subitem"></slot>
         </view>
       </view>
     </nut-scroll-view>
-    <view class="nut-elevator__code--current" v-show="scrollStart" v-if="indexList.length > 0">
+    <view v-show="scrollStart" v-if="indexList.length > 0" class="nut-elevator__code--current">
       {{ indexList[codeIndex][acceptKey] }}
     </view>
     <view class="nut-elevator__bars" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd">
       <view class="nut-elevator__bars__inner">
         <view
+          v-for="(item, index) in indexList"
+          :key="item[acceptKey]"
           class="nut-elevator__bars__inner__item"
           :class="{ active: item[acceptKey] === indexList[currentIndex][acceptKey] }"
           :data-index="index"
-          v-for="(item, index) in indexList"
-          :key="item[acceptKey]"
           @click="handleClickIndex(item[acceptKey])"
           >{{ item[acceptKey] }}</view
         >
diff --git a/src/packages/__VUE/elevator/index.vue b/src/packages/__VUE/elevator/index.vue
index 4eaa666e3d..0243ca53ae 100644
--- a/src/packages/__VUE/elevator/index.vue
+++ b/src/packages/__VUE/elevator/index.vue
@@ -1,36 +1,36 @@
 <template>
   <view :class="classes">
-    <view class="nut-elevator__list" ref="listview" :style="{ height: isNaN(+height) ? height : `${height}px` }">
-      <view class="nut-elevator__list__item" v-for="item in indexList" :key="item[acceptKey]" :ref="setListGroup">
+    <view ref="listview" class="nut-elevator__list" :style="{ height: isNaN(+height) ? height : `${height}px` }">
+      <view v-for="item in indexList" :key="item[acceptKey]" :ref="setListGroup" class="nut-elevator__list__item">
         <view class="nut-elevator__list__item__code">{{ item[acceptKey] }}</view>
         <view
+          v-for="subitem in item.list"
+          :key="subitem['id']"
           class="nut-elevator__list__item__name"
           :class="{
             'nut-elevator__list__item__name--highcolor': currentData.id === subitem.id && currentKey === item[acceptKey]
           }"
-          v-for="subitem in item.list"
-          :key="subitem['id']"
           @click="handleClickItem(item[acceptKey], subitem)"
         >
-          <span v-html="subitem.name" v-if="!$slots.default"></span>
-          <slot :item="subitem" v-else></slot>
+          <span v-if="!$slots.default" v-html="subitem.name"></span>
+          <slot v-else :item="subitem"></slot>
         </view>
       </view>
-      <view class="nut-elevator__list__fixed" :style="fixedStyle" v-show="scrollY > 0" v-if="isSticky">
+      <view v-show="scrollY > 0" v-if="isSticky" class="nut-elevator__list__fixed" :style="fixedStyle">
         <span class="nut-elevator__fixed-title">{{ indexList[currentIndex][acceptKey] }}</span>
       </view>
     </view>
-    <view class="nut-elevator__code--current" v-show="scrollStart" v-if="indexList.length">{{
+    <view v-show="scrollStart" v-if="indexList.length" class="nut-elevator__code--current">{{
       indexList[codeIndex][acceptKey]
     }}</view>
     <view class="nut-elevator__bars" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd">
       <view class="nut-elevator__bars__inner">
         <view
+          v-for="(item, index) in indexList"
+          :key="item[acceptKey]"
           class="nut-elevator__bars__inner__item"
           :class="{ active: item[acceptKey] === indexList[currentIndex][acceptKey] }"
           :data-index="index"
-          v-for="(item, index) in indexList"
-          :key="item[acceptKey]"
           @click="handleClickIndex(item[acceptKey])"
           >{{ item[acceptKey] }}</view
         >
diff --git a/src/packages/__VUE/ellipsis/index.taro.vue b/src/packages/__VUE/ellipsis/index.taro.vue
index 16049eab7f..e76410261e 100644
--- a/src/packages/__VUE/ellipsis/index.taro.vue
+++ b/src/packages/__VUE/ellipsis/index.taro.vue
@@ -1,25 +1,25 @@
 <template>
   <view>
-    <view :class="classes" @click="handleClick" ref="root" :id="'root' + refRandomId">
-      <view class="nut-ellipsis__wordbreak" v-if="!exceeded">{{ content }}</view>
+    <view :id="'root' + refRandomId" ref="root" :class="classes" @click="handleClick">
+      <view v-if="!exceeded" class="nut-ellipsis__wordbreak">{{ content }}</view>
 
       <view v-if="exceeded && !expanded" class="nut-ellipsis__wordbreak">
         {{ ellipsis.leading }}{{ ellipsis.leading && symbol
-        }}<view class="nut-ellipsis__text" v-if="expandText" @click.stop="clickHandle(1)">{{ expandText }}</view
+        }}<view v-if="expandText" class="nut-ellipsis__text" @click.stop="clickHandle(1)">{{ expandText }}</view
         >{{ ellipsis.tailing && symbol }}{{ ellipsis.tailing }}
       </view>
       <view v-if="exceeded && expanded">
         {{ content }}
-        <span class="nut-ellipsis__text" v-if="expandText" @click.stop="clickHandle(2)">{{ collapseText }}</span>
+        <span v-if="expandText" class="nut-ellipsis__text" @click.stop="clickHandle(2)">{{ collapseText }}</span>
       </view>
     </view>
 
-    <view class="nut-ellipsis__copy" ref="rootContain" :id="'rootContain' + refRandomId" :style="{ width: widthRef }">
+    <view :id="'rootContain' + refRandomId" ref="rootContain" class="nut-ellipsis__copy" :style="{ width: widthRef }">
       <view>{{ contantCopy }}</view>
     </view>
 
     <!-- 省略号 symbol  -->
-    <view class="nut-ellipsis__copy" ref="symbolContain" :id="'symbolContain' + refRandomId" style="display: inline">{{
+    <view :id="'symbolContain' + refRandomId" ref="symbolContain" class="nut-ellipsis__copy" style="display: inline">{{
       symbolText
     }}</view>
 
diff --git a/src/packages/__VUE/ellipsis/index.vue b/src/packages/__VUE/ellipsis/index.vue
index 2d9c17ae8d..7991ab88fd 100644
--- a/src/packages/__VUE/ellipsis/index.vue
+++ b/src/packages/__VUE/ellipsis/index.vue
@@ -1,14 +1,14 @@
 <template>
-  <view :class="classes" @click="handleClick" ref="root">
+  <view ref="root" :class="classes" @click="handleClick">
     <view v-if="!exceeded">{{ content }}</view>
     <view v-if="exceeded && !expanded"
       >{{ ellipsis && ellipsis.leading
-      }}<span class="nut-ellipsis__text" v-if="expandText" @click.stop="clickHandle(1)">{{ expandText }}</span
+      }}<span v-if="expandText" class="nut-ellipsis__text" @click.stop="clickHandle(1)">{{ expandText }}</span
       >{{ ellipsis && ellipsis.tailing }}
     </view>
     <view v-if="exceeded && expanded">
       {{ content }}
-      <span class="nut-ellipsis__text" v-if="expandText" @click.stop="clickHandle(2)">{{ collapseText }}</span>
+      <span v-if="expandText" class="nut-ellipsis__text" @click.stop="clickHandle(2)">{{ collapseText }}</span>
     </view>
   </view>
 </template>
diff --git a/src/packages/__VUE/fixednav/demo.vue b/src/packages/__VUE/fixednav/demo.vue
index 2f4f219bb3..26c5cb1c20 100644
--- a/src/packages/__VUE/fixednav/demo.vue
+++ b/src/packages/__VUE/fixednav/demo.vue
@@ -1,29 +1,29 @@
 <template>
   <div class="demo">
     <nut-fixed-nav
+      v-model:visible="visible"
       :active-text="translate('basic')"
       :position="{ top: '70px' }"
-      v-model:visible="visible"
       :nav-list="navList"
       @selected="selected"
     />
     <nut-fixed-nav
+      v-model:visible="visible1"
       type="left"
       :position="{ top: '140px' }"
-      v-model:visible="visible1"
       :active-text="translate('left1')"
       :un-active-text="translate('left2')"
       :nav-list="navList"
       @selected="selected"
     />
     <nut-fixed-nav
+      v-model:visible="visible2"
       :position="{ top: '210px' }"
       :overlay="false"
-      v-model:visible="visible2"
       :nav-list="navList"
       @selected="selected"
     />
-    <nut-fixed-nav :position="{ top: '280px' }" type="left" v-model:visible="myActive" @selected="selected">
+    <nut-fixed-nav v-model:visible="myActive" :position="{ top: '280px' }" type="left" @selected="selected">
       <template #list>
         <ul class="nut-fixed-nav__list">
           <li class="nut-fixed-nav__list-item">1</li>
@@ -42,8 +42,8 @@
     <!-- 配合 Drag 支持拖拽 ，小程序暂不支持 -->
     <nut-drag direction="y" :style="{ right: '0px', bottom: '240px' }">
       <nut-fixed-nav
-        :un-active-text="translate('drag')"
         v-model:visible="visible3"
+        :un-active-text="translate('drag')"
         :nav-list="navList"
         @selected="selected"
       />
diff --git a/src/packages/__VUE/form/demo.vue b/src/packages/__VUE/form/demo.vue
index 0cfc05db8e..8fd16aaf48 100644
--- a/src/packages/__VUE/form/demo.vue
+++ b/src/packages/__VUE/form/demo.vue
@@ -24,7 +24,7 @@
       </nut-form-item>
     </nut-form>
     <h2>{{ translate('title1') }}</h2>
-    <nut-form :model-value="dynamicForm.state" ref="dynamicRefForm">
+    <nut-form ref="dynamicRefForm" :model-value="dynamicForm.state">
       <nut-form-item
         :label="translate('name')"
         prop="name"
@@ -32,21 +32,21 @@
         :rules="[{ required: true, message: translate('nameTip') }]"
       >
         <nut-input
-          class="nut-input-text"
           v-model="dynamicForm.state.name"
+          class="nut-input-text"
           :placeholder="translate('nameTip')"
           type="text"
         />
       </nut-form-item>
       <nut-form-item
+        v-for="(item, index) in dynamicForm.state.tels"
+        :key="item.key"
         :label="translate('tel') + index"
         :prop="'tels.' + index + '.value'"
         required
         :rules="[{ required: true, message: translate('telTip') + index }]"
-        :key="item.key"
-        v-for="(item, index) in dynamicForm.state.tels"
       >
-        <nut-input class="nut-input-text" v-model="item.value" :placeholder="translate('telTip') + index" type="text" />
+        <nut-input v-model="item.value" class="nut-input-text" :placeholder="translate('telTip') + index" type="text" />
       </nut-form-item>
       <nut-cell>
         <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add"
@@ -63,6 +63,7 @@
     </nut-form>
     <h2>{{ translate('title2') }}</h2>
     <nut-form
+      ref="ruleForm"
       :model-value="formData"
       :rules="{
         name: [
@@ -72,7 +73,6 @@
           }
         ]
       }"
-      ref="ruleForm"
     >
       <nut-form-item
         :label="translate('name')"
@@ -81,11 +81,11 @@
         :rules="[{ required: true, message: translate('nameTip') }]"
       >
         <nut-input
-          class="nut-input-text"
-          @blur="customBlurValidate('name')"
           v-model="formData.name"
+          class="nut-input-text"
           :placeholder="translate('nameTip1')"
           type="text"
+          @blur="customBlurValidate('name')"
         />
       </nut-form-item>
       <nut-form-item
@@ -99,7 +99,7 @@
           { regex: /^(\d{1,2}|1\d{2}|200)$/, message: translate('ageTip3') }
         ]"
       >
-        <nut-input class="nut-input-text" v-model="formData.age" :placeholder="translate('ageTip1')" type="text" />
+        <nut-input v-model="formData.age" class="nut-input-text" :placeholder="translate('ageTip1')" type="text" />
       </nut-form-item>
       <nut-form-item
         :label="translate('tel')"
@@ -110,7 +110,7 @@
           { validator: asyncValidator, message: translate('telTip2') }
         ]"
       >
-        <nut-input class="nut-input-text" v-model="formData.tel" :placeholder="translate('telTip1')" type="text" />
+        <nut-input v-model="formData.tel" class="nut-input-text" :placeholder="translate('telTip1')" type="text" />
       </nut-form-item>
       <nut-form-item
         :label="translate('address')"
@@ -119,8 +119,8 @@
         :rules="[{ required: true, message: translate('addressTip') }]"
       >
         <nut-input
-          class="nut-input-text"
           v-model="formData.address"
+          class="nut-input-text"
           :placeholder="translate('addressTip')"
           type="text"
         />
@@ -141,7 +141,7 @@
         <nut-checkbox v-model="formData2.checkbox">{{ translate('checkbox') }}</nut-checkbox>
       </nut-form-item>
       <nut-form-item :label="translate('radiogroup')">
-        <nut-radio-group direction="horizontal" v-model="formData2.radio">
+        <nut-radio-group v-model="formData2.radio" direction="horizontal">
           <nut-radio label="1">{{ translate('option', 1) }}</nut-radio>
           <nut-radio disabled label="2">{{ translate('option', 2) }}</nut-radio>
           <nut-radio label="3">{{ translate('option', 3) }}</nut-radio>
@@ -154,13 +154,13 @@
         <nut-input-number v-model="formData2.number" />
       </nut-form-item>
       <nut-form-item :label="translate('range')">
-        <nut-range hidden-tag v-model="formData2.range"></nut-range>
+        <nut-range v-model="formData2.range" hidden-tag></nut-range>
       </nut-form-item>
       <nut-form-item :label="translate('uploader')">
         <nut-uploader
+          v-model:file-list="formData2.defaultFileList"
           url="http://apiurl"
           accept="image/*"
-          v-model:file-list="formData2.defaultFileList"
           maximum="3"
           multiple
         >
@@ -168,12 +168,12 @@
       </nut-form-item>
       <nut-form-item :label="translate('address')">
         <nut-input
-          class="nut-input-text"
           v-model="formData2.address"
-          @click="addressModule.methods.show"
+          class="nut-input-text"
           readonly
           :placeholder="translate('addressTip1')"
           type="text"
+          @click="addressModule.methods.show"
         />
         <!-- nut-address -->
         <nut-address
@@ -182,8 +182,8 @@
           :city="addressModule.state.city"
           :country="addressModule.state.country"
           :town="addressModule.state.town"
-          @change="addressModule.methods.onChange"
           :custom-address-title="translate('addressTip2')"
+          @change="addressModule.methods.onChange"
         ></nut-address>
       </nut-form-item>
     </nut-form>
diff --git a/src/packages/__VUE/formitem/index.taro.vue b/src/packages/__VUE/formitem/index.taro.vue
index eb4abbd0b2..e5bd58ec2f 100644
--- a/src/packages/__VUE/formitem/index.taro.vue
+++ b/src/packages/__VUE/formitem/index.taro.vue
@@ -5,9 +5,9 @@
     :style="$attrs.style"
   >
     <view
+      v-if="label || getSlots('label')"
       class="nut-cell__title nut-form-item__label"
       :style="labelStyle"
-      v-if="label || getSlots('label')"
       :class="{ required: required }"
     >
       <slot name="label">{{ label }}</slot>
@@ -16,7 +16,7 @@
       <view class="nut-form-item__body__slots" :style="bodyStyle">
         <slot></slot>
       </view>
-      <view class="nut-form-item__body__tips" :style="errorMessageStyle" v-if="parent[prop] && showErrorMessage">
+      <view v-if="parent[prop] && showErrorMessage" class="nut-form-item__body__tips" :style="errorMessageStyle">
         {{ parent[prop] }}</view
       >
     </view>
diff --git a/src/packages/__VUE/formitem/index.vue b/src/packages/__VUE/formitem/index.vue
index a5fb785ccf..ea1570162e 100644
--- a/src/packages/__VUE/formitem/index.vue
+++ b/src/packages/__VUE/formitem/index.vue
@@ -5,9 +5,9 @@
     :style="$attrs.style"
   >
     <view
+      v-if="label || getSlots('label')"
       class="nut-cell__title nut-form-item__label"
       :style="labelStyle"
-      v-if="label || getSlots('label')"
       :class="{ required: required }"
     >
       <slot name="label">{{ label }}</slot>
@@ -16,7 +16,7 @@
       <view class="nut-form-item__body__slots" :style="bodyStyle">
         <slot></slot>
       </view>
-      <view class="nut-form-item__body__tips" :style="errorMessageStyle" v-if="parent[prop] && showErrorMessage">
+      <view v-if="parent[prop] && showErrorMessage" class="nut-form-item__body__tips" :style="errorMessageStyle">
         {{ parent[prop] }}</view
       >
     </view>
diff --git a/src/packages/__VUE/icon/demo.vue b/src/packages/__VUE/icon/demo.vue
index a775121c4e..5189251528 100644
--- a/src/packages/__VUE/icon/demo.vue
+++ b/src/packages/__VUE/icon/demo.vue
@@ -31,7 +31,7 @@
       <IconFont name="dongdong" size="26" />
     </nut-cell>
 
-    <nut-cell-group v-for="item in icons.data" :title="currentLang == 'zh-CN' ? item.name : item.nameEn" :key="item">
+    <nut-cell-group v-for="item in icons.data" :key="item" :title="currentLang == 'zh-CN' ? item.name : item.nameEn">
       <nut-cell>
         <ul>
           <li v-for="_item in item.icons" :key="_item">
@@ -41,7 +41,7 @@
         </ul>
       </nut-cell>
     </nut-cell-group>
-    <nut-cell-group v-for="item in icons.style" :title="currentLang == 'zh-CN' ? item.name : item.nameEn" :key="item">
+    <nut-cell-group v-for="item in icons.style" :key="item" :title="currentLang == 'zh-CN' ? item.name : item.nameEn">
       <nut-cell>
         <ul>
           <li v-for="it in item.icons" :key="it">
diff --git a/src/packages/__VUE/image/demo.vue b/src/packages/__VUE/image/demo.vue
index 2d266c6bfa..6f341da4df 100644
--- a/src/packages/__VUE/image/demo.vue
+++ b/src/packages/__VUE/image/demo.vue
@@ -5,7 +5,7 @@
 
     <h2>{{ translate('fill') }}</h2>
     <nut-row :gutter="10" flex-wrap="wrap">
-      <nut-col :span="8" v-for="fit in fits" :key="fit">
+      <nut-col v-for="fit in fits" :key="fit" :span="8">
         <nut-image :src="src" width="100" height="100" :fit="fit"></nut-image>
         <div class="text">{{ fit }}</div>
       </nut-col>
@@ -13,13 +13,13 @@
 
     <h2>{{ translate('position') }}</h2>
     <nut-row :gutter="10" flex-wrap="wrap">
-      <nut-col :span="8" v-for="pos in position2" :key="pos">
+      <nut-col v-for="pos in position2" :key="pos" :span="8">
         <nut-image :src="src" width="100" height="100" fit="contain" :position="pos"></nut-image>
         <div class="text">contain</div>
         <div class="text">{{ pos }}</div>
       </nut-col>
 
-      <nut-col :span="8" v-for="pos in position1" :key="pos">
+      <nut-col v-for="pos in position1" :key="pos" :span="8">
         <nut-image :src="src" width="100" height="100" fit="cover" :position="pos"></nut-image>
         <div class="text">cover</div>
         <div class="text">{{ pos }}</div>
diff --git a/src/packages/__VUE/image/index.vue b/src/packages/__VUE/image/index.vue
index cdb6a34c66..617a5a1817 100644
--- a/src/packages/__VUE/image/index.vue
+++ b/src/packages/__VUE/image/index.vue
@@ -6,15 +6,15 @@
       :src="lazyLoad ? (show ? src : undefined) : src"
       :date-src="lazyLoad ? (show ? undefined : src) : undefined"
       :alt="alt"
+      :style="styles"
       @load="load"
       @error="error"
-      :style="styles"
     />
-    <div class="nut-img-loading" v-if="loading">
+    <div v-if="loading" class="nut-img-loading">
       <Image v-if="!slotLoding" width="16px" height="20px" name="image"></Image>
       <slot name="loading"></slot>
     </div>
-    <div class="nut-img-error" v-if="isError && !loading">
+    <div v-if="isError && !loading" class="nut-img-error">
       <ImageError v-if="!slotError" width="16px" height="20px" name="imageError"></ImageError>
       <slot name="error"></slot>
     </div>
diff --git a/src/packages/__VUE/imagepreview/index.taro.vue b/src/packages/__VUE/imagepreview/index.taro.vue
index beeaa8ebae..d399af605d 100644
--- a/src/packages/__VUE/imagepreview/index.taro.vue
+++ b/src/packages/__VUE/imagepreview/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <nut-popup pop-class="nut-image-preview-custom-pop" v-model:visible="showPop">
+  <nut-popup v-model:visible="showPop" pop-class="nut-image-preview-custom-pop">
     <view class="nut-image-preview" @touchstart.capture="onTouchStart">
       <nut-swiper
         v-if="showPop"
@@ -8,10 +8,10 @@
         :loop="isLoop"
         :is-preventDefault="false"
         direction="horizontal"
-        @change="setActive"
         :init-page="initNo"
         :pagination-visible="paginationVisible"
         :pagination-color="paginationColor"
+        @change="setActive"
       >
         <nut-swiper-item v-for="(item, index) in images" :key="index">
           <img :src="item.src" mode="aspectFit" class="nut-image-preview-img" @click.stop="closeOnImg" />
@@ -19,8 +19,8 @@
       </nut-swiper>
     </view>
 
-    <view class="nut-image-preview-index" v-if="showIndex"> {{ active + 1 }} / {{ images.length }} </view>
-    <view class="nut-image-preview-close-icon" @click="onClose" :style="styles" v-if="closeable"
+    <view v-if="showIndex" class="nut-image-preview-index"> {{ active + 1 }} / {{ images.length }} </view>
+    <view v-if="closeable" class="nut-image-preview-close-icon" :style="styles" @click="onClose"
       ><CircleClose color="#ffffff"></CircleClose
     ></view>
   </nut-popup>
diff --git a/src/packages/__VUE/imagepreview/index.vue b/src/packages/__VUE/imagepreview/index.vue
index e38ddf6a27..90dde53dd2 100644
--- a/src/packages/__VUE/imagepreview/index.vue
+++ b/src/packages/__VUE/imagepreview/index.vue
@@ -1,13 +1,13 @@
 <template>
   <nut-popup
-    pop-class="nut-image-preview-custom-pop"
     v-model:visible="showPop"
+    pop-class="nut-image-preview-custom-pop"
     :teleportDisable="teleportDisable"
     :teleport="teleport"
-    @closed="onClose"
     lock-scroll
+    @closed="onClose"
   >
-    <view class="nut-image-preview" ref="swipeRef">
+    <view ref="swipeRef" class="nut-image-preview">
       <nut-swiper
         v-if="showPop"
         :auto-play="autoplay"
@@ -15,10 +15,10 @@
         :loop="isLoop"
         :is-preventDefault="false"
         direction="horizontal"
-        @change="setActive"
         :init-page="initNo"
         :pagination-visible="paginationVisible"
         :pagination-color="paginationColor"
+        @change="setActive"
       >
         <image-preview-item
           v-for="(item, index) in mergeImages"
@@ -29,16 +29,16 @@
           :rootWidth="rootWidth"
           :show="showPop"
           :init-no="active + 1"
-          @close="onClose"
           :content-close="contentClose"
           :maxZoom="maxZoom"
           :minZoom="minZoom"
+          @close="onClose"
         ></image-preview-item>
       </nut-swiper>
     </view>
-    <view class="nut-image-preview-index" v-if="showIndex"> {{ active + 1 }} / {{ mergeImages.length }} </view>
+    <view v-if="showIndex" class="nut-image-preview-index"> {{ active + 1 }} / {{ mergeImages.length }} </view>
 
-    <view :class="iconClasses" @click="onClose" v-if="closeable">
+    <view v-if="closeable" :class="iconClasses" @click="onClose">
       <slot name="close-icon"><CircleClose color="#ffffff"></CircleClose></slot>
     </view>
   </nut-popup>
diff --git a/src/packages/__VUE/infiniteloading/demo.vue b/src/packages/__VUE/infiniteloading/demo.vue
index bc76258055..7a15a76943 100644
--- a/src/packages/__VUE/infiniteloading/demo.vue
+++ b/src/packages/__VUE/infiniteloading/demo.vue
@@ -4,7 +4,7 @@
       <nut-tab-pane :title="translate('basic')">
         <ul class="infiniteUl">
           <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
-            <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{ item }}</li>
+            <li v-for="(item, index) in defultList" :key="index" class="infiniteLi">{{ item }}</li>
           </nut-infinite-loading>
         </ul>
       </nut-tab-pane>
@@ -18,7 +18,7 @@
             :has-more="customHasMore"
             @load-more="customLoadMore"
           >
-            <li class="infiniteLi" v-for="(item, index) in customList" :key="index">{{ item }}</li>
+            <li v-for="(item, index) in customList" :key="index" class="infiniteLi">{{ item }}</li>
           </nut-infinite-loading>
         </ul>
       </nut-tab-pane>
diff --git a/src/packages/__VUE/infiniteloading/index.vue b/src/packages/__VUE/infiniteloading/index.vue
index caa6c8cafb..a5268844eb 100644
--- a/src/packages/__VUE/infiniteloading/index.vue
+++ b/src/packages/__VUE/infiniteloading/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" ref="scroller">
+  <view ref="scroller" :class="classes">
     <view class="nut-infinite__container">
       <slot></slot>
     </view>
diff --git a/src/packages/__VUE/input/demo.vue b/src/packages/__VUE/input/demo.vue
index 2a5616eb2b..dc82e146b2 100644
--- a/src/packages/__VUE/input/demo.vue
+++ b/src/packages/__VUE/input/demo.vue
@@ -6,11 +6,11 @@
     <h2>{{ translate('title1') }}</h2>
     <nut-input v-model="state.text" :placeholder="translate('textPlaceholder')" />
     <nut-input v-model="state.password" :placeholder="translate('passwordPlaceholder')" type="password" />
-    <nut-input :placeholder="translate('numberPlaceholder')" v-model="state.number" type="number" />
-    <nut-input :placeholder="translate('digitPlaceholder')" v-model="state.digit" type="digit" />
+    <nut-input v-model="state.number" :placeholder="translate('numberPlaceholder')" type="number" />
+    <nut-input v-model="state.digit" :placeholder="translate('digitPlaceholder')" type="digit" />
     <h2>{{ translate('title2') }}</h2>
-    <nut-input :placeholder="translate('readonly')" v-model="state.readonly" readonly />
-    <nut-input :placeholder="translate('disabled')" v-model="state.disabled" disabled />
+    <nut-input v-model="state.readonly" :placeholder="translate('readonly')" readonly />
+    <nut-input v-model="state.disabled" :placeholder="translate('disabled')" disabled />
     <h2>{{ translate('title3') }}</h2>
     <nut-input v-model="state.clear" :placeholder="translate('clear')" clearable clearSize="14" />
     <nut-input
diff --git a/src/packages/__VUE/input/index.taro.vue b/src/packages/__VUE/input/index.taro.vue
index 344c75bdb3..941f0e3738 100644
--- a/src/packages/__VUE/input/index.taro.vue
+++ b/src/packages/__VUE/input/index.taro.vue
@@ -9,8 +9,8 @@
           <component
             :is="renderInput(type)"
             v-bind="$attrs"
-            class="input-text"
             ref="inputRef"
+            class="input-text"
             :style="styles"
             :maxlength="maxLength ? maxLength : undefined"
             :placeholder="placeholder"
@@ -20,6 +20,8 @@
             :formatTrigger="formatTrigger"
             :autofocus="autofocus ? true : undefined"
             :enterkeyhint="confirmType"
+            :adjust-position="adjustPosition"
+            :always-system="alwaysSystem"
             @input="onInput"
             @focus="onFocus"
             @blur="onBlur"
@@ -27,8 +29,6 @@
             @change="endComposing"
             @compositionend="endComposing"
             @compositionstart="startComposing"
-            :adjust-position="adjustPosition"
-            :always-system="alwaysSystem"
           ></component>
           <view v-if="readonly" class="nut-input-disabled-mask" @click="onClickInput"></view>
           <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
@@ -37,9 +37,9 @@
           </view>
         </view>
         <view
-          class="nut-input-clear-box"
           v-if="clearable && !readonly"
           v-show="(active || showClearIcon) && modelValue.length > 0"
+          class="nut-input-clear-box"
           @click="clear"
         >
           <slot name="clear">
diff --git a/src/packages/__VUE/input/index.vue b/src/packages/__VUE/input/index.vue
index 1b37485590..95273372f1 100644
--- a/src/packages/__VUE/input/index.vue
+++ b/src/packages/__VUE/input/index.vue
@@ -8,8 +8,8 @@
         <view class="nut-input-box">
           <component
             :is="renderInput(type)"
-            class="input-text"
             ref="inputRef"
+            class="input-text"
             :style="styles"
             :maxlength="maxLength"
             :placeholder="placeholder"
@@ -33,9 +33,9 @@
           </view>
         </view>
         <view
-          class="nut-input-clear-box"
           v-if="clearable && !readonly"
           v-show="(active || showClearIcon) && modelValue.length > 0"
+          class="nut-input-clear-box"
           @click="clear"
         >
           <slot name="clear">
diff --git a/src/packages/__VUE/inputnumber/demo.vue b/src/packages/__VUE/inputnumber/demo.vue
index dacd17ad9a..d4fad4047d 100644
--- a/src/packages/__VUE/inputnumber/demo.vue
+++ b/src/packages/__VUE/inputnumber/demo.vue
@@ -10,7 +10,7 @@
     </nut-cell>
     <h2>{{ translate('limit') }}</h2>
     <nut-cell>
-      <nut-input-number v-model="state.val3" @overlimit="overlimit" min="10" max="20" />
+      <nut-input-number v-model="state.val3" min="10" max="20" @overlimit="overlimit" />
     </nut-cell>
     <h2>{{ translate('disable') }}</h2>
     <nut-cell>
diff --git a/src/packages/__VUE/invoice/index.taro.vue b/src/packages/__VUE/invoice/index.taro.vue
index 24b4872574..bd3a874e54 100644
--- a/src/packages/__VUE/invoice/index.taro.vue
+++ b/src/packages/__VUE/invoice/index.taro.vue
@@ -1,6 +1,6 @@
 <template>
   <view :class="classes">
-    <nut-form :model-value="formValue" ref="formRef">
+    <nut-form ref="formRef" :model-value="formValue">
       <nut-form-item
         v-for="(item, index) of list"
         :key="index"
@@ -23,9 +23,9 @@
         </template>
         <template v-else>
           <input
+            v-model="formValue[item.formItemProp]"
             class="nut-input-text"
             :placeholder="item.placeholder"
-            v-model="formValue[item.formItemProp]"
             type="text"
           />
         </template>
diff --git a/src/packages/__VUE/invoice/index.vue b/src/packages/__VUE/invoice/index.vue
index 797c61af78..deac88a47b 100644
--- a/src/packages/__VUE/invoice/index.vue
+++ b/src/packages/__VUE/invoice/index.vue
@@ -1,6 +1,6 @@
 <template>
   <view :class="classes">
-    <nut-form :model-value="formValue" ref="formRef">
+    <nut-form ref="formRef" :model-value="formValue">
       <nut-form-item
         v-for="(item, index) of list"
         :key="index"
@@ -23,9 +23,9 @@
         </template>
         <template v-else>
           <input
+            v-model="formValue[item.formItemProp]"
             class="nut-input-text"
             :placeholder="item.placeholder"
-            v-model="formValue[item.formItemProp]"
             type="text"
           />
         </template>
diff --git a/src/packages/__VUE/list/index.taro.vue b/src/packages/__VUE/list/index.taro.vue
index 0243c2cd66..e666dec65b 100644
--- a/src/packages/__VUE/list/index.taro.vue
+++ b/src/packages/__VUE/list/index.taro.vue
@@ -1,30 +1,30 @@
 <template>
   <nut-scroll-view
+    :id="'list' + refRandomId"
+    ref="list"
     :class="classes"
     :scroll-y="true"
     :style="{ height: `${getContainerHeight}px` }"
     scroll-top="0"
     @scroll="handleScrollEvent"
-    ref="list"
-    :id="'list' + refRandomId"
   >
     <div
+      :id="'phantom' + refRandomId"
+      ref="phantom"
       class="nut-list-phantom"
       :style="{ height: phantomHeight + 'px' }"
-      ref="phantom"
-      :id="'phantom' + refRandomId"
     ></div>
     <div
+      :id="'actualContent' + refRandomId"
+      ref="actualContent"
       class="nut-list-container"
       :style="{ transform: getTransform() }"
-      ref="actualContent"
-      :id="'actualContent' + refRandomId"
     >
       <div
-        class="nut-list-item"
         v-for="(item, index) in visibleData"
-        :key="item"
         :id="'list-item-' + Number(index + start)"
+        :key="item"
+        class="nut-list-item"
       >
         <slot :item="item" :index="index + start"></slot>
       </div>
diff --git a/src/packages/__VUE/list/index.vue b/src/packages/__VUE/list/index.vue
index e3c98b1da8..60b5d8237c 100644
--- a/src/packages/__VUE/list/index.vue
+++ b/src/packages/__VUE/list/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div :class="classes" :style="{ height: `${getContainerHeight}px` }" @scroll.passive="handleScrollEvent" ref="list">
-    <div class="nut-list-phantom" :style="{ height: phantomHeight + 'px' }" ref="phantom"></div>
-    <div class="nut-list-container" :style="{ transform: getTransform() }" ref="actualContent">
-      <div class="nut-list-item" v-for="(item, index) in visibleData" :key="item">
+  <div ref="list" :class="classes" :style="{ height: `${getContainerHeight}px` }" @scroll.passive="handleScrollEvent">
+    <div ref="phantom" class="nut-list-phantom" :style="{ height: phantomHeight + 'px' }"></div>
+    <div ref="actualContent" class="nut-list-container" :style="{ transform: getTransform() }">
+      <div v-for="(item, index) in visibleData" :key="item" class="nut-list-item">
         <slot :item="item" :index="index + start"></slot>
       </div>
     </div>
diff --git a/src/packages/__VUE/menu/demo.vue b/src/packages/__VUE/menu/demo.vue
index e327c8cf65..a44d87acf8 100644
--- a/src/packages/__VUE/menu/demo.vue
+++ b/src/packages/__VUE/menu/demo.vue
@@ -3,12 +3,12 @@
     <h2>{{ translate('basic') }}</h2>
     <nut-menu>
       <nut-menu-item v-model="state.value1" :options="options1" />
-      <nut-menu-item v-model="state.value2" @change="handleChange" :options="options2" />
+      <nut-menu-item v-model="state.value2" :options="options2" @change="handleChange" />
     </nut-menu>
     <h2>{{ translate('customMenuContent') }}</h2>
     <nut-menu>
       <nut-menu-item v-model="state.value1" :options="options1" />
-      <nut-menu-item :title="translate('screen')" ref="item">
+      <nut-menu-item ref="item" :title="translate('screen')">
         <div :style="{ display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center' }">
           <div :style="{ marginRight: '10px' }">{{ translate('customContent') }}</div>
           <nut-button @click="onConfirm">{{ translate('confirm') }}</nut-button>
@@ -22,7 +22,7 @@
     <h2>{{ translate('customActiveColor') }}</h2>
     <nut-menu active-color="green">
       <nut-menu-item v-model="state.value1" :options="options1" />
-      <nut-menu-item v-model="state.value2" @change="handleChange" :options="options2" />
+      <nut-menu-item v-model="state.value2" :options="options2" @change="handleChange" />
     </nut-menu>
     <h2>{{ translate('customIcons') }}</h2>
     <nut-menu>
@@ -30,7 +30,7 @@
         <TriangleDown />
       </template>
       <nut-menu-item v-model="state.value1" :options="options1" />
-      <nut-menu-item v-model="state.value2" @change="handleChange" :options="options2">
+      <nut-menu-item v-model="state.value2" :options="options2" @change="handleChange">
         <template #icon>
           <Checked></Checked>
         </template>
@@ -39,12 +39,12 @@
     <h2>{{ translate('expandDirection') }}</h2>
     <nut-menu direction="up">
       <nut-menu-item v-model="state.value1" :options="options1" />
-      <nut-menu-item v-model="state.value2" @change="handleChange" :options="options2" />
+      <nut-menu-item v-model="state.value2" :options="options2" @change="handleChange" />
     </nut-menu>
     <h2>{{ translate('disableMenu') }}</h2>
     <nut-menu>
-      <nut-menu-item disabled v-model="state.value1" :options="options1" />
-      <nut-menu-item disabled v-model="state.value2" :options="options2" />
+      <nut-menu-item v-model="state.value1" disabled :options="options1" />
+      <nut-menu-item v-model="state.value2" disabled :options="options2" />
     </nut-menu>
   </div>
 </template>
diff --git a/src/packages/__VUE/menu/index.taro.vue b/src/packages/__VUE/menu/index.taro.vue
index 8e0e88b256..717ee954f3 100644
--- a/src/packages/__VUE/menu/index.taro.vue
+++ b/src/packages/__VUE/menu/index.taro.vue
@@ -1,12 +1,12 @@
 <template>
   <view :class="classes">
-    <view :id="'nut-menu__bar' + refRandomId" class="nut-menu__bar" :class="{ opened: opened }" ref="barRef">
+    <view :id="'nut-menu__bar' + refRandomId" ref="barRef" class="nut-menu__bar" :class="{ opened: opened }">
       <template v-for="(item, index) in children" :key="index">
         <view
           class="nut-menu__item"
-          @click="!item.disabled && toggleItem(index)"
           :class="{ disabled: item.disabled, active: item.state.showPopup }"
           :style="{ color: item.state.showPopup ? activeColor : '' }"
+          @click="!item.disabled && toggleItem(index)"
         >
           <view class="nut-menu__title" :class="getClasses(item.state.showPopup)">
             <view class="nut-menu__title-text">{{ item.renderTitle() }}</view>
diff --git a/src/packages/__VUE/menu/index.vue b/src/packages/__VUE/menu/index.vue
index 3280c051fd..a0860630fb 100644
--- a/src/packages/__VUE/menu/index.vue
+++ b/src/packages/__VUE/menu/index.vue
@@ -1,12 +1,12 @@
 <template>
   <view :class="classes">
-    <view class="nut-menu__bar" :class="{ opened: opened }" ref="barRef">
+    <view ref="barRef" class="nut-menu__bar" :class="{ opened: opened }">
       <template v-for="(item, index) in children" :key="index">
         <view
           class="nut-menu__item"
-          @click="!item.disabled && toggleItem(index)"
           :class="{ disabled: item.disabled, active: item.state.showPopup }"
           :style="{ color: item.state.showPopup ? activeColor : '' }"
+          @click="!item.disabled && toggleItem(index)"
         >
           <view class="nut-menu__title" :class="getClasses(item.state.showPopup)">
             <view class="nut-menu__title-text">{{ item.renderTitle() }}</view>
diff --git a/src/packages/__VUE/menuitem/index.taro.vue b/src/packages/__VUE/menuitem/index.taro.vue
index c58f48a64d..d0080551a1 100644
--- a/src/packages/__VUE/menuitem/index.taro.vue
+++ b/src/packages/__VUE/menuitem/index.taro.vue
@@ -1,25 +1,25 @@
 <template>
-  <view class="nut-menu-item" v-show="state.showWrapper" :style="style">
+  <view v-show="state.showWrapper" class="nut-menu-item" :style="style">
     <view
       v-show="state.showPopup"
-      @click="handleClickOutside"
       class="nut-menu-item-placeholder-element"
       :style="placeholderElementStyle"
       :catch-move="parent.props.lockScroll"
+      @click="handleClickOutside"
     >
     </view>
     <nut-popup
-      :style="{ position: 'absolute' }"
-      :overlayStyle="{ position: 'absolute' }"
       v-bind="$attrs"
       v-model:visible="state.showPopup"
+      :style="{ position: 'absolute' }"
+      :overlayStyle="{ position: 'absolute' }"
       :position="parent.props.direction === 'down' ? 'top' : 'bottom'"
       :duration="parent.props.duration"
       :destroy-on-close="false"
       :overlay="parent.props.overlay"
       :lockScroll="parent.props.lockScroll"
-      @closed="handleClose"
       :close-on-click-overlay="parent.props.closeOnClickOverlay"
+      @closed="handleClose"
     >
       <nut-scroll-view :scroll-y="true">
         <view class="nut-menu-item__content">
@@ -32,8 +32,8 @@
             @click="onClick(option)"
           >
             <span
-              class="nut-menu-item__span"
               v-if="option.value === modelValue"
+              class="nut-menu-item__span"
               :class="[option.value === modelValue ? activeTitleClass : inactiveTitleClass]"
             >
               <slot name="icon">
diff --git a/src/packages/__VUE/menuitem/index.vue b/src/packages/__VUE/menuitem/index.vue
index c306440479..c011ccf8c7 100644
--- a/src/packages/__VUE/menuitem/index.vue
+++ b/src/packages/__VUE/menuitem/index.vue
@@ -1,25 +1,25 @@
 <template>
-  <view class="nut-menu-item" v-show="state.showWrapper" :style="style">
+  <view v-show="state.showWrapper" class="nut-menu-item" :style="style">
     <div
       v-show="state.showPopup"
-      @click="handleClickOutside"
       class="nut-menu-item-placeholder-element"
       :style="placeholderElementStyle"
+      @click="handleClickOutside"
     >
     </div>
     <nut-popup
-      :style="{ position: 'absolute' }"
-      :overlayStyle="{ position: 'absolute' }"
       v-bind="$attrs"
       v-model:visible="state.showPopup"
+      :style="{ position: 'absolute' }"
+      :overlayStyle="{ position: 'absolute' }"
       :position="parent.props.direction === 'down' ? 'top' : 'bottom'"
       :duration="parent.props.duration"
       :destroy-on-close="false"
       :overlay="parent.props.overlay"
-      @closed="handleClose"
       :lockScroll="parent.props.lockScroll"
       :teleportDisable="false"
       :close-on-click-overlay="parent.props.closeOnClickOverlay"
+      @closed="handleClose"
     >
       <view class="nut-menu-item__content nut-menu-item__overflow">
         <view
@@ -31,8 +31,8 @@
           @click="onClick(option)"
         >
           <span
-            class="nut-menu-item__span"
             v-if="option.value === modelValue"
+            class="nut-menu-item__span"
             :class="[option.value === modelValue ? activeTitleClass : inactiveTitleClass]"
           >
             <slot name="icon">
diff --git a/src/packages/__VUE/navbar/demo.vue b/src/packages/__VUE/navbar/demo.vue
index e384030727..a892230b27 100644
--- a/src/packages/__VUE/navbar/demo.vue
+++ b/src/packages/__VUE/navbar/demo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo full">
     <h2>{{ translate('title1') }}</h2>
-    <nut-navbar @on-click-back="back" @on-click-title="title" :title="translate('navTitle1')">
+    <nut-navbar :title="translate('navTitle1')" @on-click-back="back" @on-click-title="title">
       <template #left>
         <div>{{ translate('back') }}</div>
       </template>
@@ -11,22 +11,22 @@
     </nut-navbar>
 
     <nut-navbar
+      :title="translate('navTitle2')"
+      :desc="translate('desc1')"
       @on-click-back="back"
       @on-click-title="title"
       @on-click-right="rightClick"
-      :title="translate('navTitle2')"
-      :desc="translate('desc1')"
     ></nut-navbar>
 
     <nut-navbar
       :left-show="false"
+      :title="translate('navTitle3')"
+      :titleIcon="true"
+      :desc="translate('desc2')"
       @on-click-back="back"
       @on-click-title="title"
       @on-click-icon="icon"
       @on-click-right="rightClick"
-      :title="translate('navTitle3')"
-      :titleIcon="true"
-      :desc="translate('desc2')"
     >
       <template #title-icon>
         <Cart2 width="16px"></Cart2>
@@ -37,7 +37,7 @@
     </nut-navbar>
 
     <h2>{{ translate('title2') }}</h2>
-    <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-right="rightClick" :desc="translate('desc2')">
+    <nut-navbar :desc="translate('desc2')" @on-click-back="back" @on-click-title="title" @on-click-right="rightClick">
       <template #content>
         <nut-tabs v-model="tab1value" @click="changeTab">
           <nut-tab-pane :title="translate('tab1')"> </nut-tab-pane>
diff --git a/src/packages/__VUE/navbar/index.taro.vue b/src/packages/__VUE/navbar/index.taro.vue
index 226429eae8..6edbe0bbfd 100644
--- a/src/packages/__VUE/navbar/index.taro.vue
+++ b/src/packages/__VUE/navbar/index.taro.vue
@@ -1,8 +1,8 @@
 <template>
   <view class="nut-navbar--placeholder" :style="rootStyle">
-    <view :id="'navbarRef-' + refRandomId" :class="classes" :style="{ zIndex }" ref="navbarRef">
+    <view :id="'navbarRef-' + refRandomId" ref="navbarRef" :class="classes" :style="{ zIndex }">
       <view class="nut-navbar__left" @click="handleLeft">
-        <slot name="left-show" v-if="leftShow">
+        <slot v-if="leftShow" name="left-show">
           <Left height="12px" color="#979797"></Left>
         </slot>
         <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
diff --git a/src/packages/__VUE/navbar/index.vue b/src/packages/__VUE/navbar/index.vue
index 8226b574d0..d511a4c215 100644
--- a/src/packages/__VUE/navbar/index.vue
+++ b/src/packages/__VUE/navbar/index.vue
@@ -1,8 +1,8 @@
 <template>
   <view class="nut-navbar--placeholder" :style="rootStyle">
-    <view :class="classes" :style="{ zIndex }" ref="navbarRef">
+    <view ref="navbarRef" :class="classes" :style="{ zIndex }">
       <view class="nut-navbar__left" @click="handleLeft">
-        <slot name="left-show" v-if="leftShow">
+        <slot v-if="leftShow" name="left-show">
           <Left height="12px" color="#979797"></Left>
         </slot>
         <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
diff --git a/src/packages/__VUE/noticebar/demo.vue b/src/packages/__VUE/noticebar/demo.vue
index f926e7c38d..1a492b15e6 100644
--- a/src/packages/__VUE/noticebar/demo.vue
+++ b/src/packages/__VUE/noticebar/demo.vue
@@ -34,8 +34,8 @@
         :list="horseLamp1"
         :speed="10"
         :standTime="1000"
-        @click="go"
         :close-mode="true"
+        @click="go"
       ></nut-noticebar>
     </div>
 
@@ -47,11 +47,11 @@
     <div class="interstroll-list">
       <nut-noticebar direction="vertical" :height="50" :speed="10" :standTime="1000" :list="[]" @close="go">
         <div
+          v-for="(item, index) in data1"
+          :key="index"
           class="custom-item"
           :data-index="index"
-          v-for="(item, index) in data1"
           style="height: 50px; line-height: 50px"
-          :key="index"
           >{{ item }}</div
         >
       </nut-noticebar>
diff --git a/src/packages/__VUE/noticebar/index.taro.vue b/src/packages/__VUE/noticebar/index.taro.vue
index 6ebc2e4d0b..114edc2106 100644
--- a/src/packages/__VUE/noticebar/index.taro.vue
+++ b/src/packages/__VUE/noticebar/index.taro.vue
@@ -2,6 +2,7 @@
   <view :class="classes">
     <view
       v-show="showNoticebar"
+      v-if="direction == 'across'"
       class="nut-noticebar__page"
       :class="{
         'nut-noticebar__page--withicon': closeMode,
@@ -10,7 +11,6 @@
       }"
       :style="barStyle"
       @click="handleClick"
-      v-if="direction == 'across'"
     >
       <view class="nut-noticebar__page-lefticon">
         <slot name="left-icon">
@@ -34,8 +34,8 @@
     </view>
 
     <view
-      class="nut-noticebar__vertical"
       v-if="scrollList.length > 0 && direction == 'vertical' && showNoticebar"
+      class="nut-noticebar__vertical"
       :style="barStyle"
     >
       <template v-if="slots.default">
@@ -58,9 +58,9 @@
       <template v-else>
         <ul class="nut-noticebar__vertical-list" :style="horseLampStyle">
           <li
-            class="nut-noticebar__vertical-item"
             v-for="(item, index) in scrollList"
             :key="index"
+            class="nut-noticebar__vertical-item"
             :style="{ height: pxCheck(height), lineHeight: pxCheck(height) }"
             @click="go(item)"
           >
diff --git a/src/packages/__VUE/noticebar/index.vue b/src/packages/__VUE/noticebar/index.vue
index edd765df0d..720731253a 100644
--- a/src/packages/__VUE/noticebar/index.vue
+++ b/src/packages/__VUE/noticebar/index.vue
@@ -2,6 +2,7 @@
   <view :class="classes">
     <view
       v-show="showNoticebar"
+      v-if="direction == 'across'"
       class="nut-noticebar__page"
       :class="{
         'nut-noticebar__page--withicon': closeMode,
@@ -10,11 +11,10 @@
       }"
       :style="barStyle"
       @click="handleClick"
-      v-if="direction == 'across'"
     >
       <view class="nut-noticebar__page-lefticon">
         <slot name="left-icon">
-          <Notice size="16px" v-if="leftIcon"></Notice>
+          <Notice v-if="leftIcon" size="16px"></Notice>
         </slot>
       </view>
       <view ref="wrap" class="nut-noticebar__page-wrap">
@@ -28,14 +28,14 @@
         </view>
       </view>
       <view v-if="closeMode || $slots['right-icon']" class="nut-noticebar__page-righticon" @click.stop="onClickIcon">
-        <slot name="right-icon" v-if="$slots['right-icon']"> </slot>
+        <slot v-if="$slots['right-icon']" name="right-icon"> </slot>
         <CircleClose v-else />
       </view>
     </view>
 
     <view
-      class="nut-noticebar__vertical"
       v-if="scrollList.length > 0 && direction == 'vertical' && showNoticebar"
+      class="nut-noticebar__vertical"
       :style="barStyle"
     >
       <template v-if="slots.default">
@@ -57,9 +57,9 @@
       <template v-else>
         <ul class="nut-noticebar__vertical-list" :style="horseLampStyle">
           <li
-            class="nut-noticebar__vertical-item"
             v-for="(item, index) in scrollList"
             :key="index"
+            class="nut-noticebar__vertical-item"
             :style="{ height: pxCheck(height), lineHeight: pxCheck(height) }"
             @click="go(item)"
           >
diff --git a/src/packages/__VUE/numberkeyboard/demo.vue b/src/packages/__VUE/numberkeyboard/demo.vue
index e902d1e894..7b3b7f01ca 100644
--- a/src/packages/__VUE/numberkeyboard/demo.vue
+++ b/src/packages/__VUE/numberkeyboard/demo.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="demo">
-    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(1)" :title="translate('basic')"></nut-cell>
+    <nut-cell :isLink="true" :title="translate('basic')" @touchstart.stop="showKeyBoard(1)"></nut-cell>
     <nut-number-keyboard v-model:visible="visible1" @blur="onBlur(1)" @input="input" @delete="onDelete">
     </nut-number-keyboard>
-    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(2)" :title="translate('sidebar')"></nut-cell>
+    <nut-cell :isLink="true" :title="translate('sidebar')" @touchstart.stop="showKeyBoard(2)"></nut-cell>
     <nut-number-keyboard
-      type="rightColumn"
       v-model:visible="visible2"
+      type="rightColumn"
       :custom-key="customKey1"
       :confirm-text="translate('confirmText')"
       @input="input"
@@ -14,10 +14,10 @@
       @blur="onBlur(2)"
     >
     </nut-number-keyboard>
-    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(3)" :title="translate('randomKeyOrder')"></nut-cell>
+    <nut-cell :isLink="true" :title="translate('randomKeyOrder')" @touchstart.stop="showKeyBoard(3)"></nut-cell>
     <nut-number-keyboard
-      type="rightColumn"
       v-model:visible="visible3"
+      type="rightColumn"
       :randomKeys="true"
       :custom-key="customKey1"
       @input="input"
@@ -26,10 +26,10 @@
     >
     </nut-number-keyboard>
 
-    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(4)" :title="translate('withTitle')"></nut-cell>
+    <nut-cell :isLink="true" :title="translate('withTitle')" @touchstart.stop="showKeyBoard(4)"></nut-cell>
     <nut-number-keyboard
-      :title="translate('title')"
       v-model:visible="visible4"
+      :title="translate('title')"
       :custom-key="customKey2"
       @input="input"
       @close="close(4)"
@@ -37,7 +37,7 @@
     >
     </nut-number-keyboard>
 
-    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(6)" :title="translate('idNumberKeyboard')"></nut-cell>
+    <nut-cell :isLink="true" :title="translate('idNumberKeyboard')" @touchstart.stop="showKeyBoard(6)"></nut-cell>
     <nut-number-keyboard
       v-model:visible="visible6"
       :custom-key="customKey3"
@@ -49,9 +49,9 @@
     <nut-cell
       :isLink="true"
       desc-text-align="left"
-      @touchstart.stop="showKeyBoard(5)"
       :desc="value"
       :title="translate('bindValue')"
+      @touchstart.stop="showKeyBoard(5)"
     ></nut-cell>
     <nut-number-keyboard v-model:visible="visible5" v-model="value" maxlength="6" @blur="onBlur(5)" @close="close(5)">
     </nut-number-keyboard>
diff --git a/src/packages/__VUE/numberkeyboard/index.taro.vue b/src/packages/__VUE/numberkeyboard/index.taro.vue
index cef250c135..4ee6cc2787 100644
--- a/src/packages/__VUE/numberkeyboard/index.taro.vue
+++ b/src/packages/__VUE/numberkeyboard/index.taro.vue
@@ -4,19 +4,21 @@
     position="bottom"
     :popClass="popClass"
     :overlay="overlay"
-    @click-overlay="closeBoard()"
     overlay-class="nut-number-keyboard-overlay"
+    @click-overlay="closeBoard()"
   >
-    <div class="nut-number-keyboard" ref="root">
-      <div class="nut-number-keyboard__header" v-if="title">
+    <div ref="root" class="nut-number-keyboard">
+      <div v-if="title" class="nut-number-keyboard__header">
         <h3 class="nut-number-keyboard__title">{{ title }}</h3>
-        <span class="van-number-keyboard__close" v-if="type == 'default'" @click="closeBoard()">{{
+        <span v-if="type == 'default'" class="van-number-keyboard__close" @click="closeBoard()">{{
           translate('done')
         }}</span>
       </div>
       <div class="nut-number-keyboard__body">
         <div class="nut-number-keyboard__keys">
           <div
+            v-for="item of keysList"
+            :key="'key' + item.id"
             :class="[
               'nut-key__wrapper',
               {
@@ -24,8 +26,6 @@
                   item.id == 0 && type == 'rightColumn' && Array.isArray(customKey) && customKey.length == 1
               }
             ]"
-            v-for="item of keysList"
-            :key="'key' + item.id"
           >
             <div
               :class="[
@@ -50,7 +50,7 @@
             </div>
           </div>
         </div>
-        <div class="nut-number-keyboard__sidebar" v-if="type == 'rightColumn'">
+        <div v-if="type == 'rightColumn'" class="nut-number-keyboard__sidebar">
           <div class="nut-key__wrapper">
             <div
               :class="['nut-key', { active: clickKeyIndex == 'delete' }]"
diff --git a/src/packages/__VUE/numberkeyboard/index.vue b/src/packages/__VUE/numberkeyboard/index.vue
index 9659ef6d7a..cf07f79853 100644
--- a/src/packages/__VUE/numberkeyboard/index.vue
+++ b/src/packages/__VUE/numberkeyboard/index.vue
@@ -2,9 +2,9 @@
   <div ref="root">
     <nut-popup v-model:visible="show" position="bottom" :popClass="popClass" :overlay="false" :teleportDisable="false">
       <div class="nut-number-keyboard">
-        <div class="nut-number-keyboard__header" v-if="title">
+        <div v-if="title" class="nut-number-keyboard__header">
           <h3 class="nut-number-keyboard__title">{{ title }}</h3>
-          <span class="nut-number-keyboard__close" v-if="type == 'default'" @click="closeBoard()">{{
+          <span v-if="type == 'default'" class="nut-number-keyboard__close" @click="closeBoard()">{{
             translate('done')
           }}</span>
         </div>
@@ -44,7 +44,7 @@
               </div>
             </div>
           </div>
-          <div class="nut-number-keyboard__sidebar" v-if="type == 'rightColumn'">
+          <div v-if="type == 'rightColumn'" class="nut-number-keyboard__sidebar">
             <div class="nut-key__wrapper">
               <div
                 :class="['nut-key', { active: clickKeyIndex == 'delete' }]"
diff --git a/src/packages/__VUE/overlay/index.taro.vue b/src/packages/__VUE/overlay/index.taro.vue
index 27564e62be..d3e532261c 100644
--- a/src/packages/__VUE/overlay/index.taro.vue
+++ b/src/packages/__VUE/overlay/index.taro.vue
@@ -1,6 +1,6 @@
 <template>
   <Transition name="overlay-fade">
-    <view :class="classes" @click="onClick" :style="style" v-show="visible" :catch-move="lockScroll">
+    <view v-show="visible" :class="classes" :style="style" :catch-move="lockScroll" @click="onClick">
       <slot></slot>
     </view>
   </Transition>
diff --git a/src/packages/__VUE/overlay/index.vue b/src/packages/__VUE/overlay/index.vue
index 2b0cb1cce9..d4b418ed00 100644
--- a/src/packages/__VUE/overlay/index.vue
+++ b/src/packages/__VUE/overlay/index.vue
@@ -1,6 +1,6 @@
 <template>
   <Transition name="overlay-fade">
-    <view :class="classes" @click.stop="onClick" :style="style" v-show="visible">
+    <view v-show="visible" :class="classes" :style="style" @click.stop="onClick">
       <slot></slot>
     </view>
   </Transition>
diff --git a/src/packages/__VUE/pagination/index.taro.vue b/src/packages/__VUE/pagination/index.taro.vue
index 8a03aae016..e29197181c 100644
--- a/src/packages/__VUE/pagination/index.taro.vue
+++ b/src/packages/__VUE/pagination/index.taro.vue
@@ -8,7 +8,7 @@
         {{ prevText || translate('prev') }}
       </slot>
     </view>
-    <view class="nut-pagination-contain" v-if="mode == 'multi'">
+    <view v-if="mode == 'multi'" class="nut-pagination-contain">
       <view
         v-for="(item, index) of pages"
         :key="index + 'pagination'"
@@ -20,7 +20,7 @@
         </slot>
       </view>
     </view>
-    <view class="nut-pagination-contain" v-if="mode == 'simple'">
+    <view v-if="mode == 'simple'" class="nut-pagination-contain">
       <view class="nut-pagination-simple">{{ modelValue }}/{{ countRef }}</view>
     </view>
     <view
diff --git a/src/packages/__VUE/pagination/index.vue b/src/packages/__VUE/pagination/index.vue
index 8a03aae016..e29197181c 100644
--- a/src/packages/__VUE/pagination/index.vue
+++ b/src/packages/__VUE/pagination/index.vue
@@ -8,7 +8,7 @@
         {{ prevText || translate('prev') }}
       </slot>
     </view>
-    <view class="nut-pagination-contain" v-if="mode == 'multi'">
+    <view v-if="mode == 'multi'" class="nut-pagination-contain">
       <view
         v-for="(item, index) of pages"
         :key="index + 'pagination'"
@@ -20,7 +20,7 @@
         </slot>
       </view>
     </view>
-    <view class="nut-pagination-contain" v-if="mode == 'simple'">
+    <view v-if="mode == 'simple'" class="nut-pagination-contain">
       <view class="nut-pagination-simple">{{ modelValue }}/{{ countRef }}</view>
     </view>
     <view
diff --git a/src/packages/__VUE/picker/Column.vue b/src/packages/__VUE/picker/Column.vue
index 544dd67240..5affcdb617 100644
--- a/src/packages/__VUE/picker/Column.vue
+++ b/src/packages/__VUE/picker/Column.vue
@@ -1,26 +1,26 @@
 <template>
   <view class="nut-picker__list" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
     <view
-      class="nut-picker-roller"
       ref="roller"
+      class="nut-picker-roller"
       :style="threeDimensional ? touchRollerStyle : touchTileStyle"
       @transitionend="stopMomentum"
     >
       <template v-for="(item, index) in column" :key="item[fieldNames.value] ?? index">
         <!-- 3D 效果 -->
         <view
+          v-if="item && item[fieldNames.text] && threeDimensional"
           class="nut-picker-roller-item"
           :class="{ 'nut-picker-roller-item-hidden': isHidden(index + 1) }"
           :style="setRollerStyle(index + 1)"
-          v-if="item && item[fieldNames.text] && threeDimensional"
         >
           {{ item[fieldNames.text] }}
         </view>
         <!-- 平铺 -->
         <view
+          v-if="item && item[fieldNames.text] && !threeDimensional"
           class="nut-picker-roller-item-tile"
           :style="{ height: pxCheck(optionHeight), lineHeight: pxCheck(optionHeight) }"
-          v-if="item && item[fieldNames.text] && !threeDimensional"
         >
           {{ item[fieldNames.text] }}
         </view>
diff --git a/src/packages/__VUE/picker/demo.vue b/src/packages/__VUE/picker/demo.vue
index 78c61af723..7ba655c990 100644
--- a/src/packages/__VUE/picker/demo.vue
+++ b/src/packages/__VUE/picker/demo.vue
@@ -5,7 +5,7 @@
 
     <h2>{{ translate('popupDesc') }}</h2>
     <nut-cell :title="translate('chooseCity')" :desc="popupDesc" @click="show = true"></nut-cell>
-    <nut-popup position="bottom" v-model:visible="show">
+    <nut-popup v-model:visible="show" position="bottom">
       <nut-picker
         v-model="popupValue"
         :columns="columns"
diff --git a/src/packages/__VUE/picker/index.taro.vue b/src/packages/__VUE/picker/index.taro.vue
index 5c29958c71..62c58278bc 100644
--- a/src/packages/__VUE/picker/index.taro.vue
+++ b/src/packages/__VUE/picker/index.taro.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="nut-picker">
-    <view class="nut-picker__bar" v-if="showToolbar">
+    <view v-if="showToolbar" class="nut-picker__bar">
       <view class="nut-picker__cancel nut-picker__left nut-picker__button" @click="cancel">{{
         cancelText || translate('cancel')
       }}</view>
@@ -29,12 +29,12 @@
         :filedNames="columnFieldNames"
       >
         <view
+          v-for="(item, index) in column"
+          :key="item[columnFieldNames.value] ?? index"
           class="nut-picker-roller-item-tarotile"
           :style="{
             lineHeight: pxCheck(optionHeight)
           }"
-          v-for="(item, index) in column"
-          :key="item[columnFieldNames.value] ?? index"
         >
           {{ item[columnFieldNames.text] }}
         </view>
@@ -42,8 +42,8 @@
     </picker-view>
 
     <!-- Taro 下转换成 H5 -->
-    <view class="nut-picker__column" :style="columnStyle" v-if="ENV == ENV_TYPE.WEB">
-      <view class="nut-picker__columnitem" v-for="(column, columnIndex) in columnsList" :key="columnIndex">
+    <view v-if="ENV == ENV_TYPE.WEB" class="nut-picker__column" :style="columnStyle">
+      <view v-for="(column, columnIndex) in columnsList" :key="columnIndex" class="nut-picker__columnitem">
         <nut-picker-column
           :ref="swipeRef"
           :column="column"
diff --git a/src/packages/__VUE/picker/index.vue b/src/packages/__VUE/picker/index.vue
index 49278647ef..133383f522 100644
--- a/src/packages/__VUE/picker/index.vue
+++ b/src/packages/__VUE/picker/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="nut-picker">
-    <view class="nut-picker__bar" v-if="showToolbar">
+    <view v-if="showToolbar" class="nut-picker__bar">
       <view class="nut-picker__left" @click="cancel">{{ cancelText || translate('cancel') }}</view>
       <view class="nut-picker__title"> {{ title }}</view>
       <view class="nut-picker__right" @click="confirmHandler">{{ okText || translate('confirm') }}</view>
@@ -9,7 +9,7 @@
     <slot name="top"></slot>
 
     <view class="nut-picker__column" :style="columnStyle">
-      <view class="nut-picker__columnitem" v-for="(column, columnIndex) in columnsList" :key="columnIndex">
+      <view v-for="(column, columnIndex) in columnsList" :key="columnIndex" class="nut-picker__columnitem">
         <nut-picker-column
           :ref="swipeRef"
           :column="column"
diff --git a/src/packages/__VUE/popover/demo.vue b/src/packages/__VUE/popover/demo.vue
index fe89ef1ffe..4e1e0c0f10 100644
--- a/src/packages/__VUE/popover/demo.vue
+++ b/src/packages/__VUE/popover/demo.vue
@@ -46,7 +46,7 @@
 
       <template #content>
         <div class="self-content">
-          <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
+          <div v-for="(item, index) in selfContent" :key="index" class="self-content-item">
             <Service></Service>
             <div class="self-content-desc">{{ item.desc }}</div>
           </div>
@@ -57,18 +57,18 @@
     <h2>{{ translate('title3') }}</h2>
 
     <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
-    <nut-popup position="bottom" v-model:visible="showPicker">
+    <nut-popup v-model:visible="showPicker" position="bottom">
       <nut-picker
         :columns="columns"
         title=""
-        @change="change"
         :swipe-duration="500"
+        @change="change"
         @confirm="closePicker"
         @close="closePicker"
       >
         <template #top>
           <div class="brickBox">
-            <div class="brick" id="pickerTarget"></div>
+            <div id="pickerTarget" class="brick"></div>
           </div>
         </template>
       </nut-picker>
@@ -84,7 +84,7 @@
     </nut-popover>
 
     <h2>{{ translate('contentTarget') }}</h2>
-    <nut-button type="primary" shape="square" id="popid" @click="clickCustomHandle">
+    <nut-button id="popid" type="primary" shape="square" @click="clickCustomHandle">
       {{ translate('contentTarget') }}
     </nut-button>
     <nut-popover
diff --git a/src/packages/__VUE/popover/index.taro.vue b/src/packages/__VUE/popover/index.taro.vue
index af5cb54614..9e71a1e579 100644
--- a/src/packages/__VUE/popover/index.taro.vue
+++ b/src/packages/__VUE/popover/index.taro.vue
@@ -1,17 +1,17 @@
 <template>
   <view
-    class="nut-popover-wrapper"
-    @click="openPopover"
     v-if="!targetId"
-    ref="popoverRef"
     :id="'popoverRef' + refRandomId"
+    ref="popoverRef"
+    class="nut-popover-wrapper"
+    @click="openPopover"
     ><slot name="reference"></slot
   ></view>
-  <view :class="['nut-popover', `nut-popover--${theme}`, `${customClass}`]" :style="popoverstyles" ref="popoverbox">
+  <view ref="popoverbox" :class="['nut-popover', `nut-popover--${theme}`, `${customClass}`]" :style="popoverstyles">
     <nut-popup
+      v-model:visible="showPopup"
       :popClass="`nut-popover-content nut-popover-content--${location}`"
       :style="customStyle"
-      v-model:visible="showPopup"
       position=""
       transition="nut-popover"
       :overlay="overlay"
@@ -20,8 +20,8 @@
       :overlayClass="overlayClass"
       :closeOnClickOverlay="closeOnClickOverlay"
     >
-      <view ref="popoverContentRef" :id="'popoverContentRef' + refRandomId" class="nut-popover-content-group">
-        <view :class="popoverArrow" v-if="showArrow" :style="popoverArrowStyle"> </view>
+      <view :id="'popoverContentRef' + refRandomId" ref="popoverContentRef" class="nut-popover-content-group">
+        <view v-if="showArrow" :class="popoverArrow" :style="popoverArrowStyle"> </view>
         <slot name="content"></slot>
         <view
           v-for="(item, index) in list"
@@ -34,19 +34,19 @@
           ]"
           @click.stop="chooseItem(item, index)"
         >
-          <component v-if="item.icon" :is="renderIcon(item.icon)" class="nut-popover-item-img"></component>
+          <component :is="renderIcon(item.icon)" v-if="item.icon" class="nut-popover-item-img"></component>
           <view class="nut-popover-menu-item-name">{{ item.name }}</view>
         </view>
       </view>
     </nut-popup>
 
-    <view class="nut-popover-content-bg" v-if="showPopup" @touchmove="clickAway" @click="clickAway"></view>
+    <view v-if="showPopup" class="nut-popover-content-bg" @touchmove="clickAway" @click="clickAway"></view>
   </view>
   <!-- 用于计算大小 -->
   <!-- TODO -->
   <view :class="`nut-popover-content nut-popover-content-copy`">
-    <view ref="popoverContentRefCopy" :id="'popoverContentRefCopy' + refRandomId" class="nut-popover-content-group">
-      <view :class="popoverArrow" v-if="showArrow" :style="popoverArrowStyle"> </view>
+    <view :id="'popoverContentRefCopy' + refRandomId" ref="popoverContentRefCopy" class="nut-popover-content-group">
+      <view v-if="showArrow" :class="popoverArrow" :style="popoverArrowStyle"> </view>
       <slot name="content"></slot>
       <view
         v-for="(item, index) in list"
@@ -58,7 +58,7 @@
           'nut-popover-menu-taroitem'
         ]"
       >
-        <component v-if="item.icon" :is="renderIcon(item.icon)" class="nut-popover-item-img"></component>
+        <component :is="renderIcon(item.icon)" v-if="item.icon" class="nut-popover-item-img"></component>
         <view class="nut-popover-menu-item-name">{{ item.name }}</view>
       </view>
     </view>
diff --git a/src/packages/__VUE/popover/index.vue b/src/packages/__VUE/popover/index.vue
index 44396d4115..96f9d62add 100644
--- a/src/packages/__VUE/popover/index.vue
+++ b/src/packages/__VUE/popover/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="nut-popover-wrapper" @click="openPopover" ref="popoverRef" v-if="!targetId"
+  <div v-if="!targetId" ref="popoverRef" class="nut-popover-wrapper" @click="openPopover"
     ><slot name="reference"></slot
   ></div>
   <view :class="['nut-popover', `nut-popover--${theme}`, `${customClass}`]" :style="getRootPosition">
     <nut-popup
+      v-model:visible="showPopup"
       :popClass="`nut-popover-content nut-popover-content--${location}`"
       :style="customStyle"
-      v-model:visible="showPopup"
       position=""
       transition="nut-popover"
       :overlay="overlay"
@@ -16,7 +16,7 @@
       :closeOnClickOverlay="closeOnClickOverlay"
     >
       <view ref="popoverContentRef" class="nut-popover-content-group">
-        <view :class="popoverArrow" v-if="showArrow" :style="popoverArrowStyle"> </view>
+        <view v-if="showArrow" :class="popoverArrow" :style="popoverArrowStyle"> </view>
         <slot name="content"></slot>
         <view
           v-for="(item, index) in list"
@@ -24,7 +24,7 @@
           :class="[item.className, item.disabled && 'nut-popover-menu-disabled', 'nut-popover-menu-item']"
           @click.stop="chooseItem(item, index)"
         >
-          <component v-if="item.icon" :is="renderIcon(item.icon)" class="nut-popover-item-img"></component>
+          <component :is="renderIcon(item.icon)" v-if="item.icon" class="nut-popover-item-img"></component>
 
           <view class="nut-popover-menu-item-name">{{ item.name }}</view>
         </view>
diff --git a/src/packages/__VUE/popup/demo.vue b/src/packages/__VUE/popup/demo.vue
index e7260cca3c..299dc0159a 100644
--- a/src/packages/__VUE/popup/demo.vue
+++ b/src/packages/__VUE/popup/demo.vue
@@ -3,43 +3,43 @@
     <div id="test"></div>
     <h2>{{ translate('basic') }}</h2>
     <nut-cell :title="translate('cell1')" is-link @click="showBasic = true"></nut-cell>
-    <nut-popup pop-class="popclass" :style="{ padding: '30px 50px' }" v-model:visible="showBasic" :z-index="100">
+    <nut-popup v-model:visible="showBasic" pop-class="popclass" :style="{ padding: '30px 50px' }" :z-index="100">
       {{ translate('text') }}
     </nut-popup>
 
     <h2>{{ translate('position') }}</h2>
     <nut-cell :title="translate('cell2')" is-link @click="showTop = true"></nut-cell>
-    <nut-popup position="top" :style="{ height: '20%' }" v-model:visible="showTop"></nut-popup>
+    <nut-popup v-model:visible="showTop" position="top" :style="{ height: '20%' }"></nut-popup>
 
     <nut-cell :title="translate('cell3')" is-link @click="showBottom = true"></nut-cell>
-    <nut-popup position="bottom" :style="{ height: '20%' }" v-model:visible="showBottom"></nut-popup>
+    <nut-popup v-model:visible="showBottom" position="bottom" :style="{ height: '20%' }"></nut-popup>
 
     <nut-cell :title="translate('cell4')" is-link @click="showLeft = true"></nut-cell>
-    <nut-popup position="left" :style="{ width: '20%', height: '100%' }" v-model:visible="showLeft"></nut-popup>
+    <nut-popup v-model:visible="showLeft" position="left" :style="{ width: '20%', height: '100%' }"></nut-popup>
 
     <nut-cell :title="translate('cell5')" is-link @click="showRight = true"></nut-cell>
-    <nut-popup position="right" :style="{ width: '20%', height: '100%' }" v-model:visible="showRight"></nut-popup>
+    <nut-popup v-model:visible="showRight" position="right" :style="{ width: '20%', height: '100%' }"></nut-popup>
 
     <h2>{{ translate('close') }}</h2>
     <nut-cell :title="translate('close')" is-link @click="showIcon = true"></nut-cell>
-    <nut-popup position="bottom" closeable :style="{ height: '20%' }" v-model:visible="showIcon"></nut-popup>
+    <nut-popup v-model:visible="showIcon" position="bottom" closeable :style="{ height: '20%' }"></nut-popup>
 
     <nut-cell :title="translate('iposition')" is-link @click="showIconPosition = true"></nut-cell>
     <nut-popup
+      v-model:visible="showIconPosition"
       position="bottom"
       closeable
       close-icon-position="top-left"
       :style="{ height: '20%' }"
-      v-model:visible="showIconPosition"
     ></nut-popup>
 
     <nut-cell :title="translate('cicon')" is-link @click="showCloseIcon = true"></nut-cell>
     <nut-popup
+      v-model:visible="showCloseIcon"
       position="bottom"
       closeable
       close-icon-position="top-left"
       :style="{ height: '20%' }"
-      v-model:visible="showCloseIcon"
     >
       <template #close-icon>
         <Heart></Heart>
@@ -48,20 +48,20 @@
 
     <h2>{{ translate('circle') }}</h2>
     <nut-cell :title="translate('circle')" is-link @click="showRound = true"></nut-cell>
-    <nut-popup position="bottom" closeable round :style="{ height: '30%' }" v-model:visible="showRound"></nut-popup>
+    <nut-popup v-model:visible="showRound" position="bottom" closeable round :style="{ height: '30%' }"></nut-popup>
 
     <h2>{{ translate('teleport') }}</h2>
     <nut-cell :title="translate('teleport')" is-link @click="showTeleport = true"></nut-cell>
-    <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" teleport-disable v-model:visible="showTeleport">
+    <nut-popup v-model:visible="showTeleport" :style="{ padding: '30px 50px' }" teleport="#app" teleport-disable>
       app
     </nut-popup>
 
     <h2>{{ translate('muti') }}</h2>
     <nut-cell :title="translate('muti')" is-link @click="showPop1 = true"></nut-cell>
-    <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop1">
+    <nut-popup v-model:visible="showPop1" :style="{ padding: '30px 50px' }">
       <div @click="showPop2 = true">{{ translate('click') }}</div>
     </nut-popup>
-    <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop2">{{ translate('text') }}</nut-popup>
+    <nut-popup v-model:visible="showPop2" :style="{ padding: '30px 50px' }">{{ translate('text') }}</nut-popup>
   </div>
 </template>
 
diff --git a/src/packages/__VUE/popup/index.taro.vue b/src/packages/__VUE/popup/index.taro.vue
index 5000993209..4074e9e69a 100644
--- a/src/packages/__VUE/popup/index.taro.vue
+++ b/src/packages/__VUE/popup/index.taro.vue
@@ -9,17 +9,17 @@
       :duration="duration"
       :overlay-class="overlayClass"
       :overlay-style="overlayStyle"
-      @click="onClickOverlay"
       v-bind="$attrs"
+      @click="onClickOverlay"
     />
     <Transition :name="transitionName" @after-enter="onOpened" @after-leave="onClosed">
       <view v-show="visible" :class="classes" :style="popStyle" @click="onClick">
         <slot v-if="showSlot"></slot>
         <view
           v-if="closed"
-          @click="onClickCloseIcon"
           class="nut-popup__close-icon"
           :class="'nut-popup__close-icon--' + closeIconPosition"
+          @click="onClickCloseIcon"
         >
           <slot name="close-icon">
             <Close height="12px"></Close>
diff --git a/src/packages/__VUE/popup/index.vue b/src/packages/__VUE/popup/index.vue
index dfed270d38..1a0cde0699 100644
--- a/src/packages/__VUE/popup/index.vue
+++ b/src/packages/__VUE/popup/index.vue
@@ -9,17 +9,17 @@
       :duration="duration"
       :overlay-class="overlayClass"
       :overlay-style="overlayStyle"
-      @click="onClickOverlay"
       v-bind="$attrs"
+      @click="onClickOverlay"
     />
     <Transition :name="transitionName" @after-enter="onOpened" @after-leave="onClosed">
       <view v-show="visible" :class="classes" :style="popStyle" @click="onClick">
         <slot v-if="showSlot"></slot>
         <view
           v-if="closed"
-          @click="onClickCloseIcon"
           class="nut-popup__close-icon"
           :class="'nut-popup__close-icon--' + closeIconPosition"
+          @click="onClickCloseIcon"
         >
           <slot name="close-icon">
             <Close height="12px"></Close>
diff --git a/src/packages/__VUE/price/index.taro.vue b/src/packages/__VUE/price/index.taro.vue
index 770fca2226..209000cb0e 100644
--- a/src/packages/__VUE/price/index.taro.vue
+++ b/src/packages/__VUE/price/index.taro.vue
@@ -9,7 +9,7 @@
     <view :class="`nut-price--${size}`">
       {{ formatThousands(price) }}
     </view>
-    <view :class="`nut-price--decimal-${size}`" v-if="decimalDigits != 0">.</view>
+    <view v-if="decimalDigits != 0" :class="`nut-price--decimal-${size}`">.</view>
     <view :class="`nut-price--decimal-${size}`">
       {{ formatDecimal(price) }}
     </view>
diff --git a/src/packages/__VUE/price/index.vue b/src/packages/__VUE/price/index.vue
index 0ba47236ee..3ef85cb155 100644
--- a/src/packages/__VUE/price/index.vue
+++ b/src/packages/__VUE/price/index.vue
@@ -9,7 +9,7 @@
     <view :class="`nut-price--${size}`">
       {{ formatThousands(price) }}
     </view>
-    <view :class="`nut-price--decimal-${size}`" v-if="decimalDigits != 0">.</view>
+    <view v-if="decimalDigits != 0" :class="`nut-price--decimal-${size}`">.</view>
     <view :class="`nut-price--decimal-${size}`">
       {{ formatDecimal(price) }}
     </view>
diff --git a/src/packages/__VUE/progress/index.taro.vue b/src/packages/__VUE/progress/index.taro.vue
index 8b29ef62e6..db3668a1c1 100644
--- a/src/packages/__VUE/progress/index.taro.vue
+++ b/src/packages/__VUE/progress/index.taro.vue
@@ -7,6 +7,7 @@
     >
       <div :class="['nut-progress-inner', status === 'active' ? 'nut-active' : '']" :style="bgStyle"></div>
       <div
+        v-if="showText && textInside && !slotDefault"
         class="nut-progress-text nut-progress-insidetext"
         :style="{
           lineHeight: height,
@@ -14,11 +15,11 @@
           transform: `translate(-${+percentage}%,-50%)`,
           background: textBackground || strokeColor
         }"
-        v-if="showText && textInside && !slotDefault"
       >
         <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
       </div>
       <div
+        v-if="showText && textInside && slotDefault"
         class="nut-progress-slot"
         :style="{
           position: `absolute`,
@@ -26,12 +27,11 @@
           left: `${percentage}%`,
           transform: `translate(-${+percentage}%,-50%)`
         }"
-        v-if="showText && textInside && slotDefault"
       >
         <slot></slot>
       </div>
     </div>
-    <div class="nut-progress-text" :style="{ lineHeight: height }" v-if="showText && !textInside">
+    <div v-if="showText && !textInside" class="nut-progress-text" :style="{ lineHeight: height }">
       <template v-if="status === 'text' || status === 'active'">
         <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
       </template>
diff --git a/src/packages/__VUE/progress/index.vue b/src/packages/__VUE/progress/index.vue
index de99719445..759e49c79b 100644
--- a/src/packages/__VUE/progress/index.vue
+++ b/src/packages/__VUE/progress/index.vue
@@ -7,6 +7,7 @@
     >
       <div :class="['nut-progress-inner', status === 'active' ? 'nut-active' : '']" :style="bgStyle"></div>
       <div
+        v-if="showText && textInside && !slotDefault"
         class="nut-progress-text nut-progress-insidetext"
         :style="{
           lineHeight: height,
@@ -14,11 +15,11 @@
           transform: `translate(-${+percentage}%,-50%)`,
           background: textBackground || strokeColor
         }"
-        v-if="showText && textInside && !slotDefault"
       >
         <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
       </div>
       <div
+        v-if="showText && textInside && slotDefault"
         class="nut-progress-slot"
         :style="{
           position: `absolute`,
@@ -26,12 +27,11 @@
           left: `${percentage}%`,
           transform: `translate(-${+percentage}%,-50%)`
         }"
-        v-if="showText && textInside && slotDefault"
       >
         <slot></slot>
       </div>
     </div>
-    <div class="nut-progress-text" :style="{ lineHeight: height }" v-if="showText && !textInside">
+    <div v-if="showText && !textInside" class="nut-progress-text" :style="{ lineHeight: height }">
       <template v-if="status === 'text' || status === 'active'">
         <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
       </template>
diff --git a/src/packages/__VUE/pullrefresh/demo.vue b/src/packages/__VUE/pullrefresh/demo.vue
index 8545134c4d..6bff4f10fb 100644
--- a/src/packages/__VUE/pullrefresh/demo.vue
+++ b/src/packages/__VUE/pullrefresh/demo.vue
@@ -23,7 +23,7 @@
       <nut-tab-pane :title="translate('listenerTxt')">
         <div class="parentpage">
           <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
-            <div class="pull-letter" v-for="item in refreshList2" :key="item">
+            <div v-for="item in refreshList2" :key="item" class="pull-letter">
               <div>{{ item }}</div>
             </div>
           </nut-pull-refresh>
diff --git a/src/packages/__VUE/pullrefresh/index.vue b/src/packages/__VUE/pullrefresh/index.vue
index 4d84a6da54..b217ca2166 100644
--- a/src/packages/__VUE/pullrefresh/index.vue
+++ b/src/packages/__VUE/pullrefresh/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div :class="classes" ref="scroller" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
+  <div ref="scroller" :class="classes" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
     <div class="nut-pull-refresh-container" :style="getStyle">
       <div class="nut-pull-refresh-container-topbox" :style="getHeightStyle">
         <Loading
-          class="nut-icon-loading nut-pull-refresh-container-topbox-icon"
           v-if="status == 'loading' && !slots.loading"
+          class="nut-icon-loading nut-pull-refresh-container-topbox-icon"
         ></Loading>
 
         <div class="nut-pull-refresh-container-topbox-text">{{ getPullStatus }}</div>
diff --git a/src/packages/__VUE/range/demo.vue b/src/packages/__VUE/range/demo.vue
index 9db718ee4b..6a9696d3f6 100644
--- a/src/packages/__VUE/range/demo.vue
+++ b/src/packages/__VUE/range/demo.vue
@@ -6,7 +6,7 @@
     </nut-cell>
     <h2>{{ translate('title1') }}</h2>
     <nut-cell class="cell">
-      <nut-range range v-model="value2" @change="onChange"></nut-range>
+      <nut-range v-model="value2" range @change="onChange"></nut-range>
     </nut-cell>
     <h2>{{ translate('title2') }}</h2>
     <nut-cell class="cell">
@@ -18,24 +18,24 @@
     </nut-cell>
     <h2>{{ translate('title4') }}</h2>
     <nut-cell class="cell">
-      <nut-range hidden-range v-model="value5" @change="onChange"></nut-range>
+      <nut-range v-model="value5" hidden-range @change="onChange"></nut-range>
     </nut-cell>
     <h2>{{ translate('title5') }}</h2>
     <nut-cell class="cell">
-      <nut-range hidden-tag v-model="value6" @change="onChange"></nut-range>
+      <nut-range v-model="value6" hidden-tag @change="onChange"></nut-range>
     </nut-cell>
     <h2>{{ translate('title6') }}</h2>
     <nut-cell class="cell">
-      <nut-range disabled v-model="value7"></nut-range>
+      <nut-range v-model="value7" disabled></nut-range>
     </nut-cell>
     <h2>{{ translate('title7') }}</h2>
     <nut-cell class="cell">
       <nut-range
         v-model="value8"
-        @change="onChange"
         inactive-color="rgba(163,184,255,1)"
         button-color="rgba(52,96,250,1)"
         active-color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+        @change="onChange"
       ></nut-range>
     </nut-cell>
     <h2>{{ translate('title8') }}</h2>
@@ -50,32 +50,32 @@
     <h2>{{ translate('title9') }}</h2>
     <nut-cell class="vertical_div">
       <view class="div">
-        <nut-range v-model="value10" @change="onChange" :vertical="true"></nut-range>
+        <nut-range v-model="value10" :vertical="true" @change="onChange"></nut-range>
       </view>
       <view class="div">
-        <nut-range range v-model="value11" @change="onChange" :vertical="true"></nut-range>
+        <nut-range v-model="value11" range :vertical="true" @change="onChange"></nut-range>
       </view>
     </nut-cell>
     <h2>{{ translate('title10') }}</h2>
     <nut-cell class="cell">
-      <nut-range v-model="value12" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+      <nut-range v-model="value12" :marks="marks" :hiddenRange="true" @change="onChange"></nut-range>
     </nut-cell>
     <nut-cell class="cell">
-      <nut-range range v-model="value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+      <nut-range v-model="value13" range :marks="marks" :hiddenRange="true" @change="onChange"></nut-range>
     </nut-cell>
 
     <nut-cell class="vertical_div">
       <view class="div">
-        <nut-range v-model="value14" @change="onChange" :vertical="true" :marks="marks" :hiddenRange="true"></nut-range>
+        <nut-range v-model="value14" :vertical="true" :marks="marks" :hiddenRange="true" @change="onChange"></nut-range>
       </view>
       <view class="div">
         <nut-range
-          range
           v-model="value15"
-          @change="onChange"
+          range
           :vertical="true"
           :marks="marks"
           :hiddenRange="true"
+          @change="onChange"
         ></nut-range>
       </view>
     </nut-cell>
diff --git a/src/packages/__VUE/range/index.taro.vue b/src/packages/__VUE/range/index.taro.vue
index f58fa8044b..f673c52e11 100644
--- a/src/packages/__VUE/range/index.taro.vue
+++ b/src/packages/__VUE/range/index.taro.vue
@@ -1,7 +1,7 @@
 <template>
   <view :class="containerClasses">
-    <view class="nut-range-min" v-if="!hiddenRange">{{ +min }}</view>
-    <view ref="root" :id="'root-' + refRandomId" :style="wrapperStyle" :class="classes" @click.stop="onClick">
+    <view v-if="!hiddenRange" class="nut-range-min">{{ +min }}</view>
+    <view :id="'root-' + refRandomId" ref="root" :style="wrapperStyle" :class="classes" @click.stop="onClick">
       <view class="nut-range-mark">
         <template v-if="marksList.length > 0">
           <span v-for="marks in marksList" :key="marks" :class="markClassName(marks)" :style="marksStyle(marks)">
@@ -41,8 +41,8 @@
             @click="(e) => e.stopPropagation()"
           >
             <slot v-if="$slots.button" name="button"></slot>
-            <view class="nut-range-button" v-else :style="buttonStyle">
-              <view class="number" v-if="!hiddenTag">{{ curValue(index) }}</view>
+            <view v-else class="nut-range-button" :style="buttonStyle">
+              <view v-if="!hiddenTag" class="number">{{ curValue(index) }}</view>
             </view>
           </view>
         </template>
@@ -67,14 +67,14 @@
             @click="(e) => e.stopPropagation()"
           >
             <slot v-if="$slots.button" name="button"></slot>
-            <view class="nut-range-button" v-else :style="buttonStyle">
-              <view class="number" v-if="!hiddenTag">{{ curValue() }}</view>
+            <view v-else class="nut-range-button" :style="buttonStyle">
+              <view v-if="!hiddenTag" class="number">{{ curValue() }}</view>
             </view>
           </view>
         </template>
       </view>
     </view>
-    <view class="nut-range-max" v-if="!hiddenRange">{{ +max }}</view>
+    <view v-if="!hiddenRange" class="nut-range-max">{{ +max }}</view>
   </view>
 </template>
 <script lang="ts">
diff --git a/src/packages/__VUE/range/index.vue b/src/packages/__VUE/range/index.vue
index 32727d8606..f6190c67d9 100644
--- a/src/packages/__VUE/range/index.vue
+++ b/src/packages/__VUE/range/index.vue
@@ -1,8 +1,8 @@
 <template>
   <view :class="containerClasses">
-    <view class="nut-range-min" v-if="!hiddenRange">{{ +min }}</view>
+    <view v-if="!hiddenRange" class="nut-range-min">{{ +min }}</view>
     <view ref="root" :style="wrapperStyle" :class="classes" @click.stop="onClick">
-      <view class="nut-range-mark" v-if="marksList.length > 0">
+      <view v-if="marksList.length > 0" class="nut-range-mark">
         <span v-for="marks in marksList" :key="marks" :class="markClassName(marks)" :style="marksStyle(marks)">
           {{ marks }}
           <span class="nut-range-tick" :style="tickStyle(marks)"></span>
@@ -38,8 +38,8 @@
             @click="(e) => e.stopPropagation()"
           >
             <slot v-if="$slots.button" name="button"></slot>
-            <view class="nut-range-button" v-else :style="buttonStyle">
-              <view class="number" v-if="!hiddenTag">{{ curValue(index) }}</view>
+            <view v-else class="nut-range-button" :style="buttonStyle">
+              <view v-if="!hiddenTag" class="number">{{ curValue(index) }}</view>
             </view>
           </view>
         </template>
@@ -63,14 +63,14 @@
             @click="(e) => e.stopPropagation()"
           >
             <slot v-if="$slots.button" name="button"></slot>
-            <view class="nut-range-button" v-else :style="buttonStyle">
-              <view class="number" v-if="!hiddenTag">{{ curValue() }}</view>
+            <view v-else class="nut-range-button" :style="buttonStyle">
+              <view v-if="!hiddenTag" class="number">{{ curValue() }}</view>
             </view>
           </view>
         </template>
       </view>
     </view>
-    <view class="nut-range-max" v-if="!hiddenRange">{{ +max }}</view>
+    <view v-if="!hiddenRange" class="nut-range-max">{{ +max }}</view>
   </view>
 </template>
 <script lang="ts">
diff --git a/src/packages/__VUE/rate/demo.vue b/src/packages/__VUE/rate/demo.vue
index 9d57cee201..35d4ebd009 100644
--- a/src/packages/__VUE/rate/demo.vue
+++ b/src/packages/__VUE/rate/demo.vue
@@ -6,19 +6,19 @@
     </nut-cell>
 
     <h2>{{ translate('title1') }}</h2>
-    <nut-cell class="cell"><nut-rate allow-half v-model="state.val1"></nut-rate></nut-cell>
+    <nut-cell class="cell"><nut-rate v-model="state.val1" allow-half></nut-rate></nut-cell>
 
     <h2>{{ translate('title2') }}</h2>
-    <nut-cell class="cell"><nut-rate :custom-icon="HeartFill" v-model="state.val2"></nut-rate></nut-cell>
+    <nut-cell class="cell"><nut-rate v-model="state.val2" :custom-icon="HeartFill"></nut-rate></nut-cell>
 
     <h2>{{ translate('title3') }}</h2>
-    <nut-cell class="cell"><nut-rate count="10" v-model="state.val3"></nut-rate></nut-cell>
+    <nut-cell class="cell"><nut-rate v-model="state.val3" count="10"></nut-rate></nut-cell>
 
     <h2>{{ translate('title4') }}</h2>
-    <nut-cell class="cell"><nut-rate active-color="#FFC800" v-model="state.val4"></nut-rate></nut-cell>
+    <nut-cell class="cell"><nut-rate v-model="state.val4" active-color="#FFC800"></nut-rate></nut-cell>
 
     <h2>{{ translate('title5') }}</h2>
-    <nut-cell class="cell"><nut-rate disabled v-model="state.val5"></nut-rate></nut-cell>
+    <nut-cell class="cell"><nut-rate v-model="state.val5" disabled></nut-rate></nut-cell>
 
     <h2>{{ translate('title6') }}</h2>
     <nut-cell class="cell"><nut-rate v-model="state.val6" readonly></nut-rate></nut-cell>
diff --git a/src/packages/__VUE/searchbar/index.taro.vue b/src/packages/__VUE/searchbar/index.taro.vue
index 02e4708de3..acfc22b424 100644
--- a/src/packages/__VUE/searchbar/index.taro.vue
+++ b/src/packages/__VUE/searchbar/index.taro.vue
@@ -19,21 +19,21 @@
             :confirm-type="confirmType"
             :disabled="disabled"
             :readonly="readonly"
+            :style="styleSearchbar"
             @click="clickInput"
             @input="valueChange"
             @focus="valueFocus"
             @blur="valueBlur"
             @confirm="handleSubmit"
-            :style="styleSearchbar"
           />
         </form>
       </view>
       <view :class="['nut-searchbar__input-inner-icon', $slots.rightin && 'nut-searchbar__input-inner-icon-absolute']">
         <view
-          @click="handleClear"
-          class="nut-searchbar__search-icon nut-searchbar__input-clear"
           v-if="clearable"
           v-show="String(modelValue).length > 0"
+          class="nut-searchbar__search-icon nut-searchbar__input-clear"
+          @click="handleClear"
         >
           <template v-if="$slots['clear-icon']">
             <slot name="clear-icon"></slot>
diff --git a/src/packages/__VUE/searchbar/index.vue b/src/packages/__VUE/searchbar/index.vue
index 1685fe8842..49e133a801 100644
--- a/src/packages/__VUE/searchbar/index.vue
+++ b/src/packages/__VUE/searchbar/index.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="nut-searchbar" :style="searchbarStyle">
-    <span class="nut-searchbar__search-label" v-if="label">{{ label }}</span>
+    <span v-if="label" class="nut-searchbar__search-label">{{ label }}</span>
     <view v-if="$slots.leftout" class="nut-searchbar__search-icon nut-searchbar__left-search-icon">
       <slot name="leftout"></slot>
     </view>
@@ -23,20 +23,20 @@
             :value="modelValue"
             :disabled="disabled"
             :readonly="readonly"
+            :style="styleSearchbar"
             @click="clickInput"
             @input="valueChange"
             @focus="valueFocus"
             @blur="valueBlur"
-            :style="styleSearchbar"
           />
         </form>
       </view>
       <view :class="['nut-searchbar__input-inner-icon', $slots.rightin && 'nut-searchbar__input-inner-icon-absolute']">
         <view
-          @click="handleClear"
-          class="nut-searchbar__search-icon nut-searchbar__input-clear"
           v-if="clearable"
           v-show="String(modelValue).length > 0"
+          class="nut-searchbar__search-icon nut-searchbar__input-clear"
+          @click="handleClear"
         >
           <template v-if="$slots['clear-icon']">
             <slot name="clear-icon"></slot>
diff --git a/src/packages/__VUE/shortpassword/demo.vue b/src/packages/__VUE/shortpassword/demo.vue
index c0c4ad73c0..83ede6a8da 100644
--- a/src/packages/__VUE/shortpassword/demo.vue
+++ b/src/packages/__VUE/shortpassword/demo.vue
@@ -22,8 +22,8 @@
     <nut-short-password
       v-model="state.value2"
       v-model:visible="state.visible2"
-      @focus="state.showKeyboard2 = true"
       :length="state.length"
+      @focus="state.showKeyboard2 = true"
       @complete="methods.complete"
     >
     </nut-short-password>
@@ -62,8 +62,8 @@
     <nut-short-password
       v-model="state.value4"
       v-model:visible="state.visible4"
-      @focus="state.showKeyboard4 = true"
       :error-msg="state.errorMsg"
+      @focus="state.showKeyboard4 = true"
       @complete="methods.complete"
       @tips="methods.onTips"
     >
diff --git a/src/packages/__VUE/shortpassword/index.taro.vue b/src/packages/__VUE/shortpassword/index.taro.vue
index 9dfc8702eb..8f60f6143c 100644
--- a/src/packages/__VUE/shortpassword/index.taro.vue
+++ b/src/packages/__VUE/shortpassword/index.taro.vue
@@ -1,30 +1,30 @@
 <template>
   <view class="nut-short-password">
     <nut-popup
+      v-model:visible="show"
       :style="{
         padding: '30px 24px 20px 24px',
         borderRadius: '12px',
         textAlign: 'center',
         top: '45%'
       }"
-      v-model:visible="show"
       :closeable="true"
-      @click-close-icon="close"
       :close-on-click-overlay="closeOnClickOverlay"
+      @click-close-icon="close"
       @click-overlay="close"
     >
       <view class="nut-short-password-title">{{ title || translate('title') }}</view>
       <view class="nut-short-password-subtitle">{{ desc || translate('desc') }}</view>
       <view class="nut-short-password-wrapper">
         <view class="nut-short-password__list" @touchstart="focus">
-          <view class="nut-short-password__item" v-for="(sublen, index) in new Array(comLen)" :key="index">
-            <view class="nut-short-password__item-icon" v-if="String(realInput).length > index"></view>
+          <view v-for="(sublen, index) in new Array(comLen)" :key="index" class="nut-short-password__item">
+            <view v-if="String(realInput).length > index" class="nut-short-password__item-icon"></view>
           </view>
         </view>
       </view>
       <view class="nut-short-password__message">
         <view class="nut-short-password--error">{{ errorMsg }}</view>
-        <view class="nut-short-password--forget" @click="onTips" v-if="tips || translate('tips')">
+        <view v-if="tips || translate('tips')" class="nut-short-password--forget" @click="onTips">
           <tips class="icon" size="11px"></tips>
           <view>{{ tips || translate('tips') }}</view>
         </view>
diff --git a/src/packages/__VUE/shortpassword/index.vue b/src/packages/__VUE/shortpassword/index.vue
index df1aa12531..f6c43bc53a 100644
--- a/src/packages/__VUE/shortpassword/index.vue
+++ b/src/packages/__VUE/shortpassword/index.vue
@@ -1,31 +1,31 @@
 <template>
   <view>
     <nut-popup
+      v-model:visible="show"
       :style="{
         padding: '30px 24px 20px 24px',
         borderRadius: '12px',
         textAlign: 'center',
         top: '45%'
       }"
-      v-model:visible="show"
       :closeable="true"
-      @click-close-icon="close"
       :close-on-click-overlay="closeOnClickOverlay"
-      @click-overlay="close"
       :teleportDisable="false"
+      @click-close-icon="close"
+      @click-overlay="close"
     >
       <view class="nut-short-password-title">{{ title || translate('title') }}</view>
       <view class="nut-short-password-subtitle">{{ desc || translate('desc') }}</view>
       <div class="nut-short-password-wrapper">
         <view class="nut-short-password__list" @touchstart="onTouchStart">
-          <view class="nut-short-password__item" v-for="(sublen, index) in new Array(comLen)" :key="index">
-            <view class="nut-short-password__item-icon" v-if="String(realInput).length > index"></view>
+          <view v-for="(sublen, index) in new Array(comLen)" :key="index" class="nut-short-password__item">
+            <view v-if="String(realInput).length > index" class="nut-short-password__item-icon"></view>
           </view>
         </view>
       </div>
       <view class="nut-short-password__message">
         <view class="nut-short-password--error">{{ errorMsg }}</view>
-        <view class="nut-short-password--forget" v-if="tips || translate('tips')">
+        <view v-if="tips || translate('tips')" class="nut-short-password--forget">
           <tips class="icon" width="11px" height="11px"></tips>
           <view @click="onTips">{{ tips || translate('tips') }}</view>
         </view>
diff --git a/src/packages/__VUE/sidenavbar/demo.vue b/src/packages/__VUE/sidenavbar/demo.vue
index a4c59e35c4..2defaf3a04 100644
--- a/src/packages/__VUE/sidenavbar/demo.vue
+++ b/src/packages/__VUE/sidenavbar/demo.vue
@@ -6,7 +6,7 @@
         ><label>{{ translate('right') }}</label></span
       >
     </nut-cell>
-    <nut-popup position="right" v-model:visible="show1" :style="{ width, height }">
+    <nut-popup v-model:visible="show1" position="right" :style="{ width, height }">
       <nut-side-navbar>
         <nut-sub-side-navbar :title="translate('title1')" ikey="6">
           <nut-sub-side-navbar :title="translate('title2')" ikey="9">
@@ -25,7 +25,7 @@
         ><label>{{ translate('left') }}</label></span
       >
     </nut-cell>
-    <nut-popup position="left" v-model:visible="show2" :style="{ width, height }">
+    <nut-popup v-model:visible="show2" position="left" :style="{ width, height }">
       <nut-side-navbar>
         <nut-sub-side-navbar :title="translate('title7')" ikey="3" :open="false">
           <nut-side-navbar-item ikey="4" :title="translate('title8')"></nut-side-navbar-item>
@@ -44,7 +44,7 @@
           ><label>{{ translate('show') }}</label></span
         >
       </nut-cell>
-      <nut-popup position="right" v-model:visible="show3" :style="{ width, height }">
+      <nut-popup v-model:visible="show3" position="right" :style="{ width, height }">
         <nut-side-navbar :show="show3">
           <nut-side-navbar-item
             ikey="1"
diff --git a/src/packages/__VUE/sidenavbar/index.taro.vue b/src/packages/__VUE/sidenavbar/index.taro.vue
index 7797d1e225..475d3feb8e 100644
--- a/src/packages/__VUE/sidenavbar/index.taro.vue
+++ b/src/packages/__VUE/sidenavbar/index.taro.vue
@@ -1,7 +1,7 @@
 <template>
   <view :class="classes">
     <view class="nut-side-navbar__content">
-      <view class="nut-side-navbar__content__list" ref="list">
+      <view ref="list" class="nut-side-navbar__content__list">
         <slot></slot>
       </view>
     </view>
diff --git a/src/packages/__VUE/sidenavbar/index.vue b/src/packages/__VUE/sidenavbar/index.vue
index 8253ba2be3..840135bee9 100644
--- a/src/packages/__VUE/sidenavbar/index.vue
+++ b/src/packages/__VUE/sidenavbar/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view :class="classes">
     <view class="nut-side-navbar__content">
-      <view class="nut-side-navbar__content__list" ref="list">
+      <view ref="list" class="nut-side-navbar__content__list">
         <slot></slot>
       </view>
     </view>
diff --git a/src/packages/__VUE/sidenavbaritem/index.taro.vue b/src/packages/__VUE/sidenavbaritem/index.taro.vue
index 4fbf03f4fd..c2072ad88e 100644
--- a/src/packages/__VUE/sidenavbaritem/index.taro.vue
+++ b/src/packages/__VUE/sidenavbaritem/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" @click.stop="handleClick" :ikey="ikey">
+  <view :class="classes" :ikey="ikey" @click.stop="handleClick">
     <span class="nut-side-navbar-item__title">
       {{ title }}
     </span>
diff --git a/src/packages/__VUE/sidenavbaritem/index.vue b/src/packages/__VUE/sidenavbaritem/index.vue
index 4fbf03f4fd..c2072ad88e 100644
--- a/src/packages/__VUE/sidenavbaritem/index.vue
+++ b/src/packages/__VUE/sidenavbaritem/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" @click.stop="handleClick" :ikey="ikey">
+  <view :class="classes" :ikey="ikey" @click.stop="handleClick">
     <span class="nut-side-navbar-item__title">
       {{ title }}
     </span>
diff --git a/src/packages/__VUE/signature/demo.vue b/src/packages/__VUE/signature/demo.vue
index 6ecaa50bd2..8aea967f6d 100644
--- a/src/packages/__VUE/signature/demo.vue
+++ b/src/packages/__VUE/signature/demo.vue
@@ -2,19 +2,19 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <div>
-      <nut-signature ref="demo" @confirm="confirm" @clear="clear" custom-class="test" @start="start"></nut-signature>
-      <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
+      <nut-signature ref="demo" custom-class="test" @confirm="confirm" @clear="clear" @start="start"></nut-signature>
+      <img v-if="demoSignUrl" :src="demoSignUrl" class="demoSignUrl" />
     </div>
     <h2>{{ translate('title') }}</h2>
     <div>
       <nut-signature
-        @confirm="confirm2"
-        @clear="clear2"
         :lineWidth="lineWidth"
         :strokeStyle="strokeStyle"
+        @confirm="confirm2"
+        @clear="clear2"
         @end="end"
       ></nut-signature>
-      <img :src="demoSignUrl2" class="demoSignUrl" v-if="demoSignUrl2" />
+      <img v-if="demoSignUrl2" :src="demoSignUrl2" class="demoSignUrl" />
     </div>
   </div>
 </template>
diff --git a/src/packages/__VUE/signature/index.taro.vue b/src/packages/__VUE/signature/index.taro.vue
index a3afb5aa26..8573b64297 100644
--- a/src/packages/__VUE/signature/index.taro.vue
+++ b/src/packages/__VUE/signature/index.taro.vue
@@ -2,9 +2,9 @@
   <view :class="classes">
     <div :class="['nut-signature-inner', 'spcanvas_WEAPP']">
       <canvas
+        :id="canvasSetId"
         ref="spcanvas"
         class="spcanvas"
-        :id="canvasSetId"
         :canvasId="canvasSetId"
         type="2d"
         disable-scroll="true"
diff --git a/src/packages/__VUE/signature/index.vue b/src/packages/__VUE/signature/index.vue
index 89be7ed8cf..27aac8b3e7 100644
--- a/src/packages/__VUE/signature/index.vue
+++ b/src/packages/__VUE/signature/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div :class="classes">
-    <div class="nut-signature-inner" ref="wrap">
-      <canvas ref="canvas" :height="canvasHeight" :width="canvasWidth" v-show="isCanvasSupported()"></canvas>
-      <p class="nut-signature-unsopport" v-if="!isCanvasSupported()">{{ unSupportTpl || translate('unSupportTpl') }}</p>
+    <div ref="wrap" class="nut-signature-inner">
+      <canvas v-show="isCanvasSupported()" ref="canvas" :height="canvasHeight" :width="canvasWidth"></canvas>
+      <p v-if="!isCanvasSupported()" class="nut-signature-unsopport">{{ unSupportTpl || translate('unSupportTpl') }}</p>
     </div>
 
     <nut-button class="nut-signature-btn" type="default" @click="clear()">{{ translate('reSign') }}</nut-button>
diff --git a/src/packages/__VUE/skeleton/index.taro.vue b/src/packages/__VUE/skeleton/index.taro.vue
index 6ef0b53bbb..999b372729 100644
--- a/src/packages/__VUE/skeleton/index.taro.vue
+++ b/src/packages/__VUE/skeleton/index.taro.vue
@@ -3,7 +3,7 @@
     <slot></slot>
   </view>
   <view v-else class="nut-skeleton">
-    <view class="nut-skeleton-animation" v-if="animated"></view>
+    <view v-if="animated" class="nut-skeleton-animation"></view>
     <view class="nut-skeleton-content">
       <nut-avatar v-if="avatar" :class="avatarClass" :shape="avatarShape" :style="getStyle()"></nut-avatar>
 
diff --git a/src/packages/__VUE/skeleton/index.vue b/src/packages/__VUE/skeleton/index.vue
index 5e4822f4c3..7975eea7cc 100644
--- a/src/packages/__VUE/skeleton/index.vue
+++ b/src/packages/__VUE/skeleton/index.vue
@@ -3,7 +3,7 @@
     <slot></slot>
   </view>
   <view v-else class="nut-skeleton">
-    <view class="nut-skeleton-animation" v-if="animated"></view>
+    <view v-if="animated" class="nut-skeleton-animation"></view>
     <view class="nut-skeleton-content">
       <nut-avatar v-if="avatar" :class="avatarClass" :shape="avatarShape" :style="getStyle()"></nut-avatar>
 
diff --git a/src/packages/__VUE/sku/components/SkuHeader.taro.vue b/src/packages/__VUE/sku/components/SkuHeader.taro.vue
index 8e3522b0be..0b40f77952 100644
--- a/src/packages/__VUE/sku/components/SkuHeader.taro.vue
+++ b/src/packages/__VUE/sku/components/SkuHeader.taro.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="nut-sku-header">
-    <image class="nut-sku-header-img" :src="goods.imagePath" v-if="ENV != ENV_TYPE.WEB" />
-    <img class="nut-sku-header-img" :src="goods.imagePath" v-else />
+    <image v-if="ENV != ENV_TYPE.WEB" class="nut-sku-header-img" :src="goods.imagePath" />
+    <img v-else class="nut-sku-header-img" :src="goods.imagePath" />
     <view class="nut-sku-header-right">
       <template v-if="getSlots('sku-header-price')">
         <slot name="sku-header-price"></slot>
@@ -11,7 +11,7 @@
       <template v-if="getSlots('sku-header-extra')">
         <slot name="sku-header-extra"></slot>
       </template>
-      <view class="nut-sku-header-right-extra" v-if="goods.skuId && !getSlots('sku-header-extra')"
+      <view v-if="goods.skuId && !getSlots('sku-header-extra')" class="nut-sku-header-right-extra"
         >{{ translate('skuId') }}&nbsp;:&nbsp;{{ goods.skuId }}</view
       >
     </view>
diff --git a/src/packages/__VUE/sku/components/SkuHeader.vue b/src/packages/__VUE/sku/components/SkuHeader.vue
index 385078ee58..15b4ba6a4d 100644
--- a/src/packages/__VUE/sku/components/SkuHeader.vue
+++ b/src/packages/__VUE/sku/components/SkuHeader.vue
@@ -10,7 +10,7 @@
       <template v-if="getSlots('sku-header-extra')">
         <slot name="sku-header-extra"></slot>
       </template>
-      <view class="nut-sku-header-right-extra" v-if="goods.skuId && !getSlots('sku-header-extra')"
+      <view v-if="goods.skuId && !getSlots('sku-header-extra')" class="nut-sku-header-right-extra"
         >{{ translate('skuId') }}&nbsp;:&nbsp;{{ goods.skuId }}</view
       >
     </view>
diff --git a/src/packages/__VUE/sku/components/SkuOperate.vue b/src/packages/__VUE/sku/components/SkuOperate.vue
index 61073c1f9c..d22744a1ec 100644
--- a/src/packages/__VUE/sku/components/SkuOperate.vue
+++ b/src/packages/__VUE/sku/components/SkuOperate.vue
@@ -1,14 +1,14 @@
 <template>
-  <view class="nut-sku-operate" v-if="btnOptions.length > 0">
-    <view class="nut-sku-operate-desc" v-if="btnExtraText">{{ btnExtraText }}</view>
+  <view v-if="btnOptions.length > 0" class="nut-sku-operate">
+    <view v-if="btnExtraText" class="nut-sku-operate-desc">{{ btnExtraText }}</view>
 
     <slot name="operate-btn"></slot>
 
-    <view class="nut-sku-operate-btn" v-if="!getSlots('operate-btn')">
+    <view v-if="!getSlots('operate-btn')" class="nut-sku-operate-btn">
       <view
-        :class="[`nut-sku-operate-btn-${btn}`, 'nut-sku-operate-btn-item']"
         v-for="(btn, i) in btnOptions"
         :key="i"
+        :class="[`nut-sku-operate-btn-${btn}`, 'nut-sku-operate-btn-item']"
         @click="clickBtnOperate(btn)"
         >{{ getBtnDesc(btn) }}</view
       >
diff --git a/src/packages/__VUE/sku/components/SkuSelect.vue b/src/packages/__VUE/sku/components/SkuSelect.vue
index 32cf7fde88..e0acb64d3f 100644
--- a/src/packages/__VUE/sku/components/SkuSelect.vue
+++ b/src/packages/__VUE/sku/components/SkuSelect.vue
@@ -1,14 +1,14 @@
 <template>
   <view class="nut-sku-select">
-    <view class="nut-sku-select-item" :key="item.id" v-for="(item, index) in skuInfo">
+    <view v-for="(item, index) in skuInfo" :key="item.id" class="nut-sku-select-item">
       <view class="nut-sku-select-item-title">{{ item.name }}</view>
       <view class="nut-sku-select-item-skus">
         <view
+          v-for="(itemAttr, itemAttrIndex) in item.list"
+          :key="itemAttr.name"
           class="nut-sku-select-item-skus-sku"
-          @click="changeSaleChild(itemAttr, itemAttrIndex, item, index)"
           :class="[{ active: !itemAttr.disable && itemAttr.active }, { disable: itemAttr.disable }]"
-          :key="itemAttr.name"
-          v-for="(itemAttr, itemAttrIndex) in item.list"
+          @click="changeSaleChild(itemAttr, itemAttrIndex, item, index)"
         >
           {{ itemAttr.name }}
         </view>
diff --git a/src/packages/__VUE/sku/demo.vue b/src/packages/__VUE/sku/demo.vue
index 1e5a8e0481..32ee1c481d 100644
--- a/src/packages/__VUE/sku/demo.vue
+++ b/src/packages/__VUE/sku/demo.vue
@@ -26,8 +26,8 @@
       :sku="skuData"
       :goods="goodsInfo"
       :btnExtraText="btnExtraText"
-      @change-stepper="changeStepper"
       :btnOptions="['buy', 'cart']"
+      @change-stepper="changeStepper"
       @select-sku="selectSku"
     >
       <template #sku-operate>
@@ -45,9 +45,9 @@
       :stepperMax="7"
       :stepperMin="2"
       :stepperExtraText="stepperExtraText"
+      :btnOptions="['buy', 'cart']"
       @change-stepper="changeStepper"
       @over-limit="overLimit"
-      :btnOptions="['buy', 'cart']"
       @select-sku="selectSku"
       @click-btn-operate="clickBtnOperate"
       @close="close"
@@ -95,10 +95,10 @@
       v-model:visible="showAddressPopup"
       type="exist"
       :exist-address="existAddress"
-      @close="close"
       :is-show-custom-address="false"
-      @selected="selectedAddress"
       exist-address-title="配送至"
+      @close="close"
+      @selected="selectedAddress"
     ></nut-address>
   </div>
 </template>
diff --git a/src/packages/__VUE/sku/index.taro.vue b/src/packages/__VUE/sku/index.taro.vue
index cd5e3c4d41..fd478b92b6 100644
--- a/src/packages/__VUE/sku/index.taro.vue
+++ b/src/packages/__VUE/sku/index.taro.vue
@@ -1,22 +1,22 @@
 <template>
   <nut-popup
+    v-model:visible="showPopup"
     position="bottom"
     closeable
     round
-    v-model:visible="showPopup"
+    style="height: 75%"
     @click-close-icon="closePopup('icon')"
     @click-overlay="closePopup('overlay')"
     @close="closePopup('close')"
-    style="height: 75%"
   >
     <view class="nut-sku">
       <slot name="sku-header"></slot>
-      <sku-header :goods="goods" v-if="!getSlots('sku-header')">
-        <template #sku-header-price v-if="getSlots('sku-header-price')">
+      <sku-header v-if="!getSlots('sku-header')" :goods="goods">
+        <template v-if="getSlots('sku-header-price')" #sku-header-price>
           <slot name="sku-header-price"></slot>
         </template>
 
-        <template #sku-header-extra v-if="getSlots('sku-header-extra')">
+        <template v-if="getSlots('sku-header-extra')" #sku-header-extra>
           <slot name="sku-header-extra"></slot>
         </template>
       </sku-header>
@@ -52,7 +52,7 @@
         :confirmText="confirmText || translate('confirm')"
         @click-btn-operate="clickBtnOperate"
       >
-        <template #operate-btn v-if="getSlots('sku-operate')">
+        <template v-if="getSlots('sku-operate')" #operate-btn>
           <slot name="sku-operate"></slot>
         </template>
       </sku-operate>
diff --git a/src/packages/__VUE/sku/index.vue b/src/packages/__VUE/sku/index.vue
index 8b420ffeb8..4014a270ee 100644
--- a/src/packages/__VUE/sku/index.vue
+++ b/src/packages/__VUE/sku/index.vue
@@ -1,24 +1,24 @@
 <template>
   <nut-popup
+    v-model:visible="showPopup"
     position="bottom"
     closeable
     round
-    v-model:visible="showPopup"
-    @click-close-icon="closePopup('icon')"
-    @click-overlay="closePopup('overlay')"
-    @close="closePopup('close')"
     style="height: 75%"
     :teleportDisable="teleportDisable"
     :teleport="teleport"
+    @click-close-icon="closePopup('icon')"
+    @click-overlay="closePopup('overlay')"
+    @close="closePopup('close')"
   >
     <view class="nut-sku">
       <slot name="sku-header"></slot>
-      <sku-header :goods="goods" v-if="!getSlots('sku-header')">
-        <template #sku-header-price v-if="getSlots('sku-header-price')">
+      <sku-header v-if="!getSlots('sku-header')" :goods="goods">
+        <template v-if="getSlots('sku-header-price')" #sku-header-price>
           <slot name="sku-header-price"></slot>
         </template>
 
-        <template #sku-header-extra v-if="getSlots('sku-header-extra')">
+        <template v-if="getSlots('sku-header-extra')" #sku-header-extra>
           <slot name="sku-header-extra"></slot>
         </template>
       </sku-header>
@@ -54,7 +54,7 @@
         :confirmText="confirmText || translate('confirm')"
         @click-btn-operate="clickBtnOperate"
       >
-        <template #operate-btn v-if="getSlots('sku-operate')">
+        <template v-if="getSlots('sku-operate')" #operate-btn>
           <slot name="sku-operate"></slot>
         </template>
       </sku-operate>
diff --git a/src/packages/__VUE/step/index.taro.vue b/src/packages/__VUE/step/index.taro.vue
index 969a82b9b9..11ae8b1371 100644
--- a/src/packages/__VUE/step/index.taro.vue
+++ b/src/packages/__VUE/step/index.taro.vue
@@ -18,7 +18,7 @@
         <span v-if="!$slots.title">{{ title }}</span>
         <slot name="title"></slot>
       </view>
-      <view class="nut-step-content" v-if="content || $slots.content">
+      <view v-if="content || $slots.content" class="nut-step-content">
         <span v-if="!$slots.content" v-html="content"></span>
         <slot name="content"></slot>
       </view>
diff --git a/src/packages/__VUE/step/index.vue b/src/packages/__VUE/step/index.vue
index 969a82b9b9..11ae8b1371 100644
--- a/src/packages/__VUE/step/index.vue
+++ b/src/packages/__VUE/step/index.vue
@@ -18,7 +18,7 @@
         <span v-if="!$slots.title">{{ title }}</span>
         <slot name="title"></slot>
       </view>
-      <view class="nut-step-content" v-if="content || $slots.content">
+      <view v-if="content || $slots.content" class="nut-step-content">
         <span v-if="!$slots.content" v-html="content"></span>
         <slot name="content"></slot>
       </view>
diff --git a/src/packages/__VUE/sticky/demo.vue b/src/packages/__VUE/sticky/demo.vue
index 3fe24b2977..ccc5c1063f 100644
--- a/src/packages/__VUE/sticky/demo.vue
+++ b/src/packages/__VUE/sticky/demo.vue
@@ -9,7 +9,7 @@
       <nut-button type="primary" style="margin-left: 50px">{{ translate('title1') }} 120px</nut-button>
     </nut-sticky>
     <h2>{{ translate('title2') }}</h2>
-    <div style="width: 100%; height: 150px; background-color: #fff" ref="container">
+    <div ref="container" style="width: 100%; height: 150px; background-color: #fff">
       <nut-sticky top="57" :container="container">
         <nut-button type="info" style="margin-left: 100px">{{ translate('title2') }}</nut-button>
       </nut-sticky>
diff --git a/src/packages/__VUE/sticky/index.taro.vue b/src/packages/__VUE/sticky/index.taro.vue
index f2a25d6af9..1e77f1f79e 100644
--- a/src/packages/__VUE/sticky/index.taro.vue
+++ b/src/packages/__VUE/sticky/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="nut-sticky" ref="rootRef" :style="rootStyle" :id="'rootRef-' + refRandomId">
+  <view :id="'rootRef-' + refRandomId" ref="rootRef" class="nut-sticky" :style="rootStyle">
     <view class="nut-sticky__box" :style="stickyStyle">
       <slot></slot>
     </view>
diff --git a/src/packages/__VUE/sticky/index.vue b/src/packages/__VUE/sticky/index.vue
index 85b81a7ef1..2d783b5d96 100644
--- a/src/packages/__VUE/sticky/index.vue
+++ b/src/packages/__VUE/sticky/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="nut-sticky" ref="rootRef" :style="rootStyle">
-    <div class="nut-sticky__box" ref="stickyRef" :style="stickyStyle">
+  <div ref="rootRef" class="nut-sticky" :style="rootStyle">
+    <div ref="stickyRef" class="nut-sticky__box" :style="stickyStyle">
       <slot></slot>
     </div>
   </div>
diff --git a/src/packages/__VUE/subsidenavbar/index.taro.vue b/src/packages/__VUE/subsidenavbar/index.taro.vue
index 1eeb175d4b..90c75c5e58 100644
--- a/src/packages/__VUE/subsidenavbar/index.taro.vue
+++ b/src/packages/__VUE/subsidenavbar/index.taro.vue
@@ -8,10 +8,10 @@
       </span>
     </view>
     <view
+      v-show="!direction"
       class="nut-sub-side-navbar__list"
       :class="!direction ? 'nutFadeIn' : 'nutFadeOut'"
       :style="style"
-      v-show="!direction"
     >
       <slot></slot>
     </view>
diff --git a/src/packages/__VUE/subsidenavbar/index.vue b/src/packages/__VUE/subsidenavbar/index.vue
index eae190e93f..6623f6825e 100644
--- a/src/packages/__VUE/subsidenavbar/index.vue
+++ b/src/packages/__VUE/subsidenavbar/index.vue
@@ -8,10 +8,10 @@
       </span>
     </view>
     <view
+      v-show="!direction"
       class="nut-sub-side-navbar__list"
       :class="!direction ? 'nutFadeIn' : 'nutFadeOut'"
       :style="style"
-      v-show="!direction"
     >
       <slot></slot>
     </view>
diff --git a/src/packages/__VUE/swipe/index.taro.vue b/src/packages/__VUE/swipe/index.taro.vue
index 7c9696efc3..d77f8e52fd 100644
--- a/src/packages/__VUE/swipe/index.taro.vue
+++ b/src/packages/__VUE/swipe/index.taro.vue
@@ -7,7 +7,7 @@
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
   >
-    <view class="nut-swipe__left" ref="leftRef" :id="'leftRef-' + refRandomId" @click="onClick($event, 'left', true)">
+    <view :id="'leftRef-' + refRandomId" ref="leftRef" class="nut-swipe__left" @click="onClick($event, 'left', true)">
       <slot name="left"></slot>
     </view>
 
@@ -16,9 +16,9 @@
     </view>
 
     <view
-      class="nut-swipe__right"
-      ref="rightRef"
       :id="'rightRef-' + refRandomId"
+      ref="rightRef"
+      class="nut-swipe__right"
       @click="onClick($event, 'right', true)"
     >
       <slot name="right"></slot>
diff --git a/src/packages/__VUE/swipe/index.vue b/src/packages/__VUE/swipe/index.vue
index b745313043..d2ac70996c 100644
--- a/src/packages/__VUE/swipe/index.vue
+++ b/src/packages/__VUE/swipe/index.vue
@@ -7,7 +7,7 @@
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
   >
-    <view class="nut-swipe__left" ref="leftRef" @click="onClick($event, 'left', true)">
+    <view ref="leftRef" class="nut-swipe__left" @click="onClick($event, 'left', true)">
       <slot name="left"></slot>
     </view>
 
@@ -15,7 +15,7 @@
       <slot name="default"></slot>
     </view>
 
-    <view class="nut-swipe__right" ref="rightRef" @click="onClick($event, 'right', true)">
+    <view ref="rightRef" class="nut-swipe__right" @click="onClick($event, 'right', true)">
       <slot name="right"></slot>
     </view>
   </view>
diff --git a/src/packages/__VUE/swipegroup/index.taro.vue b/src/packages/__VUE/swipegroup/index.taro.vue
index bfe4eb3cb5..8aa728d08d 100644
--- a/src/packages/__VUE/swipegroup/index.taro.vue
+++ b/src/packages/__VUE/swipegroup/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="nut-swipe-group" ref="swipeGroupRef">
+  <view ref="swipeGroupRef" class="nut-swipe-group">
     <slot></slot>
   </view>
 </template>
diff --git a/src/packages/__VUE/swipegroup/index.vue b/src/packages/__VUE/swipegroup/index.vue
index 50160c89ae..d21da2fea2 100644
--- a/src/packages/__VUE/swipegroup/index.vue
+++ b/src/packages/__VUE/swipegroup/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="nut-swipe-group" ref="swipeGroupRef">
+  <div ref="swipeGroupRef" class="nut-swipe-group">
     <slot></slot>
   </div>
 </template>
diff --git a/src/packages/__VUE/swiper/demo.vue b/src/packages/__VUE/swiper/demo.vue
index 332b024cbb..28e6304852 100644
--- a/src/packages/__VUE/swiper/demo.vue
+++ b/src/packages/__VUE/swiper/demo.vue
@@ -43,7 +43,7 @@
     </view>
     <h2>{{ translate('indicator1') }}</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page" :loop="true" @change="change1" auto-play="2000">
+      <nut-swiper :init-page="page" :loop="true" auto-play="2000" @change="change1">
         <nut-swiper-item v-for="item in list1" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
@@ -54,7 +54,7 @@
     </view>
     <h2>{{ translate('btns') }}</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="page" :loop="true" ref="swiper">
+      <nut-swiper ref="swiper" :init-page="page" :loop="true">
         <nut-swiper-item v-for="item in list" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>
diff --git a/src/packages/__VUE/swiper/index.taro.vue b/src/packages/__VUE/swiper/index.taro.vue
index abed80a2dd..cb063edc05 100644
--- a/src/packages/__VUE/swiper/index.taro.vue
+++ b/src/packages/__VUE/swiper/index.taro.vue
@@ -1,26 +1,26 @@
 <template>
   <view
-    ref="container"
     :id="'container-' + refRandomId"
+    ref="container"
     :class="classes"
+    :catch-move="isPreventDefault"
     @touchstart="onTouchStart"
     @touchmove="onTouchMove"
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
-    :catch-move="isPreventDefault"
   >
     <view :class="classesInner" :style="state.style">
       <slot></slot>
     </view>
     <slot name="page"></slot>
-    <view :class="classesPagination" v-if="paginationVisible && !$slots.page">
+    <view v-if="paginationVisible && !$slots.page" :class="classesPagination">
       <i
+        v-for="(item, index) in state.children.length"
+        :key="index"
         :style="{
           backgroundColor: activePagination === index ? paginationColor : '#ddd'
         }"
         :class="{ active: activePagination === index }"
-        v-for="(item, index) in state.children.length"
-        :key="index"
       />
     </view>
   </view>
diff --git a/src/packages/__VUE/swiper/index.vue b/src/packages/__VUE/swiper/index.vue
index 6cc109a529..983f3f815f 100644
--- a/src/packages/__VUE/swiper/index.vue
+++ b/src/packages/__VUE/swiper/index.vue
@@ -11,14 +11,14 @@
       <slot></slot>
     </view>
     <slot name="page"></slot>
-    <view :class="classesPagination" v-if="paginationVisible && !$slots.page">
+    <view v-if="paginationVisible && !$slots.page" :class="classesPagination">
       <i
+        v-for="(item, index) in state.children.length"
+        :key="index"
         :style="{
           backgroundColor: activePagination === index ? paginationColor : '#ddd'
         }"
         :class="{ active: activePagination === index }"
-        v-for="(item, index) in state.children.length"
-        :key="index"
       />
     </view>
   </view>
diff --git a/src/packages/__VUE/switch/demo.vue b/src/packages/__VUE/switch/demo.vue
index 1001de4fc6..25f1be66c8 100644
--- a/src/packages/__VUE/switch/demo.vue
+++ b/src/packages/__VUE/switch/demo.vue
@@ -27,7 +27,7 @@
 
     <h2>{{ translate('title5') }}</h2>
     <nut-cell>
-      <nut-switch :model-value="checkedAsync" @change="changeAsync" :loading="loadingAsync" />
+      <nut-switch :model-value="checkedAsync" :loading="loadingAsync" @change="changeAsync" />
     </nut-cell>
 
     <h2>{{ translate('title6') }}</h2>
diff --git a/src/packages/__VUE/switch/index.taro.vue b/src/packages/__VUE/switch/index.taro.vue
index ed3a18171d..c1b0309ff8 100644
--- a/src/packages/__VUE/switch/index.taro.vue
+++ b/src/packages/__VUE/switch/index.taro.vue
@@ -1,12 +1,12 @@
 <template>
-  <view :class="classes" @click="onClick" :style="style">
+  <view :class="classes" :style="style" @click="onClick">
     <view class="nut-switch-button">
-      <slot name="icon" v-if="loading">
+      <slot v-if="loading" name="icon">
         <Loading1 name="loading1" :color="activeColor" />
       </slot>
       <template v-if="activeText">
-        <view class="nut-switch-label open" v-show="isActive">{{ activeText }}</view>
-        <view class="nut-switch-label close" v-show="!isActive">{{ inactiveText }}</view>
+        <view v-show="isActive" class="nut-switch-label open">{{ activeText }}</view>
+        <view v-show="!isActive" class="nut-switch-label close">{{ inactiveText }}</view>
       </template>
     </view>
   </view>
diff --git a/src/packages/__VUE/switch/index.vue b/src/packages/__VUE/switch/index.vue
index a91fa68a4b..8ff927379e 100644
--- a/src/packages/__VUE/switch/index.vue
+++ b/src/packages/__VUE/switch/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <view :class="classes" @click="onClick" :style="style">
+  <view :class="classes" :style="style" @click="onClick">
     <view class="nut-switch-button">
-      <slot name="icon" v-if="loading">
+      <slot v-if="loading" name="icon">
         <Loading1 name="loading" :color="activeColor" />
       </slot>
       <template v-if="activeText">
-        <view class="nut-switch-label open" v-show="isActive">{{ activeText }}</view>
-        <view class="nut-switch-label close" v-show="!isActive">{{ inactiveText }}</view>
+        <view v-show="isActive" class="nut-switch-label open">{{ activeText }}</view>
+        <view v-show="!isActive" class="nut-switch-label close">{{ inactiveText }}</view>
       </template>
     </view>
   </view>
diff --git a/src/packages/__VUE/tabbar/demo.vue b/src/packages/__VUE/tabbar/demo.vue
index fc76b856a9..ff6c3f379a 100644
--- a/src/packages/__VUE/tabbar/demo.vue
+++ b/src/packages/__VUE/tabbar/demo.vue
@@ -34,10 +34,10 @@
     <nut-tabbar v-model="activeName" @tab-switch="tabSwitch">
       <nut-tabbar-item
         v-for="item in List"
+        :key="item.name"
         :name="item.name"
         :tab-title="item.title"
         :icon="item.icon"
-        :key="item.name"
       >
       </nut-tabbar-item>
     </nut-tabbar>
@@ -59,7 +59,7 @@
 
     <h2>{{ translate('customCheck') }}</h2>
     <nut-tabbar v-model="active">
-      <nut-tabbar-item v-for="item in List" :tab-title="item.title" :icon="item.icon" :key="item.name">
+      <nut-tabbar-item v-for="item in List" :key="item.name" :tab-title="item.title" :icon="item.icon">
       </nut-tabbar-item>
     </nut-tabbar>
 
@@ -89,7 +89,7 @@
 
     <h2>{{ translate('customColor') }}</h2>
     <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
-      <nut-tabbar-item v-for="item in List" :tab-title="item.title" :icon="item.icon" :key="item.name">
+      <nut-tabbar-item v-for="item in List" :key="item.name" :tab-title="item.title" :icon="item.icon">
       </nut-tabbar-item>
     </nut-tabbar>
     <h2>{{ translate('customQuantity') }}</h2>
@@ -112,7 +112,7 @@
     </nut-tabbar>
     <h2>{{ translate('fixedBottom') }}</h2>
     <nut-tabbar bottom safe-area-inset-bottom placeholder>
-      <nut-tabbar-item v-for="item in List" :tab-title="item.title" :icon="item.icon" :key="item.name">
+      <nut-tabbar-item v-for="item in List" :key="item.name" :tab-title="item.title" :icon="item.icon">
       </nut-tabbar-item>
     </nut-tabbar>
   </div>
diff --git a/src/packages/__VUE/tabbaritem/index.taro.vue b/src/packages/__VUE/tabbaritem/index.taro.vue
index 28607562c5..1a7ef2c60e 100644
--- a/src/packages/__VUE/tabbaritem/index.taro.vue
+++ b/src/packages/__VUE/tabbaritem/index.taro.vue
@@ -9,7 +9,7 @@
   >
     <nut-badge v-bind="$attrs">
       <view class="nut-tabbar-item_icon-box">
-        <div class="nut-tabbar-item_icon-box_icon" v-if="isHaveSlot('icon')">
+        <div v-if="isHaveSlot('icon')" class="nut-tabbar-item_icon-box_icon">
           <slot name="icon" :active="active"></slot>
         </div>
         <view v-if="icon && !isHaveSlot('icon')">
diff --git a/src/packages/__VUE/tabbaritem/index.vue b/src/packages/__VUE/tabbaritem/index.vue
index 8f3ac41f2e..396b85d362 100644
--- a/src/packages/__VUE/tabbaritem/index.vue
+++ b/src/packages/__VUE/tabbaritem/index.vue
@@ -9,7 +9,7 @@
   >
     <nut-badge v-bind="$attrs">
       <view class="nut-tabbar-item_icon-box">
-        <div class="nut-tabbar-item_icon-box_icon" v-if="isHaveSlot('icon')">
+        <div v-if="isHaveSlot('icon')" class="nut-tabbar-item_icon-box_icon">
           <slot name="icon" :active="active"></slot>
         </div>
         <view v-if="icon && !isHaveSlot('icon')">
diff --git a/src/packages/__VUE/table/index.taro.vue b/src/packages/__VUE/table/index.taro.vue
index d76ca23e6f..e294194d5e 100644
--- a/src/packages/__VUE/table/index.taro.vue
+++ b/src/packages/__VUE/table/index.taro.vue
@@ -4,12 +4,12 @@
       <view class="nut-table__main__head">
         <view class="nut-table__main__head__tr">
           <span
-            class="nut-table__main__head__tr__th"
-            :class="cellClasses(item)"
             v-for="item in columns"
             :key="item.key"
-            @click="handleSorterClick(item)"
+            class="nut-table__main__head__tr__th"
+            :class="cellClasses(item)"
             :style="item.stylehead"
+            @click="handleSorterClick(item)"
           >
             {{ item.title }}
             <slot name="icon"></slot>
@@ -18,18 +18,18 @@
         </view>
       </view>
       <view class="nut-table__main__body">
-        <view class="nut-table__main__body__tr" v-for="item in curData" :key="item">
+        <view v-for="item in curData" :key="item" class="nut-table__main__body__tr">
           <span
-            class="nut-table__main__body__tr__td"
-            :class="cellClasses(getColumnItem(value))"
             v-for="[value, render] in sortDataItem()"
             :key="value"
+            class="nut-table__main__body__tr__td"
+            :class="cellClasses(getColumnItem(value))"
             :style="getColumnItemStyle(value)"
           >
             <RenderColumn
+              v-if="typeof item[value] === 'function' || typeof render === 'function'"
               :slots="[render, item[value]]"
               :record="item"
-              v-if="typeof item[value] === 'function' || typeof render === 'function'"
             ></RenderColumn>
             <view v-else>
               {{ item[value] }}
@@ -38,10 +38,10 @@
         </view>
       </view>
     </view>
-    <view class="nut-table__summary" v-if="summary">
+    <view v-if="summary" class="nut-table__summary">
       <span class="nut-table__summary__text" v-html="summary().value"></span>
     </view>
-    <view class="nut-table__nodata" v-if="!curData.length">
+    <view v-if="!curData.length" class="nut-table__nodata">
       <div class="nut-table__nodata" :class="{ 'nut-table__nodata--border': bordered }">
         <slot name="nodata"></slot>
         <div v-if="!$slots.nodata" class="nut-table__nodata__text"> {{ translate('noData') }} </div>
diff --git a/src/packages/__VUE/table/index.vue b/src/packages/__VUE/table/index.vue
index 19591c39da..1360cd3028 100644
--- a/src/packages/__VUE/table/index.vue
+++ b/src/packages/__VUE/table/index.vue
@@ -4,12 +4,12 @@
       <view class="nut-table__main__head">
         <view class="nut-table__main__head__tr">
           <span
-            class="nut-table__main__head__tr__th"
-            :class="cellClasses(item)"
             v-for="item in columns"
             :key="item.key"
-            @click="handleSorterClick(item)"
+            class="nut-table__main__head__tr__th"
+            :class="cellClasses(item)"
             :style="item.stylehead"
+            @click="handleSorterClick(item)"
           >
             {{ item.title }}
             <slot name="icon"></slot>
@@ -18,18 +18,18 @@
         </view>
       </view>
       <view class="nut-table__main__body">
-        <view class="nut-table__main__body__tr" v-for="item in curData" :key="item">
+        <view v-for="item in curData" :key="item" class="nut-table__main__body__tr">
           <span
-            class="nut-table__main__body__tr__td"
-            :class="cellClasses(getColumnItem(value))"
             v-for="[value, render] in sortDataItem()"
             :key="value"
+            class="nut-table__main__body__tr__td"
+            :class="cellClasses(getColumnItem(value))"
             :style="getColumnItemStyle(value)"
           >
             <RenderColumn
+              v-if="typeof item[value] === 'function' || typeof render === 'function'"
               :slots="[render, item[value]]"
               :record="item"
-              v-if="typeof item[value] === 'function' || typeof render === 'function'"
             ></RenderColumn>
             <view v-else>
               {{ item[value] }}
@@ -38,13 +38,13 @@
         </view>
       </view>
     </view>
-    <view class="nut-table__nodata" v-if="!curData.length">
+    <view v-if="!curData.length" class="nut-table__nodata">
       <div class="nut-table__nodata" :class="{ 'nut-table__nodata--border': bordered }">
         <slot name="nodata"></slot>
         <div v-if="!$slots.nodata" class="nut-table__nodata__text"> {{ translate('noData') }} </div>
       </div>
     </view>
-    <view class="nut-table__summary" v-if="summary">
+    <view v-if="summary" class="nut-table__summary">
       <span class="nut-table__summary__text" v-html="summary().value"></span>
     </view>
   </view>
diff --git a/src/packages/__VUE/tabs/demo.vue b/src/packages/__VUE/tabs/demo.vue
index c60d81f02d..3f0d72f5f5 100644
--- a/src/packages/__VUE/tabs/demo.vue
+++ b/src/packages/__VUE/tabs/demo.vue
@@ -37,26 +37,26 @@
     </nut-tabs>
     <h2>{{ translate('title3') }}</h2>
     <nut-tabs v-model="state.tab3value">
-      <nut-tab-pane v-for="item in state.list3" :title="'Tab ' + item" :key="item"> Tab {{ item }} </nut-tab-pane>
+      <nut-tab-pane v-for="item in state.list3" :key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
     </nut-tabs>
 
     <h2>{{ translate('title4') }}</h2>
     <nut-tabs v-model="state.tab4value" title-scroll title-gutter="10">
-      <nut-tab-pane v-for="item in state.list4" :title="'Tab ' + item" :key="item"> Tab {{ item }} </nut-tab-pane>
+      <nut-tab-pane v-for="item in state.list4" :key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
     </nut-tabs>
     <h2>{{ translate('title10') }}</h2>
     <nut-tabs v-model="state.tab4value" title-scroll direction="vertical" style="height: 150px">
-      <nut-tab-pane v-for="item in state.list4" :title="'Tab ' + item" :key="item"> Tab {{ item }} </nut-tab-pane>
+      <nut-tab-pane v-for="item in state.list4" :key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
     </nut-tabs>
     <h2>{{ translate('title5') }}</h2>
-    <nut-tabs style="height: 300px" v-model="state.tab5value" title-scroll direction="vertical">
-      <nut-tab-pane v-for="item in state.list5" :pane-key="item" :title="'Tab ' + item" :key="item">
+    <nut-tabs v-model="state.tab5value" style="height: 300px" title-scroll direction="vertical">
+      <nut-tab-pane v-for="item in state.list5" :key="item" :pane-key="item" :title="'Tab ' + item">
         Tab {{ item }}
       </nut-tab-pane>
     </nut-tabs>
     <h2>{{ translate('title6') }}</h2>
-    <nut-tabs style="height: 300px" v-model="state.tab6value" type="smile" title-scroll direction="vertical">
-      <nut-tab-pane v-for="item in state.list5" :pane-key="item" :title="'Tab ' + item" :key="item">
+    <nut-tabs v-model="state.tab6value" style="height: 300px" type="smile" title-scroll direction="vertical">
+      <nut-tab-pane v-for="item in state.list5" :key="item" :pane-key="item" :title="'Tab ' + item">
         Tab {{ item }}
       </nut-tab-pane>
     </nut-tabs>
@@ -80,18 +80,18 @@
     <nut-tabs v-model="state.tab7value">
       <template #titles>
         <div
+          v-for="item in state.list6"
+          :key="item.paneKey"
           class="nut-tabs__titles-item"
-          @click="state.tab7value = item.paneKey"
           :class="{ active: state.tab7value == item.paneKey }"
-          :key="item.paneKey"
-          v-for="item in state.list6"
+          @click="state.tab7value = item.paneKey"
         >
           <Dongdong />
           <span class="nut-tabs__titles-item__text">{{ item.title }}</span>
           <span class="nut-tabs__titles-item__line"></span>
         </div>
       </template>
-      <nut-tab-pane v-for="item in state.list6" :pane-key="item.paneKey" :key="item.paneKey">
+      <nut-tab-pane v-for="item in state.list6" :key="item.paneKey" :pane-key="item.paneKey">
         {{ item.title }}
       </nut-tab-pane>
     </nut-tabs>
diff --git a/src/packages/__VUE/tabs/index.taro.vue b/src/packages/__VUE/tabs/index.taro.vue
index 8f095938ec..086b669276 100644
--- a/src/packages/__VUE/tabs/index.taro.vue
+++ b/src/packages/__VUE/tabs/index.taro.vue
@@ -1,13 +1,13 @@
 <template>
-  <view class="nut-tabs" :class="[direction]" ref="container">
+  <view ref="container" class="nut-tabs" :class="[direction]">
     <nut-scroll-view
+      :id="`nut-tabs__titles_${name}`"
       :scroll-x="getScrollX"
       :scroll-y="getScrollY"
       :scroll-with-animation="scrollWithAnimation"
       :scroll-left="scrollLeft"
       :scroll-top="scrollTop"
       :enable-flex="true"
-      :id="`nut-tabs__titles_${name}`"
       class="nut-tabs__titles tabs-scrollview"
       :class="{ [type]: type, scrollable: titleScroll, 'scroll-vertical': getScrollY, [size]: size }"
       :style="tabsNavStyle"
@@ -16,15 +16,15 @@
         <slot v-if="$slots.titles" name="titles"></slot>
         <template v-else>
           <view
+            v-for="(item, index) in titles"
+            :key="item.paneKey"
             class="nut-tabs__titles-item taro"
             :style="titleStyle"
-            @click="tabChange(item, index)"
             :class="{ active: item.paneKey == modelValue, disabled: item.disabled }"
-            v-for="(item, index) in titles"
-            :key="item.paneKey"
+            @click="tabChange(item, index)"
           >
-            <view class="nut-tabs__titles-item__line" :style="tabsActiveStyle" v-if="type == 'line'"></view>
-            <view class="nut-tabs__titles-item__smile" :style="tabsActiveStyle" v-if="type == 'smile'">
+            <view v-if="type == 'line'" class="nut-tabs__titles-item__line" :style="tabsActiveStyle"></view>
+            <view v-if="type == 'smile'" class="nut-tabs__titles-item__smile" :style="tabsActiveStyle">
               <JoySmile :color="color" />
             </view>
             <view class="nut-tabs__titles-item__text" :class="{ ellipsis: ellipsis }">{{ item.title }} </view>
@@ -34,9 +34,9 @@
       </view>
     </nut-scroll-view>
     <view
-      class="nut-tabs__content"
-      ref="tabsContentRef"
       :id="'tabsContentRef-' + refRandomId"
+      ref="tabsContentRef"
+      class="nut-tabs__content"
       :style="contentStyle"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
diff --git a/src/packages/__VUE/tabs/index.vue b/src/packages/__VUE/tabs/index.vue
index 147ddb9972..f5db8e5595 100644
--- a/src/packages/__VUE/tabs/index.vue
+++ b/src/packages/__VUE/tabs/index.vue
@@ -1,25 +1,25 @@
 <template>
-  <view class="nut-tabs" :class="[direction]" ref="container">
+  <view ref="container" class="nut-tabs" :class="[direction]">
     <template v-if="sticky">
       <nut-sticky :top="top" :container="container" @scroll="onStickyScroll">
         <view
+          ref="navRef"
           class="nut-tabs__titles"
           :class="{ [type]: type, scrollable: titleScroll, [size]: size }"
           :style="tabsNavStyle"
-          ref="navRef"
         >
           <slot v-if="$slots.titles" name="titles"></slot>
           <template v-else>
             <view
+              v-for="(item, index) in titles"
+              :key="item.paneKey"
               class="nut-tabs__titles-item"
               :style="titleStyle"
-              @click="tabChange(item, index)"
               :class="{ active: item.paneKey == modelValue, disabled: item.disabled }"
-              v-for="(item, index) in titles"
-              :key="item.paneKey"
+              @click="tabChange(item, index)"
             >
-              <view class="nut-tabs__titles-item__line" :style="tabsActiveStyle" v-if="type == 'line'"></view>
-              <view class="nut-tabs__titles-item__smile" :style="tabsActiveStyle" v-if="type == 'smile'">
+              <view v-if="type == 'line'" class="nut-tabs__titles-item__line" :style="tabsActiveStyle"></view>
+              <view v-if="type == 'smile'" class="nut-tabs__titles-item__smile" :style="tabsActiveStyle">
                 <JoySmile :color="color" />
               </view>
               <view class="nut-tabs__titles-item__text" :class="{ ellipsis: ellipsis }">{{ item.title }} </view>
@@ -30,24 +30,24 @@
     </template>
     <template v-else>
       <view
+        ref="navRef"
         class="nut-tabs__titles"
         :class="{ [type]: type, scrollable: titleScroll, 'scroll-vertical': getScrollY, [size]: size }"
         :style="tabsNavStyle"
-        ref="navRef"
       >
         <slot v-if="$slots.titles" name="titles"></slot>
         <template v-else>
           <view
-            class="nut-tabs__titles-item"
-            :style="titleStyle"
-            @click="tabChange(item, index)"
-            :class="{ active: item.paneKey == modelValue, disabled: item.disabled }"
             v-for="(item, index) in titles"
             :key="item.paneKey"
             :ref="(e) => setTabItemRef(e as HTMLElement, index)"
+            class="nut-tabs__titles-item"
+            :style="titleStyle"
+            :class="{ active: item.paneKey == modelValue, disabled: item.disabled }"
+            @click="tabChange(item, index)"
           >
-            <view class="nut-tabs__titles-item__line" :style="tabsActiveStyle" v-if="type == 'line'"></view>
-            <view class="nut-tabs__titles-item__smile" :style="tabsActiveStyle" v-if="type == 'smile'">
+            <view v-if="type == 'line'" class="nut-tabs__titles-item__line" :style="tabsActiveStyle"></view>
+            <view v-if="type == 'smile'" class="nut-tabs__titles-item__smile" :style="tabsActiveStyle">
               <JoySmile :color="color" />
             </view>
             <view class="nut-tabs__titles-item__text" :class="{ ellipsis: ellipsis }">{{ item.title }} </view>
@@ -56,8 +56,8 @@
       </view>
     </template>
     <view
-      class="nut-tabs__content"
       ref="tabsContentRef"
+      class="nut-tabs__content"
       :style="contentStyle"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
diff --git a/src/packages/__VUE/tag/demo.vue b/src/packages/__VUE/tag/demo.vue
index ee403857d8..9ac5513406 100644
--- a/src/packages/__VUE/tag/demo.vue
+++ b/src/packages/__VUE/tag/demo.vue
@@ -46,7 +46,7 @@
       </nut-cell>
       <nut-cell :title="translate('closeable')">
         <template #link>
-          <nut-tag v-if="show" closeable @close="close" type="primary">{{ translate('tag') }}</nut-tag>
+          <nut-tag v-if="show" closeable type="primary" @close="close">{{ translate('tag') }}</nut-tag>
         </template>
       </nut-cell>
     </nut-cell-group>
diff --git a/src/packages/__VUE/tag/index.taro.vue b/src/packages/__VUE/tag/index.taro.vue
index 4a355073a5..33ff57e12e 100644
--- a/src/packages/__VUE/tag/index.taro.vue
+++ b/src/packages/__VUE/tag/index.taro.vue
@@ -1,7 +1,7 @@
 <template>
   <view :class="classes" :style="style" @click="onClick">
     <slot></slot>
-    <Close class="nut-tag--close" v-if="closeable" size="11" @click="onClose"></Close>
+    <Close v-if="closeable" class="nut-tag--close" size="11" @click="onClose"></Close>
   </view>
 </template>
 
diff --git a/src/packages/__VUE/tag/index.vue b/src/packages/__VUE/tag/index.vue
index 06e358da79..aa3426a3ad 100644
--- a/src/packages/__VUE/tag/index.vue
+++ b/src/packages/__VUE/tag/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view :class="classes" :style="style" @click="onClick">
     <slot></slot>
-    <Close class="nut-tag--close" v-if="closeable" width="12px" height="12px" @click="onClose"></Close>
+    <Close v-if="closeable" class="nut-tag--close" width="12px" height="12px" @click="onClose"></Close>
   </view>
 </template>
 
diff --git a/src/packages/__VUE/textarea/demo.vue b/src/packages/__VUE/textarea/demo.vue
index 2f084927b0..06577257cd 100644
--- a/src/packages/__VUE/textarea/demo.vue
+++ b/src/packages/__VUE/textarea/demo.vue
@@ -11,7 +11,7 @@
     <h2>{{ translate('title3') }}</h2>
     <nut-textarea disabled :model-value="translate('desc2')" limit-show max-length="20" />
     <h2>{{ translate('title4') }}</h2>
-    <nut-textarea autofocus v-model="value4" />
+    <nut-textarea v-model="value4" autofocus />
   </div>
 </template>
 
diff --git a/src/packages/__VUE/textarea/index.taro.vue b/src/packages/__VUE/textarea/index.taro.vue
index 8b36e8ca02..fd548e69a2 100644
--- a/src/packages/__VUE/textarea/index.taro.vue
+++ b/src/packages/__VUE/textarea/index.taro.vue
@@ -13,19 +13,19 @@
       :disabled="disabled"
       :readonly="readonly"
       :value="modelValue"
-      @input="change"
-      @blur="blur"
-      @focus="focus"
       :show-count="false"
       :maxlength="maxLength"
       :placeholder="placeholder || translate('placeholder')"
       :auto-focus="autofocus"
+      @input="change"
+      @blur="blur"
+      @focus="focus"
       @change="endComposing"
       @compositionend="endComposing"
       @compositionstart="startComposing"
     />
-    <view class="nut-textarea__limit" v-if="limitShow"> {{ modelValue ? modelValue.length : 0 }}/{{ maxLength }}</view>
-    <view class="nut-textarea__cpoyText" :style="copyTxtStyle" v-if="autosize">{{ modelValue }}</view>
+    <view v-if="limitShow" class="nut-textarea__limit"> {{ modelValue ? modelValue.length : 0 }}/{{ maxLength }}</view>
+    <view v-if="autosize" class="nut-textarea__cpoyText" :style="copyTxtStyle">{{ modelValue }}</view>
   </view>
 </template>
 <!-- eslint-disable @typescript-eslint/no-non-null-assertion -->
diff --git a/src/packages/__VUE/textarea/index.vue b/src/packages/__VUE/textarea/index.vue
index debf19ed59..c8db94221f 100644
--- a/src/packages/__VUE/textarea/index.vue
+++ b/src/packages/__VUE/textarea/index.vue
@@ -8,17 +8,17 @@
       :disabled="disabled"
       :readonly="readonly"
       :value="modelValue"
-      @input="change"
-      @blur="blur"
-      @focus="focus"
       :maxlength="maxLength"
       :placeholder="placeholder || translate('placeholder')"
       :autofocus="autofocus"
+      @input="change"
+      @blur="blur"
+      @focus="focus"
       @change="endComposing"
       @compositionend="endComposing"
       @compositionstart="startComposing"
     />
-    <view class="nut-textarea__limit" v-if="limitShow"> {{ modelValue ? modelValue.length : 0 }}/{{ maxLength }}</view>
+    <view v-if="limitShow" class="nut-textarea__limit"> {{ modelValue ? modelValue.length : 0 }}/{{ maxLength }}</view>
   </view>
 </template>
 <!-- eslint-disable @typescript-eslint/no-non-null-assertion -->
diff --git a/src/packages/__VUE/timedetail/index.taro.vue b/src/packages/__VUE/timedetail/index.taro.vue
index bc6b973ca9..2e7ca23a9a 100644
--- a/src/packages/__VUE/timedetail/index.taro.vue
+++ b/src/packages/__VUE/timedetail/index.taro.vue
@@ -2,7 +2,7 @@
   <view :class="classes">
     <view class="nut-time-detail__detail nut-time-detail__detail--moring">
       <view class="nut-time-detail__detail__list">
-        <view :class="getClass(item)" v-for="item in renderData" :key="item" @click="handleTime(item)">{{ item }}</view>
+        <view v-for="item in renderData" :key="item" :class="getClass(item)" @click="handleTime(item)">{{ item }}</view>
       </view>
     </view>
   </view>
diff --git a/src/packages/__VUE/timedetail/index.vue b/src/packages/__VUE/timedetail/index.vue
index bc6b973ca9..2e7ca23a9a 100644
--- a/src/packages/__VUE/timedetail/index.vue
+++ b/src/packages/__VUE/timedetail/index.vue
@@ -2,7 +2,7 @@
   <view :class="classes">
     <view class="nut-time-detail__detail nut-time-detail__detail--moring">
       <view class="nut-time-detail__detail__list">
-        <view :class="getClass(item)" v-for="item in renderData" :key="item" @click="handleTime(item)">{{ item }}</view>
+        <view v-for="item in renderData" :key="item" :class="getClass(item)" @click="handleTime(item)">{{ item }}</view>
       </view>
     </view>
   </view>
diff --git a/src/packages/__VUE/timeselect/index.taro.vue b/src/packages/__VUE/timeselect/index.taro.vue
index f9d6220196..a4c06af689 100644
--- a/src/packages/__VUE/timeselect/index.taro.vue
+++ b/src/packages/__VUE/timeselect/index.taro.vue
@@ -13,7 +13,7 @@
       <view class="nut-time-select__title">
         <view class="nut-time-select__title__fixed">
           <span v-if="!$slots.title">{{ title || translate('pickupTime') }}</span>
-          <slot name="title" v-else></slot>
+          <slot v-else name="title"></slot>
         </view>
       </view>
       <view class="nut-time-select__content">
diff --git a/src/packages/__VUE/timeselect/index.vue b/src/packages/__VUE/timeselect/index.vue
index 2d7a441b01..ff47cbfe76 100644
--- a/src/packages/__VUE/timeselect/index.vue
+++ b/src/packages/__VUE/timeselect/index.vue
@@ -14,7 +14,7 @@
       <view class="nut-time-select__title">
         <view class="nut-time-select__title__fixed">
           <span v-if="!$slots.title">{{ title || translate('pickupTime') }}</span>
-          <slot name="title" v-else></slot>
+          <slot v-else name="title"></slot>
         </view>
       </view>
       <view class="nut-time-select__content">
diff --git a/src/packages/__VUE/toast/index.taro.vue b/src/packages/__VUE/toast/index.taro.vue
index 7faee74b6c..5bbb1d2638 100644
--- a/src/packages/__VUE/toast/index.taro.vue
+++ b/src/packages/__VUE/toast/index.taro.vue
@@ -1,8 +1,8 @@
 <template>
   <Transition name="toast-fade" @after-leave="onAfterLeave">
     <view
-      :class="toastBodyClass"
       v-show="visible"
+      :class="toastBodyClass"
       :style="{
         bottom: center ? 'auto' : bottom,
         'background-color': coverColor
diff --git a/src/packages/__VUE/toast/index.vue b/src/packages/__VUE/toast/index.vue
index fcdbc5ffbf..a0ebf7909a 100644
--- a/src/packages/__VUE/toast/index.vue
+++ b/src/packages/__VUE/toast/index.vue
@@ -1,8 +1,8 @@
 <template>
   <Transition name="toast-fade" @after-leave="onAfterLeave">
     <view
-      :class="toastBodyClass"
       v-show="state.mounted"
+      :class="toastBodyClass"
       :style="{
         bottom: center ? 'auto' : bottom,
         'background-color': coverColor
diff --git a/src/packages/__VUE/tour/demo.vue b/src/packages/__VUE/tour/demo.vue
index 451533543e..cf902d110d 100644
--- a/src/packages/__VUE/tour/demo.vue
+++ b/src/packages/__VUE/tour/demo.vue
@@ -9,8 +9,8 @@
     </nut-cell>
 
     <nut-tour
-      class="nut-custom-tour nut-customword-tour"
       v-model="showTour3"
+      class="nut-custom-tour nut-customword-tour"
       :steps="steps3"
       type="tile"
       location="bottom-end"
@@ -25,8 +25,8 @@
     </nut-cell>
 
     <nut-tour
-      class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
       v-model="showTour1"
+      class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
       :steps="steps1"
       location="bottom-end"
       type="tile"
@@ -57,8 +57,8 @@
     </nut-cell>
 
     <nut-tour
-      class="nut-custom-tour nut-customword-tour"
       v-model="showTour2"
+      class="nut-custom-tour nut-customword-tour"
       :steps="steps2"
       type="tile"
       bgColor="#f00"
@@ -76,8 +76,8 @@
     </nut-cell>
 
     <nut-tour
-      class="nut-custom-tour nut-customword-tour"
       v-model="showTour4"
+      class="nut-custom-tour nut-customword-tour"
       :steps="steps4"
       type="tile"
       theme="dark"
@@ -104,8 +104,8 @@
     </nut-tabbar>
 
     <nut-tour
-      class="nut-custom-tour"
       v-model="showTour"
+      class="nut-custom-tour"
       :steps="steps"
       location="top-start"
       :offset="[0, 0]"
diff --git a/src/packages/__VUE/tour/index.taro.vue b/src/packages/__VUE/tour/index.taro.vue
index c130a73b10..79ca39c676 100644
--- a/src/packages/__VUE/tour/index.taro.vue
+++ b/src/packages/__VUE/tour/index.taro.vue
@@ -1,14 +1,14 @@
 <template>
   <view :class="classes">
-    <view class="nut-tour-masked" v-if="showTour" @click="handleClickMask"></view>
+    <view v-if="showTour" class="nut-tour-masked" @click="handleClickMask"></view>
 
     <view v-for="(step, i) in steps" :key="i" style="height: 0">
       <view
+        v-if="showTour"
+        :id="`nut-tour-popid${i}${refRandomId}`"
         class="nut-tour-mask"
         :class="[mask ? (showPopup[i] ? '' : 'nut-tour-mask-hidden') : 'nut-tour-mask-none']"
         :style="maskStyles[i]"
-        v-if="showTour"
-        :id="`nut-tour-popid${i}${refRandomId}`"
       ></view>
       <nut-popover
         v-model:visible="showPopup[i]"
@@ -23,8 +23,8 @@
       >
         <template #content>
           <slot>
-            <view class="nut-tour-content" v-if="type == 'step'">
-              <view class="nut-tour-content-top" v-if="showTitleBar">
+            <view v-if="type == 'step'" class="nut-tour-content">
+              <view v-if="showTitleBar" class="nut-tour-content-top">
                 <view @click="close">
                   <Close class="nut-tour-content-top-close" size="10px" />
                 </view>
@@ -37,24 +37,24 @@
                 <view class="nut-tour-content-bottom-operate">
                   <slot name="prev-step">
                     <view
+                      v-if="active != 0 && showPrevStep"
                       class="nut-tour-content-bottom-operate-btn"
                       @click="changeStep('prev')"
-                      v-if="active != 0 && showPrevStep"
                       >{{ prevStepTxt }}</view
                     >
                   </slot>
                   <view
+                    v-if="steps.length - 1 == active"
                     class="nut-tour-content-bottom-operate-btn active"
                     @click="close"
-                    v-if="steps.length - 1 == active"
                     >{{ completeTxt }}</view
                   >
 
                   <slot name="next-step">
                     <view
+                      v-if="steps.length - 1 != active"
                       class="nut-tour-content-bottom-operate-btn active"
                       @click="changeStep('next')"
-                      v-if="steps.length - 1 != active"
                       >{{ nextStepTxt }}</view
                     >
                   </slot>
@@ -62,7 +62,7 @@
               </view>
             </view>
 
-            <view class="nut-tour-content nut-tour-content-tile" v-if="type == 'tile'">
+            <view v-if="type == 'tile'" class="nut-tour-content nut-tour-content-tile">
               <view class="nut-tour-content-inner">
                 {{ step.content }}
               </view>
diff --git a/src/packages/__VUE/tour/index.vue b/src/packages/__VUE/tour/index.vue
index a6c3670737..c2bc26ec64 100644
--- a/src/packages/__VUE/tour/index.vue
+++ b/src/packages/__VUE/tour/index.vue
@@ -1,15 +1,15 @@
 <template>
   <div :class="classes">
-    <div class="nut-tour-masked" v-show="showTour" @click="handleClickMask"></div>
+    <div v-show="showTour" class="nut-tour-masked" @click="handleClickMask"></div>
 
     <div v-for="(step, i) in steps" :key="i" style="height: 0">
       <template v-if="i == active">
         <div
+          v-if="showTour"
+          id="nut-tour-popid"
           class="nut-tour-mask"
           :class="[mask ? '' : 'nut-tour-mask-none']"
           :style="maskStyle"
-          v-if="showTour"
-          id="nut-tour-popid"
         ></div>
         <nut-popover
           v-model:visible="showPopup"
@@ -23,8 +23,8 @@
         >
           <template #content>
             <slot>
-              <div class="nut-tour-content" v-if="type == 'step'">
-                <div class="nut-tour-content-top" v-if="showTitleBar">
+              <div v-if="type == 'step'" class="nut-tour-content">
+                <div v-if="showTitleBar" class="nut-tour-content-top">
                   <div @click="close">
                     <Close class="nut-tour-content-top-close" />
                   </div>
@@ -37,24 +37,24 @@
                   <div class="nut-tour-content-bottom-operate">
                     <slot name="prev-step">
                       <div
+                        v-if="active != 0 && showPrevStep"
                         class="nut-tour-content-bottom-operate-btn"
                         @click="changeStep('prev')"
-                        v-if="active != 0 && showPrevStep"
                         >{{ prevStepTxt }}</div
                       >
                     </slot>
 
                     <div
+                      v-if="steps.length - 1 == active"
                       class="nut-tour-content-bottom-operate-btn active"
                       @click="close"
-                      v-if="steps.length - 1 == active"
                       >{{ completeTxt }}</div
                     >
                     <slot name="next-step">
                       <div
+                        v-if="steps.length - 1 != active"
                         class="nut-tour-content-bottom-operate-btn active"
                         @click="changeStep('next')"
-                        v-if="steps.length - 1 != active"
                         >{{ nextStepTxt }}</div
                       >
                     </slot>
@@ -62,7 +62,7 @@
                 </div>
               </div>
 
-              <div class="nut-tour-content nut-tour-content-tile" v-if="type == 'tile'">
+              <div v-if="type == 'tile'" class="nut-tour-content nut-tour-content-tile">
                 <div class="nut-tour-content-inner">
                   {{ step.content }}
                 </div>
diff --git a/src/packages/__VUE/trendarrow/index.taro.vue b/src/packages/__VUE/trendarrow/index.taro.vue
index 52a6d7311d..1e8768e7e7 100644
--- a/src/packages/__VUE/trendarrow/index.taro.vue
+++ b/src/packages/__VUE/trendarrow/index.taro.vue
@@ -3,10 +3,10 @@
     <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
       calcRate
     }}</span>
-    <slot name="up-icon" v-if="Number(rate) !== 0 && rateTrend">
+    <slot v-if="Number(rate) !== 0 && rateTrend" name="up-icon">
       <TriangleUp :color="riseColor" />
     </slot>
-    <slot name="down-icon" v-if="Number(rate) !== 0 && !rateTrend">
+    <slot v-if="Number(rate) !== 0 && !rateTrend" name="down-icon">
       <TriangleDown :color="dropColor" />
     </slot>
     <span v-if="arrowLeft" class="nut-trend-arrow-icon-after nut-trend-arrow-rate" :style="calcStyle">{{
diff --git a/src/packages/__VUE/trendarrow/index.vue b/src/packages/__VUE/trendarrow/index.vue
index 9c75139118..b01c604940 100644
--- a/src/packages/__VUE/trendarrow/index.vue
+++ b/src/packages/__VUE/trendarrow/index.vue
@@ -3,10 +3,10 @@
     <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
       calcRate
     }}</span>
-    <slot name="up-icon" v-if="Number(rate) !== 0 && rateTrend">
+    <slot v-if="Number(rate) !== 0 && rateTrend" name="up-icon">
       <TriangleUp :color="riseColor" />
     </slot>
-    <slot name="down-icon" v-if="Number(rate) !== 0 && !rateTrend">
+    <slot v-if="Number(rate) !== 0 && !rateTrend" name="down-icon">
       <TriangleDown :color="dropColor" />
     </slot>
     <span v-if="arrowLeft" class="nut-trend-arrow-icon-after nut-trend-arrow-rate" :style="calcStyle">{{
diff --git a/src/packages/__VUE/uploader/demo.vue b/src/packages/__VUE/uploader/demo.vue
index f166420d29..a29085fe97 100644
--- a/src/packages/__VUE/uploader/demo.vue
+++ b/src/packages/__VUE/uploader/demo.vue
@@ -3,10 +3,10 @@
     <h2>{{ translate('basic') }}</h2>
     <nut-uploader :url="uploadUrl"></nut-uploader>
     <h2>{{ translate('title1') }}</h2>
-    <nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" @delete="onDelete" maximum="3" multiple>
+    <nut-uploader v-model:file-list="defaultFileList" :url="uploadUrl" maximum="3" multiple @delete="onDelete">
     </nut-uploader>
     <h2>{{ translate('title2') }}</h2>
-    <nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList1" maximum="10" multiple list-type="list">
+    <nut-uploader v-model:file-list="defaultFileList1" :url="uploadUrl" maximum="10" multiple list-type="list">
       <nut-button type="success" size="small">{{ translate('uploadfile') }}</nut-button>
     </nut-uploader>
     <h2>{{ translate('title3') }}</h2>
@@ -37,7 +37,7 @@
     <h2>{{ translate('title13') }}</h2>
     <nut-uploader :url="uploadUrl" method="put" :before-xhr-upload="beforeXhrUpload"></nut-uploader>
     <h2>{{ translate('title10') }}</h2>
-    <nut-uploader :url="uploadUrl" maximum="5" :auto-upload="false" ref="uploadRef"></nut-uploader>
+    <nut-uploader ref="uploadRef" :url="uploadUrl" maximum="5" :auto-upload="false"></nut-uploader>
     <br />
     <nut-button type="success" size="small" @click="submitUpload">{{ translate('title11') }}</nut-button>
     <nut-button type="danger" size="small" @click="clearUpload">{{ translate('title14') }}</nut-button>
diff --git a/src/packages/__VUE/uploader/index.taro.vue b/src/packages/__VUE/uploader/index.taro.vue
index f41ca611f3..9e9f727202 100644
--- a/src/packages/__VUE/uploader/index.taro.vue
+++ b/src/packages/__VUE/uploader/index.taro.vue
@@ -1,32 +1,32 @@
 <template>
   <view class="nut-uploader">
-    <view class="nut-uploader__slot" v-if="$slots.default">
+    <view v-if="$slots.default" class="nut-uploader__slot">
       <slot></slot>
       <template v-if="Number(maximum) - fileList.length">
         <nut-button class="nut-uploader__input" @click="chooseImage" />
       </template>
     </view>
 
-    <view class="nut-uploader__preview" :class="[listType]" v-for="(item, index) in fileList" :key="item.uid">
-      <view class="nut-uploader__preview-img" v-if="listType == 'picture' && !$slots.default">
-        <view class="nut-uploader__preview__progress" v-if="item.status != 'success'">
+    <view v-for="(item, index) in fileList" :key="item.uid" class="nut-uploader__preview" :class="[listType]">
+      <view v-if="listType == 'picture' && !$slots.default" class="nut-uploader__preview-img">
+        <view v-if="item.status != 'success'" class="nut-uploader__preview__progress">
           <template v-if="item.status != 'ready'">
-            <Failure color="#fff" v-if="item.status == 'error'" />
-            <Loading name="loading" color="#fff" v-else />
+            <Failure v-if="item.status == 'error'" color="#fff" />
+            <Loading v-else name="loading" color="#fff" />
           </template>
           <view class="nut-uploader__preview__progress__msg">{{ item.message }}</view>
         </view>
 
-        <view class="close" v-if="isDeletable" @click="onDelete(item, index)">
+        <view v-if="isDeletable" class="close" @click="onDelete(item, index)">
           <slot name="delete-icon"> <Failure /></slot>
         </view>
 
         <img
+          v-if="(item?.type?.includes('image') || item?.type?.includes('video')) && item.url"
           class="nut-uploader__preview-img__c"
           :mode="mode"
-          @click="fileItemClick(item)"
-          v-if="(item?.type?.includes('image') || item?.type?.includes('video')) && item.url"
           :src="item.url"
+          @click="fileItemClick(item)"
         />
         <view v-else class="nut-uploader__preview-img__file">
           <view class="nut-uploader__preview-img__file__name" @click="fileItemClick(item)">
@@ -35,8 +35,8 @@
         </view>
         <view class="tips">{{ item.name }}</view>
       </view>
-      <view class="nut-uploader__preview-list" v-else-if="listType == 'list'">
-        <view class="nut-uploader__preview-img__file__name" @click="fileItemClick(item)" :class="[item.status]">
+      <view v-else-if="listType == 'list'" class="nut-uploader__preview-list">
+        <view class="nut-uploader__preview-img__file__name" :class="[item.status]" @click="fileItemClick(item)">
           <Link class="nut-uploader__preview-img__file__link" />
           <view class="file__name_tips">{{ item.name }}</view>
           <Del
@@ -48,9 +48,9 @@
         </view>
 
         <nut-progress
+          v-if="item.status == 'uploading'"
           size="small"
           :percentage="item.percentage"
-          v-if="item.status == 'uploading'"
           stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
           :show-text="false"
         >
@@ -58,9 +58,9 @@
       </view>
     </view>
     <view
+      v-if="listType == 'picture' && !$slots.default && Number(maximum) - fileList.length"
       class="nut-uploader__upload"
       :class="[listType]"
-      v-if="listType == 'picture' && !$slots.default && Number(maximum) - fileList.length"
     >
       <slot name="upload-icon">
         <Photograph color="#808080" />
diff --git a/src/packages/__VUE/uploader/index.vue b/src/packages/__VUE/uploader/index.vue
index 7a64615749..6d991bb683 100644
--- a/src/packages/__VUE/uploader/index.vue
+++ b/src/packages/__VUE/uploader/index.vue
@@ -1,32 +1,32 @@
 <template>
   <view class="nut-uploader">
-    <view class="nut-uploader__slot" v-if="$slots.default">
+    <view v-if="$slots.default" class="nut-uploader__slot">
       <slot></slot>
-      <component :is="renderInput" @change="onChange" v-if="Number(maximum) - fileList.length"></component>
+      <component :is="renderInput" v-if="Number(maximum) - fileList.length" @change="onChange"></component>
     </view>
 
-    <view class="nut-uploader__preview" :class="[listType]" v-for="(item, index) in fileList" :key="item.uid">
-      <view class="nut-uploader__preview-img" v-if="listType == 'picture' && !$slots.default">
-        <view class="nut-uploader__preview__progress" v-if="item.status != 'success'">
+    <view v-for="(item, index) in fileList" :key="item.uid" class="nut-uploader__preview" :class="[listType]">
+      <view v-if="listType == 'picture' && !$slots.default" class="nut-uploader__preview-img">
+        <view v-if="item.status != 'success'" class="nut-uploader__preview__progress">
           <template v-if="item.status != 'ready'">
-            <Failure color="#fff" v-if="item.status == 'error'" />
-            <Loading name="loading" color="#fff" v-else />
+            <Failure v-if="item.status == 'error'" color="#fff" />
+            <Loading v-else name="loading" color="#fff" />
           </template>
           <view class="nut-uploader__preview__progress__msg">{{ item.message }}</view>
         </view>
 
-        <view class="close" v-if="isDeletable" @click="onDelete(item, index)">
+        <view v-if="isDeletable" class="close" @click="onDelete(item, index)">
           <slot name="delete-icon"> <Failure /></slot>
         </view>
 
         <img
-          class="nut-uploader__preview-img__c"
-          @click="fileItemClick(item)"
           v-if="item?.type?.includes('image') && item.url"
+          class="nut-uploader__preview-img__c"
           :src="item.url"
+          @click="fileItemClick(item)"
         />
         <view v-else class="nut-uploader__preview-img__file">
-          <view @click="fileItemClick(item)" class="nut-uploader__preview-img__file__name">
+          <view class="nut-uploader__preview-img__file__name" @click="fileItemClick(item)">
             <view class="file__name_tips">{{ item.name }}</view>
           </view>
         </view>
@@ -34,8 +34,8 @@
         <view class="tips">{{ item.name }}</view>
       </view>
 
-      <view class="nut-uploader__preview-list" v-else-if="listType == 'list'">
-        <view @click="fileItemClick(item)" class="nut-uploader__preview-img__file__name" :class="[item.status]">
+      <view v-else-if="listType == 'list'" class="nut-uploader__preview-list">
+        <view class="nut-uploader__preview-img__file__name" :class="[item.status]" @click="fileItemClick(item)">
           <Link class="nut-uploader__preview-img__file__link" />
           <view class="file__name_tips">{{ item.name }}</view>
           <Del
@@ -47,9 +47,9 @@
         </view>
 
         <nut-progress
+          v-if="item.status == 'uploading'"
           size="small"
           :percentage="item.percentage"
-          v-if="item.status == 'uploading'"
           stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
           :show-text="false"
         >
@@ -58,9 +58,9 @@
     </view>
 
     <view
+      v-if="listType == 'picture' && !$slots.default && Number(maximum) - fileList.length"
       class="nut-uploader__upload"
       :class="[listType]"
-      v-if="listType == 'picture' && !$slots.default && Number(maximum) - fileList.length"
     >
       <slot name="upload-icon">
         <Photograph color="#808080" />
diff --git a/src/packages/__VUE/video/demo.vue b/src/packages/__VUE/video/demo.vue
index 34a569d1c2..dc57507f43 100644
--- a/src/packages/__VUE/video/demo.vue
+++ b/src/packages/__VUE/video/demo.vue
@@ -28,7 +28,7 @@
     <nut-cell class="cell">
       <nut-video :source="source1" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <nut-button type="primary" @click="changeVideo" class="m-b">{{ translate('title6') }}</nut-button>
+    <nut-button type="primary" class="m-b" @click="changeVideo">{{ translate('title6') }}</nut-button>
   </div>
 </template>
 
diff --git a/src/packages/__VUE/video/index.vue b/src/packages/__VUE/video/index.vue
index 425ae81170..5dcfc4e3dc 100644
--- a/src/packages/__VUE/video/index.vue
+++ b/src/packages/__VUE/video/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="nut-video" ref="videocon">
+  <div ref="videocon" class="nut-video">
     <video
       ref="root"
       class="nut-video-player"
@@ -13,23 +13,23 @@
     >
       <source :src="source.src" :type="source.type" />
     </video>
-    <div class="nut-video-mask" ref="touchMask" v-if="showToolbox && !isDisabled" @click="play"></div>
+    <div v-if="showToolbox && !isDisabled" ref="touchMask" class="nut-video-mask" @click="play"></div>
     <div
-      class="nut-video-play-btn"
       v-if="showToolbox && !isDisabled"
-      ref="palyBtn"
       v-show="!state.playing"
+      ref="palyBtn"
+      class="nut-video-play-btn"
       @click="play"
     ></div>
     <div
-      class="nut-video-controller"
       v-show="showToolbox && !isDisabled"
+      class="nut-video-controller"
       :class="{ 'nut-video-controller--show': !state.playing, 'nut-video-controller--hide': state.playing }"
     >
       <div class="nut-video-controller__playbtn" @click="play"></div>
       <div class="nut-video-controller__now">{{ videoSet.displayTime }}</div>
       <div class="nut-video-controller__progress">
-        <div class="nut-video-controller__progress-value" ref="progressBar">
+        <div ref="progressBar" class="nut-video-controller__progress-value">
           <div class="buffered" :style="{ width: `${videoSet.loaded}%` }"></div>
           <div
             class="nut-video-controller__ball"
@@ -42,15 +42,15 @@
           >
             <div class="nut-video-controller__ball-move"></div>
           </div>
-          <div class="nut-video-controller__played" ref="playedBar"></div>
+          <div ref="playedBar" class="nut-video-controller__played"></div>
         </div>
       </div>
       <div class="nut-video-controller__total">{{ videoSet.totalTime }}</div>
-      <div class="nut-video-controller__volume" @click="handleMuted" :class="{ muted: state.isMuted }"></div>
+      <div class="nut-video-controller__volume" :class="{ muted: state.isMuted }" @click="handleMuted"></div>
       <div class="nut-video-controller__full" @click="fullScreen"></div>
     </div>
     <!-- 错误弹窗 -->
-    <div class="nut-video-error" v-show="state.isError">
+    <div v-show="state.isError" class="nut-video-error">
       <p class="nut-video-error-tip">{{ translate('errorTip') }}</p>
       <p class="nut-video-error-retry" @click="retry">{{ translate('clickRetry') }}</p>
     </div>