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

原创已于 2023-06-13 11:52:46 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

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

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

<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>