微信小程序 textarea 层级过高的解决方式
建立一个新的textarea 组件代替原生textarea ,废话不多说,上代码
<template> <view class="ui-textarea"> <textarea class="textarea {{ hide? 'hidden':''}}" auto-height maxlength="{{maxlength}}" name="{{ name }}" value="{{ txt }}" placeholder="{{ placeholder }}" bindinput="onInput" bindblur="onBlur" focus="{{focus}}"></textarea> <view hidden="{{ hide == false }}" class="{{ txt === ''?'text placeholder':'text'}}" bindtap="onFocus">{{ txt ===''? placeholder:txt }}</view> </view> </template> <script> export default { config: { usingComponents: {} }, behaviors: [], properties: { placeholder: { type: String, value: '' }, maxlength: { type: Number, value: 128 }, name: String, value: { type: String, value: '' } }, data: { hide: true, txt: '', focus: false }, ready() { if (this.data.value != '') { this.setData({ txt: this.data.value }) } }, methods: { onFocus() { this.setData({ hide: false, focus: true }) }, onInput(e) { this.setData({ txt: e.detail.value }) }, onBlur() { this.setData({ hide: true, focus: false }) } } } </script> <style lang="less"> .ui-textarea { position: relative !important; .textarea.hidden { display: block !important; position: absolute !important; left: -999px; right: -999px; top: 0; } .textarea { width: 100%; box-sizing: border-box; } .text { height: 100%; padding: 6px 5px; font-size: 14px; } .placeholder { color: #888; } } </style>
Vue 代码,自己根据需求改一下 ,特别注意,不要用 wx;if 或者 hidden 属性 , wx:if 频繁渲染,虽然可以用,hidden 会出现 部分显示bug,[hidden] 会使auto-height 首次不正确
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp