微信小程序 出现弹窗时候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 @   独寒江雪  阅读(168)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示