一、前言

相信做過微信小程序開發的人應該都碰到過這個問題，因為這個需求實在太常見了

由于textarea是屬于原生組件，層級最高，不管在頁面中我們設置z-index值多少都會被textarea組件遮擋住，很影響用戶體驗，

目前官方對該問題還沒有修復，當然官方也給出了解決該問題的其他方案，使用cover-view和 cover-image替代，但個人感覺并不是很好，有一些限制

二、使用場景及解決方案

1、彈窗顯示

2、底部fixed定位的按鈕，頁面滾動時，例如添加購物車，顯示價格

針對以上兩種業務場景解決方式不同

針對場景1彈窗顯示的處理方式

在顯示彈窗時通過if或者綁定class屬性將textarea組件隱藏，彈窗關閉時顯示，如下

 <div class="section" :class="isShowInput?'':'hidden'"> <textarea class="content" placeholder="輸入內容" v-model="userInfo"></textarea> </div>

針對場景2（滾動）如何解決

我們在輸入時使用textarea組件，不輸入的時候text來顯示文字和placeholder，這樣我們需要單獨設置幾個標簽

<textarea>輸入內容</textarea><scroll-view>用于顯示文本內容</scroll-view><div class="placeholder" v-if="!content">說說對這個活動看法吧</div>

通過v-show來顯示或隱藏該組件，使用scroll-view標簽為文本內容設置可滾動，這里設置了isFocus聚焦，通過按鈕的形式去觸發textaare的Focus

完整代碼如下：

<textarea v-model="content" @blur="bindContentBlur" v-show="isInputContentFocus" placeholder="說說對這個活動看法吧" v-bind:focus="isFocus" ></textarea> <scroll-view scroll-y class="content" v-text="content" @click="bindContentFocus" v-show="isContentFocus" > <div class="placeholder" v-if="!content">說說對這個活動看法吧</div> </scroll-view>data() { return { isContentFocus: true, isInputContentFocus: false, isFocus: false }; }, methods: { bindContentFocus(e) { this.isFocus = true; //觸發焦點 this.isContentFocus = false; //聚焦時隱藏內容文本標簽 this.isInputContentFocus = true; console.log("Focus isFocus", this.isFocus); }, bindContentBlur(e) { this.isContentFocus = true; //聚焦時隱藏內容文本標簽 this.isInputContentFocus = false; this.isFocus = false; //失去焦點 console.log("Blur isFocus", this.isFocus); } }

三、其他方式

官方給出了針對textarea的解決方式，使用cover-view和 cover-image替代，這兩個組件也是原生組件，可以覆蓋textarea組件

cover-image

<cover-view class="btn-save"> <button class="btn btn-love btn-apply" @click="apply" :disabled="apply_status" v-text="apply_status?'我已報名':'我要報名'" ></button> </cover-view>