首页 > 编程语言 >微信小程序 出现弹窗时候textarea内容显示到弹窗上的层级处理

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

时间:2022-10-26 16:27:17浏览次数:65  
标签:const textarea 微信 state keyValue maxLength 弹窗

页面逻辑简单的话,直接针对出现弹窗的时候给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
}

 

标签:const,textarea,微信,state,keyValue,maxLength,弹窗
From: https://www.cnblogs.com/ljt-8961/p/16828795.html

相关文章