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