微信小程序 出现弹窗时候textarea内容显示到弹窗上的层级处理

页面逻辑简单的话,直接针对出现弹窗的时候给textarea添加动态class。具体样式display:none;
如果业务较为复杂的话推荐处理方法:
<view class="textarea-box">
    <textarea class="textarea-content" placeholder="请输入备注" placeholder-style="color: #ACACAC" :disable-default-padding="true"
:value="state.remark" @input="inputHandle($event, 'remark', 100)" @confirm="inputHandle($event, 'remark', 100)" @blur="inputBlur" 
maxlength="100" :focus="state.isTextareaShow" v-if="state.isTextareaShow">
    </textarea>
    <view class="textarea-content-blank" v-else @click="clickTextarea">
        <view class="blank-txt" v-if="!state.remark">请输入备注</view>
        <view class="blank-content" v-else>{{ state.remark }}</view>
    </view>
</view>

思路:实际展示的是一个view组件,里面展示之前输入的结果,该组件场景不会出现textarea的莫名其妙异常。当触发textarea聚焦的时候,textarea暴露出来,失焦后重置
关键处理:

// 文本输入
const inputHandle = (e, attrName, maxLength) => {
    let { value:keyValue } = e.detail
    if(maxLength && keyValue.length > maxLength) {
        keyValue = keyValue.slice(0, maxLength)
    }
    state[attrName] = keyValue
}
const clickTextarea = () => {
    state.isTextareaShow = true
}
const inputBlur = () => {
    state.isTextareaShow = false
}

 

posted @ 2022-10-26 16:09  独寒江雪  阅读(214)  评论(0)    收藏  举报