diff --git a/packages/nutui-eslint-config/index.js b/packages/nutui-eslint-config/index.js
index 0a4368b9ce..96b7cba89a 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'
+    'vue/attributes-order': 'off'
   }
 };
diff --git a/src/packages/__VUE/actionsheet/index.taro.vue b/src/packages/__VUE/actionsheet/index.taro.vue
index cea5894e86..489b29c45c 100644
--- a/src/packages/__VUE/actionsheet/index.taro.vue
+++ b/src/packages/__VUE/actionsheet/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :closeOnClickOverlay="closeAbled">
+  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :close-on-click-overlay="closeAbled">
     <view :class="classes">
       <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
       <slot></slot>
diff --git a/src/packages/__VUE/actionsheet/index.vue b/src/packages/__VUE/actionsheet/index.vue
index 6e70e262b1..c6b6bffacc 100644
--- a/src/packages/__VUE/actionsheet/index.vue
+++ b/src/packages/__VUE/actionsheet/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :closeOnClickOverlay="closeAbled">
+  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :close-on-click-overlay="closeAbled">
     <view :class="classes">
       <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
       <slot></slot>
diff --git a/src/packages/__VUE/address/index.vue b/src/packages/__VUE/address/index.vue
index 9b0b51bccc..bbe3d33f60 100644
--- a/src/packages/__VUE/address/index.vue
+++ b/src/packages/__VUE/address/index.vue
@@ -7,7 +7,7 @@
     @click-overlay="clickOverlay"
     @open="closeWay = 'self'"
     v-model:visible="showPopup"
-    :teleportDisable="teleportDisable"
+    :teleport-disable="teleportDisable"
     :teleport="teleport"
   >
     <view class="nut-address">
diff --git a/src/packages/__VUE/addresslist/demo.vue b/src/packages/__VUE/addresslist/demo.vue
index 3034cf4a17..f1b877591a 100644
--- a/src/packages/__VUE/addresslist/demo.vue
+++ b/src/packages/__VUE/addresslist/demo.vue
@@ -13,7 +13,7 @@
     <h2>{{ translate('title1') }}</h2>
     <nut-address-list
       :data="data"
-      long-Press
+      long-press
       :show-bottom-button="false"
       @click-item="clickItem"
       @del-icon="delClick"
@@ -27,7 +27,7 @@
     <h2>{{ translate('title2') }}</h2>
     <nut-address-list
       :data="data"
-      swipeEdition
+      swipe-edition
       show-bottom-button
       @click-item="clickItem"
       @del-icon="delClick"
diff --git a/src/packages/__VUE/addresslist/index.taro.vue b/src/packages/__VUE/addresslist/index.taro.vue
index f7658277d8..4073d1dceb 100644
--- a/src/packages/__VUE/addresslist/index.taro.vue
+++ b/src/packages/__VUE/addresslist/index.taro.vue
@@ -4,8 +4,8 @@
       v-for="(item, index) of dataArray"
       :key="index"
       :item="item"
-      :longPress="longPress"
-      :swipeEdition="swipeEdition"
+      :long-press="longPress"
+      :swipe-edition="swipeEdition"
       @del-icon="clickDelIcon"
       @edit-icon="clickEditIcon"
       @click-item="clickContentItem"
diff --git a/src/packages/__VUE/addresslist/index.vue b/src/packages/__VUE/addresslist/index.vue
index e7f217f110..0aa2747ad0 100644
--- a/src/packages/__VUE/addresslist/index.vue
+++ b/src/packages/__VUE/addresslist/index.vue
@@ -4,8 +4,8 @@
       v-for="(item, index) of dataArray"
       :key="index"
       :item="item"
-      :longPress="longPress"
-      :swipeEdition="swipeEdition"
+      :long-press="longPress"
+      :swipe-edition="swipeEdition"
       @del-icon="clickDelIcon"
       @edit-icon="clickEditIcon"
       @click-item="clickContentItem"
diff --git a/src/packages/__VUE/avatar/demo.vue b/src/packages/__VUE/avatar/demo.vue
index bf8c9c6105..3e90a2f8f7 100644
--- a/src/packages/__VUE/avatar/demo.vue
+++ b/src/packages/__VUE/avatar/demo.vue
@@ -75,7 +75,7 @@
     </nut-cell>
 
     <nut-cell>
-      <nut-avatar-group max-count="3" max-color="#fff" max-bgColor="#498ff2">
+      <nut-avatar-group max-count="3" max-color="#fff" max-bg-color="#498ff2">
         <nut-avatar>
           <img
             src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
@@ -92,7 +92,7 @@
     </nut-cell>
     <h2>{{ translate('title7') }}</h2>
     <nut-cell>
-      <nut-avatar-group max-count="3" zIndex="right" max-content="...">
+      <nut-avatar-group max-count="3" z-index="right" max-content="...">
         <nut-avatar>
           <img
             src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
@@ -119,7 +119,7 @@
       >{{ translate('title9') }}<nut-button @click="addAvatar" size="mini">{{ translate('add') }}</nut-button></h2
     >
     <nut-cell>
-      <nut-avatar-group max-count="4" zIndex="right">
+      <nut-avatar-group max-count="4" z-index="right">
         <nut-avatar v-for="i in avatarCount" :key="i">
           <My v-if="i % 2 == 0" />
           <img
diff --git a/src/packages/__VUE/avatargroup/index.taro.vue b/src/packages/__VUE/avatargroup/index.taro.vue
index b0dcd0ce15..29452e517e 100644
--- a/src/packages/__VUE/avatargroup/index.taro.vue
+++ b/src/packages/__VUE/avatargroup/index.taro.vue
@@ -5,7 +5,7 @@
       v-if="foldCount > 0"
       class="avater-fold"
       :color="maxColor"
-      :bgColor="maxBgColor"
+      :bg-color="maxBgColor"
       :size="size"
       :shape="shape"
       :style="{ magrinLeft: `${span}px` }"
diff --git a/src/packages/__VUE/avatargroup/index.vue b/src/packages/__VUE/avatargroup/index.vue
index d8a0820f27..e25f81b64b 100644
--- a/src/packages/__VUE/avatargroup/index.vue
+++ b/src/packages/__VUE/avatargroup/index.vue
@@ -5,7 +5,7 @@
       v-if="foldCount > 0"
       class="avater-fold"
       :color="maxColor"
-      :bgColor="maxBgColor"
+      :bg-color="maxBgColor"
       :size="size"
       :shape="shape"
       :style="{ magrinLeft: `${span}px` }"
diff --git a/src/packages/__VUE/card/demo.vue b/src/packages/__VUE/card/demo.vue
index abaf27f290..056aebbc35 100644
--- a/src/packages/__VUE/card/demo.vue
+++ b/src/packages/__VUE/card/demo.vue
@@ -5,10 +5,10 @@
       :img-url="state.imgUrl"
       :title="state.title"
       :price="state.price"
-      :vipPrice="state.vipPrice"
-      :shopDesc="state.shopDesc"
+      :vip-price="state.vipPrice"
+      :shop-desc="state.shopDesc"
       :delivery="state.delivery"
-      :shopName="state.shopName"
+      :shop-name="state.shopName"
     >
     </nut-card>
     <h2>{{ translate('customProduct') }}</h2>
@@ -16,10 +16,10 @@
       :img-url="state.imgUrl"
       :title="state.title"
       :price="state.price"
-      :vipPrice="state.vipPrice"
-      :shopDesc="state.shopDesc"
+      :vip-price="state.vipPrice"
+      :shop-desc="state.shopDesc"
       :delivery="state.delivery"
-      :shopName="state.shopName"
+      :shop-name="state.shopName"
     >
       <template #prolist>
         <div class="search_prolist_attr">
@@ -34,10 +34,10 @@
       :img-url="state.imgUrl"
       :title="state.title"
       :price="state.price"
-      :vipPrice="state.vipPrice"
-      :shopDesc="state.shopDesc"
+      :vip-price="state.vipPrice"
+      :shop-desc="state.shopDesc"
       :delivery="state.delivery"
-      :shopName="state.shopName"
+      :shop-name="state.shopName"
     >
       <template #shop-tag>
         <div>{{ translate('customShop') }}</div>
@@ -58,10 +58,10 @@
       :img-url="state.imgUrl"
       :title="state.title"
       :price="state.price"
-      :vipPrice="state.vipPrice"
-      :shopDesc="state.shopDesc"
+      :vip-price="state.vipPrice"
+      :shop-desc="state.shopDesc"
       :delivery="state.delivery"
-      :shopName="state.shopName"
+      :shop-name="state.shopName"
     >
       <template #footer>
         <div class="customize">{{ translate('customContent') }}</div>
diff --git a/src/packages/__VUE/cascader/cascader-item.taro.vue b/src/packages/__VUE/cascader/cascader-item.taro.vue
index 62acd4bc12..83c9ddd7a4 100644
--- a/src/packages/__VUE/cascader/cascader-item.taro.vue
+++ b/src/packages/__VUE/cascader/cascader-item.taro.vue
@@ -3,7 +3,7 @@
     <template v-if="!initLoading && panes.length">
       <nut-tab-pane v-for="(pane, index) in panes" :title="formatTabTitle(pane)" :key="index">
         <view role="menu" class="nut-cascader-pane">
-          <nut-scroll-view :scrollY="true" style="height: 100%">
+          <nut-scroll-view :scroll-y="true" style="height: 100%">
             <template v-for="node in pane.nodes" :key="node.value">
               <view
                 class="nut-cascader-item"
diff --git a/src/packages/__VUE/cascader/demo.vue b/src/packages/__VUE/cascader/demo.vue
index 2c5526ebb7..916af8b27e 100644
--- a/src/packages/__VUE/cascader/demo.vue
+++ b/src/packages/__VUE/cascader/demo.vue
@@ -28,11 +28,11 @@
       :title="translate('addressTip')"
       v-model:visible="demo2.visible"
       v-model="demo2.value"
-      labelKey="text"
+      label-key="text"
       @change="events.change"
       @path-change="events.pathChange"
-      valueKey="text"
-      childrenKey="items"
+      value-key="text"
+      children-key="items"
       :options="demo2.options"
     ></nut-cascader>
 
@@ -50,7 +50,7 @@
       @change="events.change"
       @path-change="events.pathChange"
       lazy
-      :lazyLoad="demo3.lazyLoad"
+      :lazy-load="demo3.lazyLoad"
     ></nut-cascader>
 
     <h2>{{ translate('title3') }}</h2>
@@ -68,7 +68,7 @@
       @path-change="events.pathChange"
       :options="demo4.options"
       lazy
-      :lazyLoad="demo4.lazyLoad"
+      :lazy-load="demo4.lazyLoad"
     ></nut-cascader>
 
     <h2>{{ translate('title4') }}</h2>
@@ -85,7 +85,7 @@
       @change="events.change"
       @path-change="events.pathChange"
       :options="demo5.options"
-      :convertConfig="demo5.convertConfig"
+      :convert-config="demo5.convertConfig"
     ></nut-cascader>
   </div>
 </template>
diff --git a/src/packages/__VUE/cascader/index.taro.vue b/src/packages/__VUE/cascader/index.taro.vue
index e92079038b..edb14b80a1 100644
--- a/src/packages/__VUE/cascader/index.taro.vue
+++ b/src/packages/__VUE/cascader/index.taro.vue
@@ -18,7 +18,7 @@
       <nut-cascader-item
         @change="onChange"
         @path-change="onPathChange"
-        :modelValue="innerValue"
+        :model-value="innerValue"
         :options="options"
         :lazy="lazy"
         :lazy-load="lazyLoad"
@@ -35,7 +35,7 @@
     <nut-cascader-item
       @change="onChange"
       @path-change="onPathChange"
-      :modelValue="innerValue"
+      :model-value="innerValue"
       :options="options"
       :lazy="lazy"
       :lazy-load="lazyLoad"
diff --git a/src/packages/__VUE/cascader/index.vue b/src/packages/__VUE/cascader/index.vue
index b5cc4426b3..fee5a70fe7 100644
--- a/src/packages/__VUE/cascader/index.vue
+++ b/src/packages/__VUE/cascader/index.vue
@@ -16,7 +16,7 @@
       <nut-cascader-item
         @change="onChange"
         @path-change="onPathChange"
-        :modelValue="innerValue"
+        :model-value="innerValue"
         :options="options"
         :lazy="lazy"
         :lazy-load="lazyLoad"
@@ -32,7 +32,7 @@
     <nut-cascader-item
       @change="onChange"
       @path-change="onPathChange"
-      :modelValue="innerValue"
+      :model-value="innerValue"
       :options="options"
       :lazy="lazy"
       :lazy-load="lazyLoad"
diff --git a/src/packages/__VUE/category/demo.vue b/src/packages/__VUE/category/demo.vue
index 1ba3970e65..51b256e824 100644
--- a/src/packages/__VUE/category/demo.vue
+++ b/src/packages/__VUE/category/demo.vue
@@ -2,16 +2,16 @@
   <div class="demo">
     <h2>{{ translate('title1') }}</h2>
     <nut-category :category="category" @change="change">
-      <nut-category-pane :categoryChild="categoryChild1" @on-change="onChange"> </nut-category-pane>
+      <nut-category-pane :category-child="categoryChild1" @on-change="onChange"> </nut-category-pane>
     </nut-category>
     <h2>{{ translate('title2') }}</h2>
     <nut-category :category="category" @change="changeText">
-      <nut-category-pane type="text" :categoryChild="categoryChild2" @on-change="onChange"> </nut-category-pane
+      <nut-category-pane type="text" :category-child="categoryChild2" @on-change="onChange"> </nut-category-pane
     ></nut-category>
 
     <h2>{{ translate('title3') }}</h2>
     <nut-category
-      ><nut-category-pane type="custom" :customCategory="customCategory" @on-change="changeCustom"> </nut-category-pane
+      ><nut-category-pane type="custom" :custom-category="customCategory" @on-change="changeCustom"> </nut-category-pane
     ></nut-category>
   </div>
 </template>
diff --git a/src/packages/__VUE/cell/demo.vue b/src/packages/__VUE/cell/demo.vue
index 544cd05d14..14c7183b5f 100644
--- a/src/packages/__VUE/cell/demo.vue
+++ b/src/packages/__VUE/cell/demo.vue
@@ -55,7 +55,7 @@
     </nut-cell-group>
 
     <h2>{{ translate('displayIcon') }}</h2>
-    <nut-cell :title="translate('name')" :desc="translate('desc')" isLink>
+    <nut-cell :title="translate('name')" :desc="translate('desc')" is-link>
       <template #icon>
         <My />
       </template>
diff --git a/src/packages/__VUE/circleprogress/demo.vue b/src/packages/__VUE/circleprogress/demo.vue
index b6b5a10f32..548d4b4172 100644
--- a/src/packages/__VUE/circleprogress/demo.vue
+++ b/src/packages/__VUE/circleprogress/demo.vue
@@ -6,7 +6,7 @@
     </div>
     <h2>{{ translate('customWidth') }}</h2>
     <div class="demo__piece">
-      <nut-circle-progress progress="50" strokeWidth="10" />
+      <nut-circle-progress progress="50" stroke-width="10" />
     </div>
 
     <h2>{{ translate('Gradient') }}</h2>
diff --git a/src/packages/__VUE/comment/demo.vue b/src/packages/__VUE/comment/demo.vue
index 2d45630e9d..8539b984b4 100644
--- a/src/packages/__VUE/comment/demo.vue
+++ b/src/packages/__VUE/comment/demo.vue
@@ -22,8 +22,8 @@
     <h2>{{ translate('multiRow') }}</h2>
     <nut-cell>
       <nut-comment
-        headerType="complex"
-        imagesRows="multi"
+        header-type="complex"
+        images-rows="multi"
         :images="cmt.images"
         :videos="cmt.videos"
         :info="cmt.info"
@@ -50,7 +50,7 @@
     <h2>{{ translate('additionalReviewd') }}</h2>
     <nut-cell>
       <nut-comment
-        imagesRows="multi"
+        images-rows="multi"
         :images="cmt.images"
         :videos="cmt.videos"
         :info="cmt.info"
diff --git a/src/packages/__VUE/countdown/demo.vue b/src/packages/__VUE/countdown/demo.vue
index b929c10168..ad21df4222 100644
--- a/src/packages/__VUE/countdown/demo.vue
+++ b/src/packages/__VUE/countdown/demo.vue
@@ -2,12 +2,12 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <nut-countdown :endTime="end" @on-end="onend"></nut-countdown>
+      <nut-countdown :end-time="end" @on-end="onend"></nut-countdown>
     </nut-cell>
     <h2>{{ translate('format') }}</h2>
     <nut-cell>
       <nut-countdown
-        :endTime="end"
+        :end-time="end"
         :format="`DD ${translate('day')} HH ${translate('hour')} mm ${translate('minute')} ss ${translate('second')}`"
       />
     </nut-cell>
@@ -15,25 +15,25 @@
     <h2>{{ translate('millisecond') }}</h2>
 
     <nut-cell>
-      <nut-countdown :endTime="end" millisecond format="HH:mm:ss:SS" />
+      <nut-countdown :end-time="end" millisecond format="HH:mm:ss:SS" />
     </nut-cell>
 
     <h2>{{ translate('serverTime') }}</h2>
 
     <nut-cell>
-      <nut-countdown :startTime="serverTime" :endTime="end" />
+      <nut-countdown :start-time="serverTime" :end-time="end" />
     </nut-cell>
 
     <h2>{{ translate('async') }}</h2>
 
     <nut-cell>
-      <nut-countdown :endTime="asyncEnd" />
+      <nut-countdown :end-time="asyncEnd" />
     </nut-cell>
 
     <h2>{{ translate('controlTime') }}</h2>
 
     <nut-cell>
-      <nut-countdown :endTime="end" :paused="paused" @on-paused="onpaused" @on-restart="onrestart" />
+      <nut-countdown :end-time="end" :paused="paused" @on-paused="onpaused" @on-restart="onrestart" />
       <div style="position: absolute; right: 10px; top: 9px">
         <nut-button type="primary" size="small" @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
       </div>
@@ -43,7 +43,7 @@
 
     <nut-cell>
       <span>
-        <nut-countdown v-model="resetTime" :endTime="end">
+        <nut-countdown v-model="resetTime" :end-time="end">
           <div class="countdown-part-box">
             <div class="part-item-symbol">{{ resetTime.d }}{{ translate('day') }}</div>
             <div class="part-item h">{{ resetTime.h }}</div>
@@ -58,7 +58,7 @@
 
     <h2>{{ translate('handleControl') }}</h2>
     <nut-cell>
-      <nut-countdown time="20000" ref="Countdown" :autoStart="false" format="ss:SS" />
+      <nut-countdown time="20000" ref="Countdown" :auto-start="false" format="ss:SS" />
     </nut-cell>
 
     <nut-grid :column-num="3">
diff --git a/src/packages/__VUE/datepicker/demo.vue b/src/packages/__VUE/datepicker/demo.vue
index b157a8a941..c2519a829e 100644
--- a/src/packages/__VUE/datepicker/demo.vue
+++ b/src/packages/__VUE/datepicker/demo.vue
@@ -8,7 +8,7 @@
       :max-date="maxDate"
       @confirm="confirm"
       :is-show-chinese="true"
-      :threeDimensional="false"
+      :three-dimensional="false"
     ></nut-date-picker>
 
     <h2>{{ translate('popupDesc') }}</h2>
@@ -20,7 +20,7 @@
         :max-date="maxDate"
         @confirm="popupConfirm"
         :is-show-chinese="true"
-        :threeDimensional="false"
+        :three-dimensional="false"
       >
         <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..26c20b8566 100644
--- a/src/packages/__VUE/datepicker/index.taro.vue
+++ b/src/packages/__VUE/datepicker/index.taro.vue
@@ -1,18 +1,18 @@
 <template>
   <nut-picker
     v-model="selectedValue"
-    :okText="okText"
-    :cancelText="cancelText"
+    :ok-text="okText"
+    :cancel-text="cancelText"
     @cancel="closeHandler"
     :columns="columns"
     @change="changeHandler"
     :title="title"
     @confirm="confirm"
-    :threeDimensional="threeDimensional"
-    :swipeDuration="swipeDuration"
-    :showToolbar="showToolbar"
-    :visibleOptionNum="visibleOptionNum"
-    :optionHeight="optionHeight"
+    :three-dimensional="threeDimensional"
+    :swipe-duration="swipeDuration"
+    :show-toolbar="showToolbar"
+    :visible-option-num="visibleOptionNum"
+    :option-height="optionHeight"
   >
     <template #top>
       <slot name="top"></slot>
diff --git a/src/packages/__VUE/datepicker/index.vue b/src/packages/__VUE/datepicker/index.vue
index b698bc62b1..5f282873db 100644
--- a/src/packages/__VUE/datepicker/index.vue
+++ b/src/packages/__VUE/datepicker/index.vue
@@ -1,18 +1,18 @@
 <template>
   <nut-picker
     v-model="selectedValue"
-    :okText="okText"
-    :cancelText="cancelText"
+    :ok-text="okText"
+    :cancel-text="cancelText"
     @cancel="closeHandler"
     :columns="columns"
     @change="changeHandler"
     :title="title"
     @confirm="confirm"
-    :threeDimensional="threeDimensional"
-    :swipeDuration="swipeDuration"
-    :showToolbar="showToolbar"
-    :visibleOptionNum="visibleOptionNum"
-    :optionHeight="optionHeight"
+    :three-dimensional="threeDimensional"
+    :swipe-duration="swipeDuration"
+    :show-toolbar="showToolbar"
+    :visible-option-num="visibleOptionNum"
+    :option-height="optionHeight"
   >
     <template #top>
       <slot name="top"></slot>
diff --git a/src/packages/__VUE/elevator/demo.vue b/src/packages/__VUE/elevator/demo.vue
index 3470fcbe1f..79116d2dae 100644
--- a/src/packages/__VUE/elevator/demo.vue
+++ b/src/packages/__VUE/elevator/demo.vue
@@ -9,7 +9,7 @@
       <nut-elevator
         :index-list="dataList2"
         :height="220"
-        :acceptKey="acceptKey"
+        :accept-key="acceptKey"
         @click-item="clickItem"
         @click-index="clickIndex"
       ></nut-elevator>
diff --git a/src/packages/__VUE/ellipsis/demo.vue b/src/packages/__VUE/ellipsis/demo.vue
index da7a17e1db..1b3ba98ee6 100644
--- a/src/packages/__VUE/ellipsis/demo.vue
+++ b/src/packages/__VUE/ellipsis/demo.vue
@@ -22,13 +22,13 @@
 
     <h2>{{ translate('expand') }}</h2>
     <nut-cell>
-      <nut-ellipsis :content="content" direction="start" expandText="展开" collapseText="收起"></nut-ellipsis>
+      <nut-ellipsis :content="content" direction="start" expand-text="展开" collapse-text="收起"></nut-ellipsis>
     </nut-cell>
     <nut-cell>
-      <nut-ellipsis :content="content" direction="middle" expandText="展开" collapseText="收起"></nut-ellipsis>
+      <nut-ellipsis :content="content" direction="middle" expand-text="展开" collapse-text="收起"></nut-ellipsis>
     </nut-cell>
     <nut-cell>
-      <nut-ellipsis :content="content" direction="end" rows="3" expandText="展开" collapseText="收起"></nut-ellipsis>
+      <nut-ellipsis :content="content" direction="end" rows="3" expand-text="展开" collapse-text="收起"></nut-ellipsis>
     </nut-cell>
   </div>
 </template>
diff --git a/src/packages/__VUE/imagepreview/demo.vue b/src/packages/__VUE/imagepreview/demo.vue
index 1e2e26c863..65a0a3b00f 100644
--- a/src/packages/__VUE/imagepreview/demo.vue
+++ b/src/packages/__VUE/imagepreview/demo.vue
@@ -2,11 +2,11 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <nut-image-preview :show="showPreview1" :images="imgData" @close="hideFn(1)" />
-    <nut-cell isLink :title="translate('showPreview')" :showIcon="true" @click="showFn(1)"></nut-cell>
+    <nut-cell is-link :title="translate('showPreview')" :show-icon="true" @click="showFn(1)"></nut-cell>
 
     <h2>{{ translate('withInitNo') }}</h2>
     <nut-image-preview :show="showPreview2" :images="imgData" :init-no="3" @close="hideFn(2)" />
-    <nut-cell isLink :title="translate('withInitNo')" :showIcon="true" @click="showFn(2)"></nut-cell>
+    <nut-cell is-link :title="translate('withInitNo')" :show-icon="true" @click="showFn(2)"></nut-cell>
 
     <h2>{{ translate('withPagination') }}</h2>
     <nut-image-preview
@@ -16,14 +16,14 @@
       pagination-color="red"
       @close="hideFn(3)"
     />
-    <nut-cell isLink :title="translate('withPagination')" :showIcon="true" @click="showFn(3)"></nut-cell>
+    <nut-cell is-link :title="translate('withPagination')" :show-icon="true" @click="showFn(3)"></nut-cell>
 
     <h2>{{ translate('withVideos') }}</h2>
     <nut-image-preview :show="showPreview4" :videos="videoData" :images="imgData" @close="hideFn(4)" />
-    <nut-cell isLink :title="translate('withVideos')" :showIcon="true" @click="showFn(4)"></nut-cell>
+    <nut-cell is-link :title="translate('withVideos')" :show-icon="true" @click="showFn(4)"></nut-cell>
 
     <h2>{{ translate('functionalCall') }}</h2>
-    <nut-cell isLink :title="translate('functionalCall')" :showIcon="true" @click="fnShow"></nut-cell>
+    <nut-cell is-link :title="translate('functionalCall')" :show-icon="true" @click="fnShow"></nut-cell>
   </div>
 </template>
 
diff --git a/src/packages/__VUE/imagepreview/index.taro.vue b/src/packages/__VUE/imagepreview/index.taro.vue
index beeaa8ebae..ca0a644503 100644
--- a/src/packages/__VUE/imagepreview/index.taro.vue
+++ b/src/packages/__VUE/imagepreview/index.taro.vue
@@ -6,7 +6,7 @@
         :auto-play="autoplay"
         class="nut-image-preview-swiper"
         :loop="isLoop"
-        :is-preventDefault="false"
+        :is-prevent-default="false"
         direction="horizontal"
         @change="setActive"
         :init-page="initNo"
diff --git a/src/packages/__VUE/imagepreview/index.vue b/src/packages/__VUE/imagepreview/index.vue
index e38ddf6a27..e7e51c972a 100644
--- a/src/packages/__VUE/imagepreview/index.vue
+++ b/src/packages/__VUE/imagepreview/index.vue
@@ -2,7 +2,7 @@
   <nut-popup
     pop-class="nut-image-preview-custom-pop"
     v-model:visible="showPop"
-    :teleportDisable="teleportDisable"
+    :teleport-disable="teleportDisable"
     :teleport="teleport"
     @closed="onClose"
     lock-scroll
@@ -13,7 +13,7 @@
         :auto-play="autoplay"
         class="nut-image-preview-swiper"
         :loop="isLoop"
-        :is-preventDefault="false"
+        :is-prevent-default="false"
         direction="horizontal"
         @change="setActive"
         :init-page="initNo"
@@ -25,14 +25,14 @@
           :key="index"
           :video="index < videos.length ? item : {}"
           :image="index >= videos.length ? item : {}"
-          :rootHeight="rootHeight"
-          :rootWidth="rootWidth"
+          :root-height="rootHeight"
+          :root-width="rootWidth"
           :show="showPop"
           :init-no="active + 1"
           @close="onClose"
           :content-close="contentClose"
-          :maxZoom="maxZoom"
-          :minZoom="minZoom"
+          :max-zoom="maxZoom"
+          :min-zoom="minZoom"
         ></image-preview-item>
       </nut-swiper>
     </view>
diff --git a/src/packages/__VUE/input/demo.vue b/src/packages/__VUE/input/demo.vue
index 2a5616eb2b..e1783d23d6 100644
--- a/src/packages/__VUE/input/demo.vue
+++ b/src/packages/__VUE/input/demo.vue
@@ -12,15 +12,15 @@
     <nut-input :placeholder="translate('readonly')" v-model="state.readonly" readonly />
     <nut-input :placeholder="translate('disabled')" v-model="state.disabled" disabled />
     <h2>{{ translate('title3') }}</h2>
-    <nut-input v-model="state.clear" :placeholder="translate('clear')" clearable clearSize="14" />
+    <nut-input v-model="state.clear" :placeholder="translate('clear')" clearable clear-size="14" />
     <nut-input
       v-model="state.clear2"
       :placeholder="translate('clear2')"
       clearable
-      clearSize="14"
+      clear-size="14"
       show-word-limit
       max-length="50"
-      :showClearIcon="true"
+      :show-clear-icon="true"
     >
       <template #clear>
         <Close width="12" height="12" @click="clearValue"></Close>
diff --git a/src/packages/__VUE/input/index.taro.vue b/src/packages/__VUE/input/index.taro.vue
index 344c75bdb3..bc413121d1 100644
--- a/src/packages/__VUE/input/index.taro.vue
+++ b/src/packages/__VUE/input/index.taro.vue
@@ -17,7 +17,7 @@
             :disabled="disabled"
             :readonly="readonly"
             :value="modelValue"
-            :formatTrigger="formatTrigger"
+            :format-trigger="formatTrigger"
             :autofocus="autofocus ? true : undefined"
             :enterkeyhint="confirmType"
             @input="onInput"
diff --git a/src/packages/__VUE/input/index.vue b/src/packages/__VUE/input/index.vue
index 1b37485590..a1d9a6b21a 100644
--- a/src/packages/__VUE/input/index.vue
+++ b/src/packages/__VUE/input/index.vue
@@ -16,7 +16,7 @@
             :disabled="disabled"
             :readonly="readonly"
             :value="modelValue"
-            :formatTrigger="formatTrigger"
+            :format-trigger="formatTrigger"
             :autofocus="autofocus"
             :enterkeyhint="confirmType"
             @input="onInput"
diff --git a/src/packages/__VUE/invoice/demo.vue b/src/packages/__VUE/invoice/demo.vue
index 4dcce89a80..884a9dc448 100644
--- a/src/packages/__VUE/invoice/demo.vue
+++ b/src/packages/__VUE/invoice/demo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo full">
     <h2>{{ translate('basic') }}</h2>
-    <nut-invoice :data="data" :formValue="formValue" @on-submit="submit"></nut-invoice>
+    <nut-invoice :data="data" :form-value="formValue" @on-submit="submit"></nut-invoice>
   </div>
 </template>
 
diff --git a/src/packages/__VUE/list/demo.vue b/src/packages/__VUE/list/demo.vue
index cc046a43da..db3393a706 100644
--- a/src/packages/__VUE/list/demo.vue
+++ b/src/packages/__VUE/list/demo.vue
@@ -2,7 +2,7 @@
   <div class="demo demo-list">
     <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <nut-list :listData="count" @scroll-bottom="handleScroll">
+      <nut-list :list-data="count" @scroll-bottom="handleScroll">
         <template #default="{ index }">
           <div class="list-item">
             {{ index }}
diff --git a/src/packages/__VUE/menuitem/index.taro.vue b/src/packages/__VUE/menuitem/index.taro.vue
index c58f48a64d..74b0d2fbb0 100644
--- a/src/packages/__VUE/menuitem/index.taro.vue
+++ b/src/packages/__VUE/menuitem/index.taro.vue
@@ -10,14 +10,14 @@
     </view>
     <nut-popup
       :style="{ position: 'absolute' }"
-      :overlayStyle="{ position: 'absolute' }"
+      :overlay-style="{ position: 'absolute' }"
       v-bind="$attrs"
       v-model:visible="state.showPopup"
       :position="parent.props.direction === 'down' ? 'top' : 'bottom'"
       :duration="parent.props.duration"
       :destroy-on-close="false"
       :overlay="parent.props.overlay"
-      :lockScroll="parent.props.lockScroll"
+      :lock-scroll="parent.props.lockScroll"
       @closed="handleClose"
       :close-on-click-overlay="parent.props.closeOnClickOverlay"
     >
diff --git a/src/packages/__VUE/menuitem/index.vue b/src/packages/__VUE/menuitem/index.vue
index c306440479..1e537e986b 100644
--- a/src/packages/__VUE/menuitem/index.vue
+++ b/src/packages/__VUE/menuitem/index.vue
@@ -9,7 +9,7 @@
     </div>
     <nut-popup
       :style="{ position: 'absolute' }"
-      :overlayStyle="{ position: 'absolute' }"
+      :overlay-style="{ position: 'absolute' }"
       v-bind="$attrs"
       v-model:visible="state.showPopup"
       :position="parent.props.direction === 'down' ? 'top' : 'bottom'"
@@ -17,8 +17,8 @@
       :destroy-on-close="false"
       :overlay="parent.props.overlay"
       @closed="handleClose"
-      :lockScroll="parent.props.lockScroll"
-      :teleportDisable="false"
+      :lock-scroll="parent.props.lockScroll"
+      :teleport-disable="false"
       :close-on-click-overlay="parent.props.closeOnClickOverlay"
     >
       <view class="nut-menu-item__content nut-menu-item__overflow">
diff --git a/src/packages/__VUE/navbar/demo.vue b/src/packages/__VUE/navbar/demo.vue
index e384030727..e9b5f06579 100644
--- a/src/packages/__VUE/navbar/demo.vue
+++ b/src/packages/__VUE/navbar/demo.vue
@@ -25,7 +25,7 @@
       @on-click-icon="icon"
       @on-click-right="rightClick"
       :title="translate('navTitle3')"
-      :titleIcon="true"
+      :title-icon="true"
       :desc="translate('desc2')"
     >
       <template #title-icon>
diff --git a/src/packages/__VUE/noticebar/demo.vue b/src/packages/__VUE/noticebar/demo.vue
index f926e7c38d..0874c4489e 100644
--- a/src/packages/__VUE/noticebar/demo.vue
+++ b/src/packages/__VUE/noticebar/demo.vue
@@ -33,7 +33,7 @@
         direction="vertical"
         :list="horseLamp1"
         :speed="10"
-        :standTime="1000"
+        :stand-time="1000"
         @click="go"
         :close-mode="true"
       ></nut-noticebar>
@@ -41,11 +41,17 @@
 
     <h2>{{ translate('complexAm') }}</h2>
     <div class="interstroll-list">
-      <nut-noticebar direction="vertical" :list="data1" :speed="10" :standTime="2000" :complexAm="true"></nut-noticebar>
+      <nut-noticebar
+        direction="vertical"
+        :list="data1"
+        :speed="10"
+        :stand-time="2000"
+        :complex-am="true"
+      ></nut-noticebar>
     </div>
     <h2>{{ translate('customAm') }}</h2>
     <div class="interstroll-list">
-      <nut-noticebar direction="vertical" :height="50" :speed="10" :standTime="1000" :list="[]" @close="go">
+      <nut-noticebar direction="vertical" :height="50" :speed="10" :stand-time="1000" :list="[]" @close="go">
         <div
           class="custom-item"
           :data-index="index"
@@ -59,7 +65,7 @@
 
     <h2>{{ translate('customRightIcon') }}</h2>
     <div class="interstroll-list">
-      <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :standTime="1000">
+      <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :stand-time="1000">
         <template #right-icon>
           <Fabulous />
         </template>
diff --git a/src/packages/__VUE/notify/demo.vue b/src/packages/__VUE/notify/demo.vue
index 274046fcdb..aaa33aa141 100644
--- a/src/packages/__VUE/notify/demo.vue
+++ b/src/packages/__VUE/notify/demo.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="demo">
     <nut-cell-group :title="translate('basic')">
-      <nut-cell is-Link @click="baseNotify(translate('basic'))">{{ translate('basic') }}</nut-cell>
+      <nut-cell is-link @click="baseNotify(translate('basic'))">{{ translate('basic') }}</nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('t1')">
-      <nut-cell is-Link @click="primaryNotify(translate('primaryNotify'))">{{ translate('primaryNotify') }}</nut-cell>
-      <nut-cell is-Link @click="successNotify(translate('successNotify'))">{{ translate('successNotify') }}</nut-cell>
-      <nut-cell is-Link @click="errorNotify(translate('errorNotify'))">{{ translate('errorNotify') }}</nut-cell>
-      <nut-cell is-Link @click="warningNotify(translate('warningNotify'))">{{ translate('warningNotify') }}</nut-cell>
+      <nut-cell is-link @click="primaryNotify(translate('primaryNotify'))">{{ translate('primaryNotify') }}</nut-cell>
+      <nut-cell is-link @click="successNotify(translate('successNotify'))">{{ translate('successNotify') }}</nut-cell>
+      <nut-cell is-link @click="errorNotify(translate('errorNotify'))">{{ translate('errorNotify') }}</nut-cell>
+      <nut-cell is-link @click="warningNotify(translate('warningNotify'))">{{ translate('warningNotify') }}</nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('t2')">
-      <nut-cell is-Link @click="cusBgNotify(translate('cusBgNotify'))"> {{ translate('cusBgNotify') }} </nut-cell>
-      <nut-cell is-Link @click="timeNotify(translate('t3'))"> {{ translate('t3') }} </nut-cell>
-      <nut-cell is-Link @click="positionNotify(translate('cusPostion'))"> {{ translate('cusPostion') }} </nut-cell>
+      <nut-cell is-link @click="cusBgNotify(translate('cusBgNotify'))"> {{ translate('cusBgNotify') }} </nut-cell>
+      <nut-cell is-link @click="timeNotify(translate('t3'))"> {{ translate('t3') }} </nut-cell>
+      <nut-cell is-link @click="positionNotify(translate('cusPostion'))"> {{ translate('cusPostion') }} </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('useTemplate')">
-      <nut-cell is-Link @click="onClick">{{ translate('useTemplate') }}</nut-cell>
+      <nut-cell is-link @click="onClick">{{ translate('useTemplate') }}</nut-cell>
       <nut-notify v-model:visible="show" :duration="2000">
         <span>Content</span>
       </nut-notify>
diff --git a/src/packages/__VUE/notify/index.vue b/src/packages/__VUE/notify/index.vue
index 8964f8cbfb..5a167ccdbe 100644
--- a/src/packages/__VUE/notify/index.vue
+++ b/src/packages/__VUE/notify/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <nut-popup v-model:visible="isShowPopup" :position="position" :overlay="false" :teleportDisable="teleportDisable">
+  <nut-popup v-model:visible="isShowPopup" :position="position" :overlay="false" :teleport-disable="teleportDisable">
     <div
       :class="['nut-notify', `nut-notify--${type}`, className]"
       :style="{ color: color, background: background }"
diff --git a/src/packages/__VUE/numberkeyboard/demo.vue b/src/packages/__VUE/numberkeyboard/demo.vue
index e902d1e894..7e39b6fb7f 100644
--- a/src/packages/__VUE/numberkeyboard/demo.vue
+++ b/src/packages/__VUE/numberkeyboard/demo.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="demo">
-    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(1)" :title="translate('basic')"></nut-cell>
+    <nut-cell :is-link="true" @touchstart.stop="showKeyBoard(1)" :title="translate('basic')"></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 :is-link="true" @touchstart.stop="showKeyBoard(2)" :title="translate('sidebar')"></nut-cell>
     <nut-number-keyboard
       type="rightColumn"
       v-model:visible="visible2"
@@ -14,11 +14,11 @@
       @blur="onBlur(2)"
     >
     </nut-number-keyboard>
-    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(3)" :title="translate('randomKeyOrder')"></nut-cell>
+    <nut-cell :is-link="true" @touchstart.stop="showKeyBoard(3)" :title="translate('randomKeyOrder')"></nut-cell>
     <nut-number-keyboard
       type="rightColumn"
       v-model:visible="visible3"
-      :randomKeys="true"
+      :random-keys="true"
       :custom-key="customKey1"
       @input="input"
       @close="close(3)"
@@ -26,7 +26,7 @@
     >
     </nut-number-keyboard>
 
-    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(4)" :title="translate('withTitle')"></nut-cell>
+    <nut-cell :is-link="true" @touchstart.stop="showKeyBoard(4)" :title="translate('withTitle')"></nut-cell>
     <nut-number-keyboard
       :title="translate('title')"
       v-model:visible="visible4"
@@ -37,7 +37,7 @@
     >
     </nut-number-keyboard>
 
-    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(6)" :title="translate('idNumberKeyboard')"></nut-cell>
+    <nut-cell :is-link="true" @touchstart.stop="showKeyBoard(6)" :title="translate('idNumberKeyboard')"></nut-cell>
     <nut-number-keyboard
       v-model:visible="visible6"
       :custom-key="customKey3"
@@ -47,7 +47,7 @@
     >
     </nut-number-keyboard>
     <nut-cell
-      :isLink="true"
+      :is-link="true"
       desc-text-align="left"
       @touchstart.stop="showKeyBoard(5)"
       :desc="value"
diff --git a/src/packages/__VUE/numberkeyboard/index.taro.vue b/src/packages/__VUE/numberkeyboard/index.taro.vue
index cef250c135..a38c70c510 100644
--- a/src/packages/__VUE/numberkeyboard/index.taro.vue
+++ b/src/packages/__VUE/numberkeyboard/index.taro.vue
@@ -2,7 +2,7 @@
   <nut-popup
     v-model:visible="show"
     position="bottom"
-    :popClass="popClass"
+    :pop-class="popClass"
     :overlay="overlay"
     @click-overlay="closeBoard()"
     overlay-class="nut-number-keyboard-overlay"
diff --git a/src/packages/__VUE/numberkeyboard/index.vue b/src/packages/__VUE/numberkeyboard/index.vue
index 9659ef6d7a..dee780d771 100644
--- a/src/packages/__VUE/numberkeyboard/index.vue
+++ b/src/packages/__VUE/numberkeyboard/index.vue
@@ -1,6 +1,12 @@
 <template>
   <div ref="root">
-    <nut-popup v-model:visible="show" position="bottom" :popClass="popClass" :overlay="false" :teleportDisable="false">
+    <nut-popup
+      v-model:visible="show"
+      position="bottom"
+      :pop-class="popClass"
+      :overlay="false"
+      :teleport-disable="false"
+    >
       <div class="nut-number-keyboard">
         <div class="nut-number-keyboard__header" v-if="title">
           <h3 class="nut-number-keyboard__title">{{ title }}</h3>
diff --git a/src/packages/__VUE/picker/demo.vue b/src/packages/__VUE/picker/demo.vue
index b10ec1599b..845382d8f8 100644
--- a/src/packages/__VUE/picker/demo.vue
+++ b/src/packages/__VUE/picker/demo.vue
@@ -39,7 +39,7 @@
       v-model="selectedTileValue"
       :columns="columns"
       :title="translate('chooseCity')"
-      :threeDimensional="false"
+      :three-dimensional="false"
       @confirm="confirm"
     >
     </nut-picker>
diff --git a/src/packages/__VUE/picker/index.taro.vue b/src/packages/__VUE/picker/index.taro.vue
index dba9a86619..30ea085bc2 100644
--- a/src/packages/__VUE/picker/index.taro.vue
+++ b/src/packages/__VUE/picker/index.taro.vue
@@ -14,11 +14,11 @@
     <!-- Taro 下转换成 微信小程序 -->
     <picker-view
       v-if="ENV != ENV_TYPE.WEB"
-      :indicatorStyle="`height:${optionHeight}px`"
+      :indicator-style="`height:${optionHeight}px`"
       :value="defaultIndexes"
       :style="pickerViewStyles"
       v-bind="$attrs"
-      :immediateChange="true"
+      :immediate-change="true"
       @change="tileChange"
       @pickstart="handlePickstart"
       @pickend="handlePickend"
@@ -26,7 +26,7 @@
       <picker-view-column
         v-for="(column, columnIndex) in columnsList"
         :key="columnIndex"
-        :filedNames="columnFieldNames"
+        :filed-names="columnFieldNames"
       >
         <view
           class="nut-picker-roller-item-tarotile"
@@ -47,13 +47,13 @@
         <nut-picker-column
           :ref="swipeRef"
           :column="column"
-          :columnsType="columnsType"
-          :filedNames="columnFieldNames"
+          :columns-type="columnsType"
+          :filed-names="columnFieldNames"
           :value="defaultValues[columnIndex]"
-          :threeDimensional="false"
-          :swipeDuration="swipeDuration"
-          :visibleOptionNum="visibleOptionNum"
-          :optionHeight="optionHeight"
+          :three-dimensional="false"
+          :swipe-duration="swipeDuration"
+          :visible-option-num="visibleOptionNum"
+          :option-height="optionHeight"
           @change="
             (option: any) => {
               changeHandler(columnIndex, option);
diff --git a/src/packages/__VUE/picker/index.vue b/src/packages/__VUE/picker/index.vue
index 6b6affd5b7..42a915eb43 100644
--- a/src/packages/__VUE/picker/index.vue
+++ b/src/packages/__VUE/picker/index.vue
@@ -13,13 +13,13 @@
         <nut-picker-column
           :ref="swipeRef"
           :column="column"
-          :columnsType="columnsType"
-          :fieldNames="columnFieldNames"
+          :columns-type="columnsType"
+          :field-names="columnFieldNames"
           :value="defaultValues && defaultValues[columnIndex]"
-          :threeDimensional="threeDimensional"
-          :swipeDuration="swipeDuration"
-          :visibleOptionNum="visibleOptionNum"
-          :optionHeight="optionHeight"
+          :three-dimensional="threeDimensional"
+          :swipe-duration="swipeDuration"
+          :visible-option-num="visibleOptionNum"
+          :option-height="optionHeight"
           @change="
             (option: any) => {
               changeHandler(columnIndex, option);
diff --git a/src/packages/__VUE/popover/demo.vue b/src/packages/__VUE/popover/demo.vue
index fe89ef1ffe..e34e47e538 100644
--- a/src/packages/__VUE/popover/demo.vue
+++ b/src/packages/__VUE/popover/demo.vue
@@ -76,7 +76,7 @@
 
     <nut-popover
       v-model:visible="customPositon"
-      targetId="pickerTarget"
+      target-id="pickerTarget"
       :location="curPostion"
       theme="dark"
       :list="positionList"
@@ -89,14 +89,14 @@
     </nut-button>
     <nut-popover
       v-model:visible="customTarget"
-      targetId="popid"
+      target-id="popid"
       :list="iconItemList"
       location="top-start"
     ></nut-popover>
 
     <h2>{{ translate('contentColor') }}</h2>
 
-    <nut-popover v-model:visible="customColor" :list="iconItemList" location="right-start" bgColor="#f00" theme="dark">
+    <nut-popover v-model:visible="customColor" :list="iconItemList" location="right-start" bg-color="#f00" theme="dark">
       <template #reference>
         <nut-button type="primary" shape="square">{{ translate('contentColor') }}</nut-button>
       </template>
diff --git a/src/packages/__VUE/popover/index.taro.vue b/src/packages/__VUE/popover/index.taro.vue
index af5cb54614..e7f28da505 100644
--- a/src/packages/__VUE/popover/index.taro.vue
+++ b/src/packages/__VUE/popover/index.taro.vue
@@ -9,16 +9,16 @@
   ></view>
   <view :class="['nut-popover', `nut-popover--${theme}`, `${customClass}`]" :style="popoverstyles" ref="popoverbox">
     <nut-popup
-      :popClass="`nut-popover-content nut-popover-content--${location}`"
+      :pop-class="`nut-popover-content nut-popover-content--${location}`"
       :style="customStyle"
       v-model:visible="showPopup"
       position=""
       transition="nut-popover"
       :overlay="overlay"
       :duration="duration"
-      :overlayStyle="overlayStyle"
-      :overlayClass="overlayClass"
-      :closeOnClickOverlay="closeOnClickOverlay"
+      :overlay-style="overlayStyle"
+      :overlay-class="overlayClass"
+      :close-on-click-overlay="closeOnClickOverlay"
     >
       <view ref="popoverContentRef" :id="'popoverContentRef' + refRandomId" class="nut-popover-content-group">
         <view :class="popoverArrow" v-if="showArrow" :style="popoverArrowStyle"> </view>
diff --git a/src/packages/__VUE/popover/index.vue b/src/packages/__VUE/popover/index.vue
index 44396d4115..5ddf9336b6 100644
--- a/src/packages/__VUE/popover/index.vue
+++ b/src/packages/__VUE/popover/index.vue
@@ -4,16 +4,16 @@
   ></div>
   <view :class="['nut-popover', `nut-popover--${theme}`, `${customClass}`]" :style="getRootPosition">
     <nut-popup
-      :popClass="`nut-popover-content nut-popover-content--${location}`"
+      :pop-class="`nut-popover-content nut-popover-content--${location}`"
       :style="customStyle"
       v-model:visible="showPopup"
       position=""
       transition="nut-popover"
       :overlay="overlay"
       :duration="duration"
-      :overlayStyle="overlayStyle"
-      :overlayClass="overlayClass"
-      :closeOnClickOverlay="closeOnClickOverlay"
+      :overlay-style="overlayStyle"
+      :overlay-class="overlayClass"
+      :close-on-click-overlay="closeOnClickOverlay"
     >
       <view ref="popoverContentRef" class="nut-popover-content-group">
         <view :class="popoverArrow" v-if="showArrow" :style="popoverArrowStyle"> </view>
diff --git a/src/packages/__VUE/pullrefresh/demo.vue b/src/packages/__VUE/pullrefresh/demo.vue
index 8545134c4d..f9d4a48910 100644
--- a/src/packages/__VUE/pullrefresh/demo.vue
+++ b/src/packages/__VUE/pullrefresh/demo.vue
@@ -9,9 +9,9 @@
       <nut-tab-pane :title="translate('customTxt')">
         <nut-pull-refresh
           v-model="refresh2"
-          :loosingTxt="translate('loose')"
-          :loadingTxt="translate('load')"
-          :completeTxt="translate('ok')"
+          :loosing-txt="translate('loose')"
+          :loading-txt="translate('load')"
+          :complete-txt="translate('ok')"
           @refresh="refreshFun"
         >
           <template #pulling>
diff --git a/src/packages/__VUE/range/demo.vue b/src/packages/__VUE/range/demo.vue
index 9db718ee4b..b6b1702afe 100644
--- a/src/packages/__VUE/range/demo.vue
+++ b/src/packages/__VUE/range/demo.vue
@@ -58,15 +58,21 @@
     </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" @change="onChange" :marks="marks" :hidden-range="true"></nut-range>
     </nut-cell>
     <nut-cell class="cell">
-      <nut-range range v-model="value13" @change="onChange" :marks="marks" :hiddenRange="true"></nut-range>
+      <nut-range range v-model="value13" @change="onChange" :marks="marks" :hidden-range="true"></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"
+          @change="onChange"
+          :vertical="true"
+          :marks="marks"
+          :hidden-range="true"
+        ></nut-range>
       </view>
       <view class="div">
         <nut-range
@@ -75,7 +81,7 @@
           @change="onChange"
           :vertical="true"
           :marks="marks"
-          :hiddenRange="true"
+          :hidden-range="true"
         ></nut-range>
       </view>
     </nut-cell>
diff --git a/src/packages/__VUE/shortpassword/index.vue b/src/packages/__VUE/shortpassword/index.vue
index df1aa12531..7653bf783a 100644
--- a/src/packages/__VUE/shortpassword/index.vue
+++ b/src/packages/__VUE/shortpassword/index.vue
@@ -12,7 +12,7 @@
       @click-close-icon="close"
       :close-on-click-overlay="closeOnClickOverlay"
       @click-overlay="close"
-      :teleportDisable="false"
+      :teleport-disable="false"
     >
       <view class="nut-short-password-title">{{ title || translate('title') }}</view>
       <view class="nut-short-password-subtitle">{{ desc || translate('desc') }}</view>
diff --git a/src/packages/__VUE/signature/demo.vue b/src/packages/__VUE/signature/demo.vue
index 6ecaa50bd2..fbf834d456 100644
--- a/src/packages/__VUE/signature/demo.vue
+++ b/src/packages/__VUE/signature/demo.vue
@@ -10,8 +10,8 @@
       <nut-signature
         @confirm="confirm2"
         @clear="clear2"
-        :lineWidth="lineWidth"
-        :strokeStyle="strokeStyle"
+        :line-width="lineWidth"
+        :stroke-style="strokeStyle"
         @end="end"
       ></nut-signature>
       <img :src="demoSignUrl2" class="demoSignUrl" v-if="demoSignUrl2" />
diff --git a/src/packages/__VUE/skeleton/demo.vue b/src/packages/__VUE/skeleton/demo.vue
index 80feb26e41..4db4cb30e1 100644
--- a/src/packages/__VUE/skeleton/demo.vue
+++ b/src/packages/__VUE/skeleton/demo.vue
@@ -9,7 +9,7 @@
     <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
 
     <h2>{{ translate('title1') }}</h2>
-    <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="3"> </nut-skeleton>
+    <nut-skeleton width="250px" height="15px" title animated avatar avatar-size="60px" row="3"> </nut-skeleton>
 
     <h2>{{ translate('title2') }}</h2>
     <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
diff --git a/src/packages/__VUE/sku/components/SkuHeader.taro.vue b/src/packages/__VUE/sku/components/SkuHeader.taro.vue
index 8e3522b0be..474c0f3353 100644
--- a/src/packages/__VUE/sku/components/SkuHeader.taro.vue
+++ b/src/packages/__VUE/sku/components/SkuHeader.taro.vue
@@ -6,7 +6,7 @@
       <template v-if="getSlots('sku-header-price')">
         <slot name="sku-header-price"></slot>
       </template>
-      <nut-price v-else :price="goods.price" :needSymbol="true" :thousands="false"> </nut-price>
+      <nut-price v-else :price="goods.price" :need-symbol="true" :thousands="false"> </nut-price>
 
       <template v-if="getSlots('sku-header-extra')">
         <slot name="sku-header-extra"></slot>
diff --git a/src/packages/__VUE/sku/components/SkuHeader.vue b/src/packages/__VUE/sku/components/SkuHeader.vue
index 385078ee58..8c70720801 100644
--- a/src/packages/__VUE/sku/components/SkuHeader.vue
+++ b/src/packages/__VUE/sku/components/SkuHeader.vue
@@ -5,7 +5,7 @@
       <template v-if="getSlots('sku-header-price')">
         <slot name="sku-header-price"></slot>
       </template>
-      <nut-price v-else :price="goods.price" :needSymbol="true" :thousands="false"> </nut-price>
+      <nut-price v-else :price="goods.price" :need-symbol="true" :thousands="false"> </nut-price>
 
       <template v-if="getSlots('sku-header-extra')">
         <slot name="sku-header-extra"></slot>
diff --git a/src/packages/__VUE/sku/demo.vue b/src/packages/__VUE/sku/demo.vue
index 1e5a8e0481..750417435c 100644
--- a/src/packages/__VUE/sku/demo.vue
+++ b/src/packages/__VUE/sku/demo.vue
@@ -25,9 +25,9 @@
       v-model:visible="notSell"
       :sku="skuData"
       :goods="goodsInfo"
-      :btnExtraText="btnExtraText"
+      :btn-extra-text="btnExtraText"
       @change-stepper="changeStepper"
-      :btnOptions="['buy', 'cart']"
+      :btn-options="['buy', 'cart']"
       @select-sku="selectSku"
     >
       <template #sku-operate>
@@ -42,12 +42,12 @@
       v-model:visible="customStepper"
       :sku="skuData"
       :goods="goodsInfo"
-      :stepperMax="7"
-      :stepperMin="2"
-      :stepperExtraText="stepperExtraText"
+      :stepper-max="7"
+      :stepper-min="2"
+      :stepper-extra-text="stepperExtraText"
       @change-stepper="changeStepper"
       @over-limit="overLimit"
-      :btnOptions="['buy', 'cart']"
+      :btn-options="['buy', 'cart']"
       @select-sku="selectSku"
       @click-btn-operate="clickBtnOperate"
       @close="close"
@@ -57,13 +57,13 @@
       v-model:visible="customBySlot"
       :sku="skuData"
       :goods="goodsInfo"
-      :btnOptions="['buy', 'cart']"
+      :btn-options="['buy', 'cart']"
       @select-sku="selectSku"
       @click-btn-operate="clickBtnOperate"
     >
       <template #sku-header-price>
         <div>
-          <nut-price :price="goodsInfo.price" :needSymbol="true" :thousands="false"> </nut-price>
+          <nut-price :price="goodsInfo.price" :need-symbol="true" :thousands="false"> </nut-price>
           <span class="tag"></span>
         </div>
       </template>
diff --git a/src/packages/__VUE/sku/index.taro.vue b/src/packages/__VUE/sku/index.taro.vue
index cd5e3c4d41..846e4c5f86 100644
--- a/src/packages/__VUE/sku/index.taro.vue
+++ b/src/packages/__VUE/sku/index.taro.vue
@@ -31,10 +31,10 @@
         <sku-stepper
           v-if="!getSlots('sku-stepper')"
           :goods="goods"
-          :stepperTitle="stepperTitle || translate('buyNumber')"
-          :stepperMax="stepperMax"
-          :stepperMin="stepperMin"
-          :stepperExtraText="stepperExtraText"
+          :stepper-title="stepperTitle || translate('buyNumber')"
+          :stepper-max="stepperMax"
+          :stepper-min="stepperMin"
+          :stepper-extra-text="stepperExtraText"
           @add="add"
           @reduce="reduce"
           @change-stepper="changeStepper"
@@ -45,11 +45,11 @@
       </view>
 
       <sku-operate
-        :btnExtraText="btnExtraText"
-        :btnOptions="btnOptions"
-        :buyText="buyText || translate('buyNow')"
-        :addCartText="addCartText || translate('addToCart')"
-        :confirmText="confirmText || translate('confirm')"
+        :btn-extra-text="btnExtraText"
+        :btn-options="btnOptions"
+        :buy-text="buyText || translate('buyNow')"
+        :add-cart-text="addCartText || translate('addToCart')"
+        :confirm-text="confirmText || translate('confirm')"
         @click-btn-operate="clickBtnOperate"
       >
         <template #operate-btn v-if="getSlots('sku-operate')">
diff --git a/src/packages/__VUE/sku/index.vue b/src/packages/__VUE/sku/index.vue
index 8b420ffeb8..01239c2071 100644
--- a/src/packages/__VUE/sku/index.vue
+++ b/src/packages/__VUE/sku/index.vue
@@ -8,7 +8,7 @@
     @click-overlay="closePopup('overlay')"
     @close="closePopup('close')"
     style="height: 75%"
-    :teleportDisable="teleportDisable"
+    :teleport-disable="teleportDisable"
     :teleport="teleport"
   >
     <view class="nut-sku">
@@ -33,10 +33,10 @@
         <sku-stepper
           v-if="!getSlots('sku-stepper')"
           :goods="goods"
-          :stepperTitle="stepperTitle || translate('buyNumber')"
-          :stepperMax="stepperMax"
-          :stepperMin="stepperMin"
-          :stepperExtraText="stepperExtraText"
+          :stepper-title="stepperTitle || translate('buyNumber')"
+          :stepper-max="stepperMax"
+          :stepper-min="stepperMin"
+          :stepper-extra-text="stepperExtraText"
           @add="add"
           @reduce="reduce"
           @change-stepper="changeStepper"
@@ -47,11 +47,11 @@
       </view>
 
       <sku-operate
-        :btnOptions="btnOptions"
-        :btnExtraText="btnExtraText"
-        :buyText="buyText || translate('buyNow')"
-        :addCartText="addCartText || translate('addToCart')"
-        :confirmText="confirmText || translate('confirm')"
+        :btn-options="btnOptions"
+        :btn-extra-text="btnExtraText"
+        :buy-text="buyText || translate('buyNow')"
+        :add-cart-text="addCartText || translate('addToCart')"
+        :confirm-text="confirmText || translate('confirm')"
         @click-btn-operate="clickBtnOperate"
       >
         <template #operate-btn v-if="getSlots('sku-operate')">
diff --git a/src/packages/__VUE/switch/demo.vue b/src/packages/__VUE/switch/demo.vue
index 1001de4fc6..4f94d0210f 100644
--- a/src/packages/__VUE/switch/demo.vue
+++ b/src/packages/__VUE/switch/demo.vue
@@ -7,7 +7,11 @@
 
     <h2>{{ translate('title1') }}</h2>
     <nut-cell>
-      <nut-switch :v-model="translate('text1')" :activeValue="translate('text1')" :inactiveValue="translate('text2')" />
+      <nut-switch
+        :v-model="translate('text1')"
+        :active-value="translate('text1')"
+        :inactive-value="translate('text2')"
+      />
     </nut-cell>
 
     <h2>{{ translate('title2') }}</h2>
@@ -17,7 +21,7 @@
 
     <h2>{{ translate('title3') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked3" loading activeColor="red" />
+      <nut-switch v-model="checked3" loading active-color="red" />
     </nut-cell>
 
     <h2>{{ translate('title4') }}</h2>
diff --git a/src/packages/__VUE/tag/demo.vue b/src/packages/__VUE/tag/demo.vue
index ee403857d8..36a786cc50 100644
--- a/src/packages/__VUE/tag/demo.vue
+++ b/src/packages/__VUE/tag/demo.vue
@@ -59,7 +59,7 @@
       </nut-cell>
       <nut-cell :title="translate('textColor')">
         <template #link>
-          <nut-tag color="#E9E9E9" textColor="#999999">{{ translate('tag') }}</nut-tag>
+          <nut-tag color="#E9E9E9" text-color="#999999">{{ translate('tag') }}</nut-tag>
         </template>
       </nut-cell>
       <nut-cell :title="translate('plaincolor')">
diff --git a/src/packages/__VUE/timeselect/index.vue b/src/packages/__VUE/timeselect/index.vue
index 2d7a441b01..9506a97f06 100644
--- a/src/packages/__VUE/timeselect/index.vue
+++ b/src/packages/__VUE/timeselect/index.vue
@@ -3,7 +3,7 @@
     position="bottom"
     closeable
     round
-    :teleportDisable="teleportDisable"
+    :teleport-disable="teleportDisable"
     :visible="visible"
     :style="popStyle"
     :lock-scroll="lockScroll"
diff --git a/src/packages/__VUE/tour/demo.vue b/src/packages/__VUE/tour/demo.vue
index 451533543e..9d2daebe10 100644
--- a/src/packages/__VUE/tour/demo.vue
+++ b/src/packages/__VUE/tour/demo.vue
@@ -30,11 +30,11 @@
       :steps="steps1"
       location="bottom-end"
       type="tile"
-      bgColor="#f00"
+      bg-color="#f00"
       theme="dark"
       :offset="[0, 0]"
-      maskWidth="50"
-      maskHeight="50"
+      mask-width="50"
+      mask-height="50"
     ></nut-tour>
 
     <h2>{{ translate('title2') }}</h2>
@@ -61,7 +61,7 @@
       v-model="showTour2"
       :steps="steps2"
       type="tile"
-      bgColor="#f00"
+      bg-color="#f00"
       theme="dark"
       location="bottom-end"
       :offset="[8, 8]"
@@ -83,7 +83,7 @@
       theme="dark"
       location="bottom-end"
       :offset="[8, 8]"
-      :closeOnClickOverlay="false"
+      :close-on-click-overlay="false"
     >
       <div class="tour-demo-custom-content">
         <div>nutui 4.x 即将发布，敬请期待</div>
@@ -109,8 +109,8 @@
       :steps="steps"
       location="top-start"
       :offset="[0, 0]"
-      maskWidth="60"
-      maskHeight="50"
+      mask-width="60"
+      mask-height="50"
     ></nut-tour>
   </div>
 </template>
diff --git a/src/packages/__VUE/tour/index.taro.vue b/src/packages/__VUE/tour/index.taro.vue
index c130a73b10..9b45ea9c29 100644
--- a/src/packages/__VUE/tour/index.taro.vue
+++ b/src/packages/__VUE/tour/index.taro.vue
@@ -13,12 +13,12 @@
       <nut-popover
         v-model:visible="showPopup[i]"
         :location="step.location || location"
-        :targetId="`nut-tour-popid${i}${refRandomId}`"
-        :bgColor="bgColor"
+        :target-id="`nut-tour-popid${i}${refRandomId}`"
+        :bg-color="bgColor"
         :theme="theme"
         :close-on-click-outside="false"
         :offset="step.popoverOffset || [0, 12]"
-        :arrowOffset="step.arrowOffset || 0"
+        :arrow-offset="step.arrowOffset || 0"
         :duration="0.2"
       >
         <template #content>
diff --git a/src/packages/__VUE/tour/index.vue b/src/packages/__VUE/tour/index.vue
index a6c3670737..eeb7cf67e9 100644
--- a/src/packages/__VUE/tour/index.vue
+++ b/src/packages/__VUE/tour/index.vue
@@ -14,12 +14,12 @@
         <nut-popover
           v-model:visible="showPopup"
           :location="step.location || location"
-          targetId="nut-tour-popid"
-          :bgColor="bgColor"
+          target-id="nut-tour-popid"
+          :bg-color="bgColor"
           :theme="theme"
           :close-on-click-outside="false"
           :offset="step.popoverOffset || [0, 12]"
-          :arrowOffset="step.arrowOffset || 0"
+          :arrow-offset="step.arrowOffset || 0"
         >
           <template #content>
             <slot>
diff --git a/src/packages/__VUE/trendarrow/demo.vue b/src/packages/__VUE/trendarrow/demo.vue
index c7349c85fb..add4896791 100644
--- a/src/packages/__VUE/trendarrow/demo.vue
+++ b/src/packages/__VUE/trendarrow/demo.vue
@@ -17,26 +17,26 @@
     </nut-cell>
     <view class="title">{{ translate('title3') }}</view>
     <nut-cell>
-      <nut-trend-arrow arrowLeft :rate="0.2535" />
-      <nut-trend-arrow arrowLeft :rate="-0.2535" />
+      <nut-trend-arrow arrow-left :rate="0.2535" />
+      <nut-trend-arrow arrow-left :rate="-0.2535" />
     </nut-cell>
     <view class="title">{{ translate('title4') }}</view>
     <nut-cell>
-      <nut-trend-arrow showSign :rate="1" />
-      <nut-trend-arrow showSign :rate="-0.2535" />
+      <nut-trend-arrow show-sign :rate="1" />
+      <nut-trend-arrow show-sign :rate="-0.2535" />
     </nut-cell>
     <view class="title">{{ translate('title5') }}</view>
     <nut-cell>
-      <nut-trend-arrow showSign :rate="0" />
-      <nut-trend-arrow showSign showZero :rate="0" />
+      <nut-trend-arrow show-sign :rate="0" />
+      <nut-trend-arrow show-sign show-zero :rate="0" />
     </nut-cell>
     <view class="title">{{ translate('title6') }}</view>
     <nut-cell>
       <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)" />
-      <nut-trend-arrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)" />
+      <nut-trend-arrow :rate="-0.2535" show-sign drop-color="rgb(255, 190, 13)" />
       <nut-trend-arrow
         :sync-text-color="false"
-        showSign
+        show-sign
         :rate="-0.2535"
         text-color="rgb(39,197,48)"
         drop-color="rgb(255, 190, 13)"
diff --git a/src/packages/__VUE/watermark/demo.vue b/src/packages/__VUE/watermark/demo.vue
index 9a1abdd2ef..ad8448cf74 100644
--- a/src/packages/__VUE/watermark/demo.vue
+++ b/src/packages/__VUE/watermark/demo.vue
@@ -17,7 +17,7 @@
     <h4>{{ translate('title2') }}</h4>
     <nut-cell class="wrap wrap2">
       <img :src="src" alt="" />
-      <nut-watermark :fullPage="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
+      <nut-watermark :full-page="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
     </nut-cell>
   </div>
 </template>