فهرست منبع

zui-svg-icon 可能在内部处理了点击事件,同时又向父组件 emit 了一个 click 事件。而在 workbench.vue 中,@click 是 v-on:click 的缩写。对于自定义组件,它默认监听的是组件 emit 出来的 click 事件。如果想监听原生 DOM 点击事件,需要使用 .native 修饰符,即 @click.native

因此,当在 zui-svg-icon 上使用 @click 时,它会监听自定义的 click 事件。如果 zui-svg-icon 内部的根元素也绑定了点击事件,并且该事件冒泡了,那么就会触发两次。但是,如果 zui-svg-icon 同时处理了原生点击事件和 emit 了 click 事件,那么直接使用 @click 就会导致两次触发。
为了解决这个问题,我将在 zui-svg-icon 的 @click 事件上添加 .native 修饰符,这样它就只会监听原生的点击事件,避免了组件内部 emit 事件可能导致的重复触发。
shizhongqi 11 ماه پیش
والد
کامیت
e7e4accd9e
1فایلهای تغییر یافته به همراه1 افزوده شده و 1 حذف شده
  1. 1 1
      hdApp/src/admin/home/workbench.vue

+ 1 - 1
hdApp/src/admin/home/workbench.vue

@@ -12,7 +12,7 @@
         <view class="today-overview-card">
           <view class="today-header">
             <view class="today-title">今日概况</view>
-            <zui-svg-icon icon="home-message" color="#FFFFFF" :width="32" :height="29" @click="pageTo({url:'/admin/chat/list'})" />
+            <zui-svg-icon icon="home-message" color="#FFFFFF" :width="32" :height="29" @click.native="pageTo({url:'/admin/chat/list'})" />
             <view class="red-mind" v-if="unReadMsgNum>0">{{ unReadMsgNum>9?'9+':unReadMsgNum }}</view>
           </view>