小程序中textarea层级问题

小程序开发中，有些原生组件，比如textarea存在层级太高的问题，一般发生在两种场景:

1.页面较长，然后底部有固定fixed的按钮
2.页面有自定义弹窗时

这两种情况下，textarea中的文字都会穿透固定按钮和弹窗浮在最上层。找了很多方法，可能最合适的就是自定义一个替代元素，以下附上完整的代码(wepy框架小程序)：

template中的html：

    

      

    

      

        请输入媒体详情

        {{mediaDemo}}

      

    
 

data中涉及到的变量：

data={

      mediaDemo: '',

      isContentFocus: true,

      isInputContentFocus: false,

      isFocus: false,

}

methods中的方法：

  methods = {

      bindTextAreaBlur(e) {

        this.mediaDemo = e.detail.value;

        this.$apply();

      },

      bindContentFocus() {

        this.isFocus = true;

        this.isContentFocus = false;

        this.isInputContentFocus = true;

        this.$apply();

      },

      bindContentBlur() {

        this.isContentFocus = true;

        this.isInputContentFocus = false;

        this.isFocus = false;

        this.$apply();

      }

    };

style中的样式：

  .weui-textarea {

    border: 1px solid #afb8cd;

    background: #fff;

    padding: 20rpx;

    border-radius: 5rpx;

    height: 150rpx;

    margin: 30rpx auto 100rpx auto;

    width: 86%;

  }

 

  .content {

    margin: 30rpx auto 100rpx auto;

    border: 1px solid #afb8cd;

    background: #fff;

    padding: 15rpx 20rpx 26rpx 20rpx;

    border-radius: 5rpx;

    height: 150rpx;

    width: 86%;

  }

 

  .phClass,

  .placeholder {

    color: #999;

  }