首页 > 其他 > 详细

textarea的高度随着内容自适应

时间:2021-08-10 16:45:23      阅读:12      评论:0      收藏:0      [点我收藏+]

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

 

textarea的高度随着内容自适应

原文:https://www.cnblogs.com/flyingmaple/p/15123403.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!