微信小程序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>

也能夠使用富文本編輯器，可是須要引入一個文件，因此我選擇了這種方式。
雖然這個不是一個完美的解決方案，可是簡單的使用仍是沒有任何問題的。但願對你們有所幫助，有什麼問題能夠進行交流。