diff --git a/packages/nutui-eslint-config/index.js b/packages/nutui-eslint-config/index.js
index c8b22d4858..0a4368b9ce 100644
--- a/packages/nutui-eslint-config/index.js
+++ b/packages/nutui-eslint-config/index.js
@@ -29,13 +29,19 @@ module.exports = {
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': 'error',
     // eslint-plugin-vue
+    'vue/v-on-event-hyphenation': [
+      'error',
+      'always',
+      {
+        autofix: true
+      }
+    ],
     'vue/no-v-html': 'off',
     'vue/first-attribute-linebreak': 'off',
     '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/v-on-event-hyphenation': 'off'
+    'vue/attribute-hyphenation': 'off'
   }
 };
diff --git a/src/packages/__VUE/addresslist/index.taro.vue b/src/packages/__VUE/addresslist/index.taro.vue
index 54ddc3095a..f7658277d8 100644
--- a/src/packages/__VUE/addresslist/index.taro.vue
+++ b/src/packages/__VUE/addresslist/index.taro.vue
@@ -6,13 +6,13 @@
       :item="item"
       :longPress="longPress"
       :swipeEdition="swipeEdition"
-      @delIcon="clickDelIcon"
-      @editIcon="clickEditIcon"
-      @clickItem="clickContentItem"
-      @swipeDel="clickSwipeDel"
-      @longCopy="clickLongCopy"
-      @longSet="clickLongSet"
-      @longDel="clickLongDel"
+      @del-icon="clickDelIcon"
+      @edit-icon="clickEditIcon"
+      @click-item="clickContentItem"
+      @swipe-del="clickSwipeDel"
+      @long-copy="clickLongCopy"
+      @long-set="clickLongSet"
+      @long-del="clickLongDel"
     >
       <template #content-info>
         <slot name="item-infos" :item="item"></slot>
diff --git a/src/packages/__VUE/addresslist/index.vue b/src/packages/__VUE/addresslist/index.vue
index 933dcd6d63..e7f217f110 100644
--- a/src/packages/__VUE/addresslist/index.vue
+++ b/src/packages/__VUE/addresslist/index.vue
@@ -6,13 +6,13 @@
       :item="item"
       :longPress="longPress"
       :swipeEdition="swipeEdition"
-      @delIcon="clickDelIcon"
-      @editIcon="clickEditIcon"
-      @clickItem="clickContentItem"
-      @swipeDel="clickSwipeDel"
-      @longCopy="clickLongCopy"
-      @longSet="clickLongSet"
-      @longDel="clickLongDel"
+      @del-icon="clickDelIcon"
+      @edit-icon="clickEditIcon"
+      @click-item="clickContentItem"
+      @swipe-del="clickSwipeDel"
+      @long-copy="clickLongCopy"
+      @long-set="clickLongSet"
+      @long-del="clickLongDel"
     >
       <template #content-info>
         <slot name="item-infos" :item="item"></slot>
diff --git a/src/packages/__VUE/audio/demo.vue b/src/packages/__VUE/audio/demo.vue
index 0b2d2f6745..ac1b1d557b 100644
--- a/src/packages/__VUE/audio/demo.vue
+++ b/src/packages/__VUE/audio/demo.vue
@@ -53,10 +53,10 @@
       :loop="false"
       type="progress"
       @forward="forward"
-      @fastBack="fastBack"
+      @fast-back="fastBack"
       @play="changeStatus"
       @ended="ended"
-      @changeProgress="changeProgress"
+      @change-progress="changeProgress"
     >
       <div class="nut-audio-operate-group">
         <nut-audio-operate type="back">
diff --git a/src/packages/__VUE/cascader/demo.vue b/src/packages/__VUE/cascader/demo.vue
index c16a96e555..2c5526ebb7 100644
--- a/src/packages/__VUE/cascader/demo.vue
+++ b/src/packages/__VUE/cascader/demo.vue
@@ -13,7 +13,7 @@
       v-model:visible="demo1.visible"
       v-model="demo1.value"
       @change="events.change"
-      @pathChange="events.pathChange"
+      @path-change="events.pathChange"
       :options="demo1.options"
     ></nut-cascader>
 
@@ -30,7 +30,7 @@
       v-model="demo2.value"
       labelKey="text"
       @change="events.change"
-      @pathChange="events.pathChange"
+      @path-change="events.pathChange"
       valueKey="text"
       childrenKey="items"
       :options="demo2.options"
@@ -48,7 +48,7 @@
       v-model:visible="demo3.visible"
       v-model="demo3.value"
       @change="events.change"
-      @pathChange="events.pathChange"
+      @path-change="events.pathChange"
       lazy
       :lazyLoad="demo3.lazyLoad"
     ></nut-cascader>
@@ -65,7 +65,7 @@
       v-model:visible="demo4.visible"
       v-model="demo4.value"
       @change="events.change"
-      @pathChange="events.pathChange"
+      @path-change="events.pathChange"
       :options="demo4.options"
       lazy
       :lazyLoad="demo4.lazyLoad"
@@ -83,7 +83,7 @@
       v-model:visible="demo5.visible"
       v-model="demo5.value"
       @change="events.change"
-      @pathChange="events.pathChange"
+      @path-change="events.pathChange"
       :options="demo5.options"
       :convertConfig="demo5.convertConfig"
     ></nut-cascader>
diff --git a/src/packages/__VUE/category/demo.vue b/src/packages/__VUE/category/demo.vue
index 49839c11ca..1ba3970e65 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" @onChange="onChange"> </nut-category-pane>
+      <nut-category-pane :categoryChild="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" @onChange="onChange"> </nut-category-pane
+      <nut-category-pane type="text" :categoryChild="categoryChild2" @on-change="onChange"> </nut-category-pane
     ></nut-category>
 
     <h2>{{ translate('title3') }}</h2>
     <nut-category
-      ><nut-category-pane type="custom" :customCategory="customCategory" @onChange="changeCustom"> </nut-category-pane
+      ><nut-category-pane type="custom" :customCategory="customCategory" @on-change="changeCustom"> </nut-category-pane
     ></nut-category>
   </div>
 </template>
diff --git a/src/packages/__VUE/comment/demo.vue b/src/packages/__VUE/comment/demo.vue
index 4d19359838..2d45630e9d 100644
--- a/src/packages/__VUE/comment/demo.vue
+++ b/src/packages/__VUE/comment/demo.vue
@@ -7,7 +7,7 @@
         :videos="cmt.videos"
         :info="cmt.info"
         @click="handleclick"
-        @clickImages="clickImages"
+        @click-images="clickImages"
         :operation="['replay']"
       >
         <template #comment-labels>
@@ -28,7 +28,7 @@
         :videos="cmt.videos"
         :info="cmt.info"
         ellipsis="6"
-        @clickImages="clickImages"
+        @click-images="clickImages"
       >
         <template #comment-labels>
           <img
@@ -55,7 +55,7 @@
         :videos="cmt.videos"
         :info="cmt.info"
         :follow="cmt.follow"
-        @clickImages="clickImages"
+        @click-images="clickImages"
       ></nut-comment>
     </nut-cell>
   </div>
diff --git a/src/packages/__VUE/comment/index.taro.vue b/src/packages/__VUE/comment/index.taro.vue
index 8680d404e1..28aaf5e4cc 100644
--- a/src/packages/__VUE/comment/index.taro.vue
+++ b/src/packages/__VUE/comment/index.taro.vue
@@ -1,7 +1,7 @@
 <template>
   <view :class="classes" v-if="info && Object.keys(info)">
     <!-- 根据展示信息的多少，分为3种展示风格：simple，base，complex -->
-    <comment-header :type="headerType" :info="info" :labels="labels" @handleClick="handleClick">
+    <comment-header :type="headerType" :info="info" :labels="labels" @handle-click="handleClick">
       <template #labels>
         <slot name="comment-labels"></slot>
       </template>
@@ -16,7 +16,7 @@
       v-html="info.content"
     ></view>
 
-    <comment-images :images="images" :videos="videos" :type="imagesRows" @clickImages="clickImages"></comment-images>
+    <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 class="nut-comment__follow-title">购买{{ follow.days }}天后追评</view>
@@ -30,8 +30,8 @@
       :type="headerType"
       :info="info"
       :operation="operation"
-      @clickOperate="clickOperate"
-      @handleClick="handleClick"
+      @click-operate="clickOperate"
+      @handle-click="handleClick"
     ></comment-bottom>
 
     <slot name="comment-shop-reply"></slot>
diff --git a/src/packages/__VUE/comment/index.vue b/src/packages/__VUE/comment/index.vue
index 0ce87050e3..c0f54d0f83 100644
--- a/src/packages/__VUE/comment/index.vue
+++ b/src/packages/__VUE/comment/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view :class="classes" v-if="info && Object.keys(info)">
     <!-- 根据展示信息的多少，分为3种展示风格：simple，base，complex -->
-    <comment-header :type="headerType" :info="info" :labels="labels" @handleClick="handleClick">
+    <comment-header :type="headerType" :info="info" :labels="labels" @handle-click="handleClick">
       <template #labels>
         <slot name="comment-labels"></slot>
       </template>
@@ -16,7 +16,7 @@
       v-html="info.content"
     ></view>
 
-    <comment-images :images="images" :videos="videos" :type="imagesRows" @clickImages="clickImages"></comment-images>
+    <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 class="nut-comment__follow-title">{{ translate('additionalReview', follow.days) }}</view>
@@ -30,8 +30,8 @@
       :type="headerType"
       :info="info"
       :operation="operation"
-      @clickOperate="clickOperate"
-      @handleClick="handleClick"
+      @click-operate="clickOperate"
+      @handle-click="handleClick"
     ></comment-bottom>
 
     <slot name="comment-shop-reply"></slot>
diff --git a/src/packages/__VUE/ecard/demo.vue b/src/packages/__VUE/ecard/demo.vue
index 04726018f1..454b48e988 100644
--- a/src/packages/__VUE/ecard/demo.vue
+++ b/src/packages/__VUE/ecard/demo.vue
@@ -4,9 +4,9 @@
     <nut-cell>
       <nut-ecard
         v-model="money"
-        @inputChange="inputChange"
+        @input-change="inputChange"
         @change="change"
-        @changeStep="changeStep"
+        @change-step="changeStep"
         :data-list="dataList"
       ></nut-ecard>
     </nut-cell>
diff --git a/src/packages/__VUE/invoice/demo.vue b/src/packages/__VUE/invoice/demo.vue
index 0025b52c4c..4dcce89a80 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" @onSubmit="submit"></nut-invoice>
+    <nut-invoice :data="data" :formValue="formValue" @on-submit="submit"></nut-invoice>
   </div>
 </template>
 
diff --git a/src/packages/__VUE/noticebar/index.taro.vue b/src/packages/__VUE/noticebar/index.taro.vue
index c4bde702eb..6ebc2e4d0b 100644
--- a/src/packages/__VUE/noticebar/index.taro.vue
+++ b/src/packages/__VUE/noticebar/index.taro.vue
@@ -23,7 +23,7 @@
           :class="wrapContentClass"
           :style="contentStyle"
           @animationend="onAnimationEnd"
-          @webkitAnimationEnd="onAnimationEnd"
+          @webkit-animation-end="onAnimationEnd"
         >
           <slot>{{ text }}</slot>
         </view>
diff --git a/src/packages/__VUE/noticebar/index.vue b/src/packages/__VUE/noticebar/index.vue
index f3ae076ff2..edd765df0d 100644
--- a/src/packages/__VUE/noticebar/index.vue
+++ b/src/packages/__VUE/noticebar/index.vue
@@ -23,7 +23,7 @@
           :class="wrapContentClass"
           :style="contentStyle"
           @animationend="onAnimationEnd"
-          @webkitAnimationEnd="onAnimationEnd"
+          @webkit-animation-end="onAnimationEnd"
           ><slot>{{ text }}</slot>
         </view>
       </view>
diff --git a/src/packages/__VUE/sku/demo.vue b/src/packages/__VUE/sku/demo.vue
index e1a92884b4..1e5a8e0481 100644
--- a/src/packages/__VUE/sku/demo.vue
+++ b/src/packages/__VUE/sku/demo.vue
@@ -16,8 +16,8 @@
       v-model:visible="base"
       :sku="skuData"
       :goods="goodsInfo"
-      @selectSku="selectSku"
-      @clickBtnOperate="clickBtnOperate"
+      @select-sku="selectSku"
+      @click-btn-operate="clickBtnOperate"
       @close="close"
     ></nut-sku>
 
@@ -26,9 +26,9 @@
       :sku="skuData"
       :goods="goodsInfo"
       :btnExtraText="btnExtraText"
-      @changeStepper="changeStepper"
+      @change-stepper="changeStepper"
       :btnOptions="['buy', 'cart']"
-      @selectSku="selectSku"
+      @select-sku="selectSku"
     >
       <template #sku-operate>
         <div class="sku-operate-box">
@@ -45,11 +45,11 @@
       :stepperMax="7"
       :stepperMin="2"
       :stepperExtraText="stepperExtraText"
-      @changeStepper="changeStepper"
-      @overLimit="overLimit"
+      @change-stepper="changeStepper"
+      @over-limit="overLimit"
       :btnOptions="['buy', 'cart']"
-      @selectSku="selectSku"
-      @clickBtnOperate="clickBtnOperate"
+      @select-sku="selectSku"
+      @click-btn-operate="clickBtnOperate"
       @close="close"
     ></nut-sku>
 
@@ -58,8 +58,8 @@
       :sku="skuData"
       :goods="goodsInfo"
       :btnOptions="['buy', 'cart']"
-      @selectSku="selectSku"
-      @clickBtnOperate="clickBtnOperate"
+      @select-sku="selectSku"
+      @click-btn-operate="clickBtnOperate"
     >
       <template #sku-header-price>
         <div>
diff --git a/src/packages/__VUE/sku/index.taro.vue b/src/packages/__VUE/sku/index.taro.vue
index 388df7003e..cd5e3c4d41 100644
--- a/src/packages/__VUE/sku/index.taro.vue
+++ b/src/packages/__VUE/sku/index.taro.vue
@@ -25,7 +25,7 @@
         <slot name="sku-select-top"></slot>
 
         <slot name="sku-select"></slot>
-        <SkuSelect v-if="!getSlots('sku-select')" :sku="sku" @selectSku="selectSku"></SkuSelect>
+        <SkuSelect v-if="!getSlots('sku-select')" :sku="sku" @select-sku="selectSku"></SkuSelect>
 
         <slot name="sku-stepper"></slot>
         <sku-stepper
@@ -37,8 +37,8 @@
           :stepperExtraText="stepperExtraText"
           @add="add"
           @reduce="reduce"
-          @changeStepper="changeStepper"
-          @overLimit="stepperOverLimit"
+          @change-stepper="changeStepper"
+          @over-limit="stepperOverLimit"
         ></sku-stepper>
 
         <slot name="sku-stepper-bottom"></slot>
@@ -50,7 +50,7 @@
         :buyText="buyText || translate('buyNow')"
         :addCartText="addCartText || translate('addToCart')"
         :confirmText="confirmText || translate('confirm')"
-        @clickBtnOperate="clickBtnOperate"
+        @click-btn-operate="clickBtnOperate"
       >
         <template #operate-btn v-if="getSlots('sku-operate')">
           <slot name="sku-operate"></slot>
diff --git a/src/packages/__VUE/sku/index.vue b/src/packages/__VUE/sku/index.vue
index 62ea61f062..8b420ffeb8 100644
--- a/src/packages/__VUE/sku/index.vue
+++ b/src/packages/__VUE/sku/index.vue
@@ -27,7 +27,7 @@
         <slot name="sku-select-top"></slot>
 
         <slot name="sku-select"></slot>
-        <SkuSelect v-if="!getSlots('sku-select')" :sku="sku" @selectSku="selectSku"></SkuSelect>
+        <SkuSelect v-if="!getSlots('sku-select')" :sku="sku" @select-sku="selectSku"></SkuSelect>
 
         <slot name="sku-stepper"></slot>
         <sku-stepper
@@ -39,8 +39,8 @@
           :stepperExtraText="stepperExtraText"
           @add="add"
           @reduce="reduce"
-          @changeStepper="changeStepper"
-          @overLimit="stepperOverLimit"
+          @change-stepper="changeStepper"
+          @over-limit="stepperOverLimit"
         ></sku-stepper>
 
         <slot name="sku-stepper-bottom"></slot>
@@ -52,7 +52,7 @@
         :buyText="buyText || translate('buyNow')"
         :addCartText="addCartText || translate('addToCart')"
         :confirmText="confirmText || translate('confirm')"
-        @clickBtnOperate="clickBtnOperate"
+        @click-btn-operate="clickBtnOperate"
       >
         <template #operate-btn v-if="getSlots('sku-operate')">
           <slot name="sku-operate"></slot>