How to solve the problem of excessive textarea level in WeChat Mini Programs

This article mainly explains "how to solve the problem of too high level of textarea in WeChat Mini Programs". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to solve the problem of high textarea level in WeChat Mini Programs".

Create a new textarea component to replace the native textarea and add code

{{txt = ='? Placeholder:txt}} 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})}}. 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;}}

Vue code, modify it according to your needs. Pay special attention to not using wx;if or hidden attributes. Wx:if is rendered frequently. Although it can be used, part of hidden will show bug, and [hidden] will make auto-height incorrect for the first time.

At this point, I believe you have a deeper understanding of "how to solve the problem of excessive textarea level in WeChat Mini Programs". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!