1. 程式人生 > 其它 >textarea的高度隨著內容自適應

textarea的高度隨著內容自適應

textarea(v-model="evaluateText",ref="textarea",maxlength="200",placeholder="課程或老師滿足您的期待嗎?說說您的感受或建議~)

watch: { evaluateText(nv,ov) { if(nv === ov) { return } this.evaluateText= nv console.log('value changed') this.changeHeight() } }, method: { changeHeight() { let_this =this this.$nextTick(() => { lettextArea = _this.$refs.textarea letscrollHeight = textArea.scrollHeight// 控制元件所有的高度,包含滾動的那部分(不可見也會有高度) letheight = textArea.offsetHeight// 螢幕上顯示的高度 if(height <= scrollHeight) { textArea.style.height='auto'// 恢復預設值,這個作用就是根據內容自適應textarea高度 textArea.style.height= textArea.scrollHeight+'px'// 拿到最新的高度改變textarea的高度 } }) } } // css程式碼 textarea width100% resizenone min-height50px outlinenone displayblock overflow-yauto appearancenone bordernone font-size14px