mpvue微信小程序vedio视频全屏状态下不能遮挡textarea

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>

也可以使用富文本编辑器，但是需要引入一个文件，所以我选择了这种方式。
虽然这个不是一个完美的解决方案，但是简单的使用还是没有任何问题的。希望对大家有所帮助，有什么问题可以进行交流。