微信textarea和input穿透问题

微信textarea和input穿透问题有两种解决方案：

写在前面的话：本人技术有限哪里写的不对，请多多指教！！！
因为本人开发框架是mpvue框架，所以和原生文档有所区别！！！
出现原因是因为这两个标签的是用户输入信息的标签，所以层级比较高，通过设置z-index方式是不能超过这两个标签的层级，所以同通过以下两种方式解决。

1.通过添加样式相同rich-text/其他标签元素，替代textarea和input标签。两者保持样式相同，通过变量在聚焦和失焦时交替显示隐藏真假textarea/input。

textarea的穿透（小程序里面）
a.在小程序input和textarea标签的穿透问题，
b.设置两个相同的样式的标签，一个是textarea/input，另一个是rich-text标签
c.当点击的时候，进入input和textarea标签内输入内容，绑定失焦事件，
d.失去焦点将输入的内容给绑定到rich-text标签的nodes，解决掉穿透问题
e.两部分设置形同的样式，在视觉上没有什么区别
代码如下：
html部分

<textarea :show-confirm-bar="false"
                        fixed
                        v-model="order.comments"
                        placeholder="请填写备注信息(200字以内)"
                        v-if="!isHidden"
                        @blur="hiddenText">
</textarea>
 <div class='remark-rich'  v-else @click="showText">
     <rich-text :nodes="txtRealContent">请填写备注信息(200字以内)</rich-text>
</div>

js部分
初识化

data () {
      return { 
      txtRealContent: '',            // textarea替换内容
      comments: ''					  // input框输入内容
    }
    /**
       * textarea的内容替换
       * @author chengminjuan
       * @date 2018/10/26
       */
      commentInput: function () {
        this.isHidden = true
        this.txtRealContent = ''
        this.order.comments = ''
      },
      showText: function () {
        this.isHidden = false
      },
      hiddenText: function () {
        this.isHidden = true
        this.txtRealContent = this.order.comments
      }

2.如果穿透是因为遮罩或者按钮问题（后面会附上图片加以说明需求），那可以将遮罩/按钮包含在cover-view标签里面，但是cover-view覆盖在原生组件之上的文本视图。

可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher
只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
这是官方文档解释，里面出这些标签之外cover-view无法解析出来。
实现的效果图如下：
在textarea里面输入文字

bug出现的效果图

解决之后的效果图

代码实现

<div class="page">
    <div class="content">
      <div class="text-area">
        <textarea name=""
                  placeholder="请输入内容..."
                  cols="30" rows="10" class="textarea"></textarea>
      </div>
      <div class="button" @click="showModal">点击</div>
    </div>
    <!--    评价成功弹出框-->
    <cover-view class="shade" v-if="shadeFlag">
      <cover-view class="shade-container">
        <cover-view class="shade-img">
          <cover-view class="success-img">
            <cover-image class="img" src="/static/component/lnk-page/success.svg"></cover-image>
          </cover-view>
        </cover-view>
        <cover-view class="success-content">您的评价已提交成功！</cover-view>
        <cover-view class="close-shade">
          <cover-view class="close-btn" @click="closeShade">我知道了</cover-view>
        </cover-view>
      </cover-view>
    </cover-view>
  </div>

主要是将遮罩的标签换成cover-view标签
两种解决方案各有优缺点：
第一种的解决方案比较繁琐，而且控制两个标签的样式很难一致，在真机上很容易引起bug，优点是可以解决大部分情况的穿透问题。
第二种的优点，解决起来很简单，只需要将遮罩的div标签换成crover-view标签即可，但是cover-view里面可以包含的标签具有局限性，所以有些情况下是不能处理的，具体限制请看微信小程序官方文档