uniapp制作app的nvue组件live-pusher聚焦框问题

前端专业写bug

已于 2023-06-13 11:52:46 修改

阅读量902

点赞数

文章标签： uni-app javascript 前端

于 2023-06-13 11:50:07 首次发布

本文链接：https://blog.csdn.net/bs521521/article/details/131185376

版权

该代码段展示了一个用于视频直播的live-pusher组件，配置了参数如模式、音量、美颜效果和宽高比。同时，通过覆盖的cover-view防止聚焦框出现，并监听了statechange、netstatus和error事件。CSS定位用于创建一个全屏的黑色遮罩层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="livefater">
				<div style="width: 557rpx;height: 557rpx;">
					<live-pusher 
                        id='livePusher' 
                        ref="livePusher" 
                        class="livePusher" 
                        url="" mode="SD" :muted="true"
						:enable-camera="true" 
                        :auto-focus="true" 
                        :beauty="1" whiteness="2" aspect="1:1"
						@statechange="statechange" @netstatus="netstatus" @error="error">
					</live-pusher>
				</div>
				<cover-view class="dingwei" @click="over"></cover-view>
</div>

methods: {
			// 拦截点击在live-pusher上,避免出现聚焦框
			over(){
				return
			},
        }

<style>
//定位遮挡
 .dingwei{
        position: absolute;
		top: 0rpx;
        width: 557rpx;
		height: 557rpx;
		background: #000000;
		opacity: 0;
    }
</style>