小程序textarea穿透问题解决方案

前段时间做个小程序项目，遇到textarea层级过高穿透的问题。社区也没有找到合适的解决方案，无奈在textarea的基础上重新写了个组件。
解决思路：将textarea的值写入一个view里面，用view模拟一个textarea，当点击输入时（获得焦点）把view替换成为textarea，失去焦点时获取值显示为view。

wxml代码：

<view class="text_area_view">
    <view bindtap='handleFocus' wx:if="{{hidden == true}}" style="{{textareaVal? '':placeholderStyle}}" class="text_view">{{textareaVal?textareaVal: placeholder}}</view>
    <view wx:if="{{hidden == false}}">
        <textarea placeholder='{{placeholder}}' auto-height value='{{textareaVal}}' fixed='true' bindinput='textarea' focus="{{focus}}" bindblur="leaveFocus"  maxlength="{{maxlength}}" placeholder-style="{{placeholderStyle}}"></textarea>
    </view>
</view>

js代码：

	handleFocus: function () {
			this.setData({
				hidden: false,
				Focus:true
			})
		},
		leaveFocus(e){
			this.setData({
				hidden: true,
				Focus: true,
				textareaVal: this.data.content,
			})
		},
		textarea: function (e) {
			this.setData({
				content: e.detail.value
			})
			this.triggerEvent('change', e.detail.value)
		},

点击查看完整的案例https://github.com/tony-xf/text-area-demo