本篇内容主要讲解“怎么解决微信小程序中textarea层级过高的问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么解决微信小程序中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 首次不正确
到此,相信大家对“怎么解决微信小程序中textarea层级过高的问题”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。