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