uni-app nvue模式下 cover-view 事件修饰符无效

uni-app nvue模式下 cover-view 事件修饰符无效

开发环境 版本号 项目创建方式
Windows win10 20h1 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.16

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

手机机型：p30 pro

页面类型：nvue

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```html
<view class="viewo-warp">  
    <video class="video" object-fit="cover" :id="item.id" :ref="item.id" :src="item.src"  
        :controls="false" :loop="true" :show-center-play-btn="false" @timeupdate="timeupdateHandle"  
        @click="videoClickHandle">  
        <cover-view class="video-content">  
            <text class="text-white margin-bottom">info</text>  
            <text class="text-white text-df">info</text>  
            <text class="text-white text-df">info</text>  
        </cover-view>  
        <cover-view class="video-features" @click.stop.prevent>  
            <uni-icons type="contact" color="white" size="45" class="margin-bottom"></uni-icons>  
            <uni-icons type="heart" color="white" size="45" class="margin-bottom"></uni-icons>  
            <uni-icons type="chatboxes" color="white" size="38" class="margin-bottom"></uni-icons>  
            <uni-icons type="redo-filled" color="white" size="40" @click.stop.prevent="toShared"></uni-icons>  
        </cover-view>  
        <cover-view class="video-play-ctrl" v-if="!playing">  
            <uni-icons type="forward" color="white" size="75"></uni-icons>  
        </cover-view>  
    </video>  
    <view class="progress-bar-warp">  
        <text class="progress-bar" :style="{ 'width': videoProgress }"></text>  
    </view>  
</view>

事件 toShared 仍然会冒泡到 video 标签上, videoClickHandle 已经被执行

操作步骤：

  • 新建nvue页面
  • 加入 video 标签
  • 加入 cover-view 元素
  • 测试事件修饰符

预期结果：

不应该冒泡到video吧

实际结果：

video 上的 videoClickHandle 事件依旧被触发

bug描述：

video 内的 cover-view 不支持事件修饰符 .stop.prevent, 单独和同事用都无效, 事件还会冒泡到 video 上. 其他修饰符暂没测试.


更多关于uni-app nvue模式下 cover-view 事件修饰符无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue模式下 cover-view 事件修饰符无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 中，cover-view 组件的事件修饰符确实存在限制。根据 uni-app 官方文档，cover-view 作为原生组件，其事件系统与普通视图层组件有所不同，部分事件修饰符可能无法正常工作。

针对你的代码，建议通过以下方式解决事件冒泡问题：

  1. 在 toShared 方法中手动调用 event.stopPropagation()
toShared(event) {
    event.stopPropagation()
    // 其他业务逻辑
}
  1. 检查 video 的事件处理逻辑，可在 videoClickHandle 中通过事件源判断：
videoClickHandle(e) {
    if (e.target.className?.includes('video-features')) return
    // 正常处理逻辑
}
  1. 考虑使用条件控制视频点击事件的触发：
data() {
    return {
        allowVideoClick: true
    }
},
methods: {
    toShared() {
        this.allowVideoClick = false
        // 业务逻辑
        setTimeout(() => {
            this.allowVideoClick = true
        }, 100)
    },
    videoClickHandle() {
        if (!this.allowVideoClick) return
        // 正常处理逻辑
    }
}
回到顶部