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(() => { let textArea = _this.$refs.textarea let scrollHeight = textArea.scrollHeight // 控件所有的高度,包含滚动的那部分(不可见也会有高度) let height = textArea.offsetHeight // 屏幕上显示的高度 if (height <= scrollHeight) { textArea.style.height = 'auto' // 恢复默认值,这个作用就是根据内容自适应textarea高度 textArea.style.height = textArea.scrollHeight + 'px' // 拿到最新的高度改变textarea的高度 } }) } } // css代码 textarea width 100% resize none min-height 50px outline none display block overflow-y auto appearance none border none font-size 14px