微信小程序vedio视频全屏没法遮挡textarea

mpvue微信小程序:vedio视频全屏状态下没法遮挡textareavue

咱们项目中有一个编辑资料页,使用了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>

图片描述
也能够使用富文本编辑器,可是须要引入一个文件,因此我选择了这种方式。
虽然这个不是一个完美的解决方案,可是简单的使用仍是没有任何问题的。但愿对你们有所帮助,有什么问题能够进行交流。微信小程序