MPVue WeChat applet: Unable to block textarea in full screen state of vedio video
In our project, there is an edit data page that uses textarea and vedio. When we use iOS test, we find that textarea will display at the front through vedio when the video is in full screen state. The solution was found by trial and error. Since the TextArea is the native component, the hierarchy is the highest, and the Z-index setting for the rest of the component has no effect.
<template bb0 <textarea maxlength="200" placeholder=" Profile "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) {// ScreenChange (e) {// ScreenChange (e) {// ScreenChange (e) {// ScreenChange (e) {// ScreenChange (e) {// ScreenChange (e) { } else {// Enter fullScreen console.log(' Enter fullScreen ') {this. isShowTextArea = true} else {// Enter fullScreen console.log(' Enter fullScreen ') this.isShowTextarea = false } }, } } </script>
You can also use a rich text editor, but you need to import a file, so I chose this way.
While this is not a perfect solution, there are no problems with simple use. The hope is helpful to everybody, what question can carry on communication.
