mpvue微信小程序:vedio视频全屏状态下无法遮挡textarea
我们项目中有一个编辑资料页,使用了textarea和vedio,在使用IOS测试的时候发现视频全屏状态下textarea会穿透vedio显示在最前面。经过不断的摸索找到了解决方案。
因为textarea是原生组件,所以层级是最高的,其余组件设置z-index也是不起作用的。
<template>
<textarea
maxlength="200"
placeholder="请输入个人简介"
v-model="designData.introduction"
v-show="isShowTextarea" />
<video
id="myVideo"
:src="视频路径"
@fullscreenchange="screenChange"
></video>
</template>
<script>
export default {
data() {
return {
isShowTextarea: true
}
},
methods: {
screenChange(e) { // 监听视频是否全屏
console.log(e)
let fullScreen = e.target.fullScreen //值true为进入全屏,false为退出全屏
if (!fullScreen ) { //退出全屏
console.log('退出全屏')
this.isShowTextarea = true
} else { //进入全屏
console.log('进入全屏')
this.isShowTextarea = false
}
},
}
}
</script>
也可以使用富文本编辑器,但是需要引入一个文件,所以我选择了这种方式。
虽然这个不是一个完美的解决方案,但是简单的使用还是没有任何问题的。希望对大家有所帮助,有什么问题可以进行交流。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。