Vue textarea 高度自适应

Vue textarea 高度自适应

• 主要用到两个属性offsetHeight，scrollHeight
• scrollHeight 是内容的滚动高度,包含没实现出来的
• offsetHeight 当前控件显示的高度，如果文字增多了，不做自适应，这个高度不变，scrolHeight变大，所以可以比较这两个值，修改textarea的高度后，offsetHeight也就变了。

<template>
  <div>
    <div class="address-container">
      <label>当前地址</label>
      <textarea ref="test" class="textarea-mine" v-model="currentValue"></textarea>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    data () {
      return {
        currentValue: ''
      }
    },
    watch: {
      currentValue (nv, ov) {
        if (nv === ov) {
          return
        }
        this.currentValue = nv
        console.log('value changed')
        this.changeHeight()
      }
    },
    methods: {
      changeHeight () {
        let _this = this
        this.$nextTick(() => {
          var textArea = _this.$refs.test
          var scrollHeight = textArea.scrollHeight // 控件所有的高度，包含滚动的那部分(不可见也会有高度)
          var height = textArea.offsetHeight // 屏幕上显示的高度
          if (height <= scrollHeight) {
            textArea.style.height = 'auto' // 恢复默认值，这个作用就是根据内容自适应textarea高度
            textArea.style.height = textArea.scrollHeight + 'px' // 拿到最新的高度改变textarea的高度
          }
        })
      }
    }
  }
</script>

<style scoped>

  .address-container {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 15px;
  }

  .address-container label {
    min-width: 4rem;
    margin: 0px 5px;
  }

  .textarea-mine {
    min-height: 20px;
    padding: 5px;
    width: 100%;
    display: block;
    flex: 1;
    margin: 10px 5px;
    font-size: 15px;
    color: #0c0c0c;
    outline: none;
    border: none;
    overflow-y: auto;
    appearance: none;
    text-align: inherit;
    font-family: -apple-system-font, "Helvetica Neue", sans-serif, "Microsoft YaHei";
  }
</style>

• 参考

scrollHeight: ENTIRE  content & padding (visible or not)
Height of all content + paddings, despite of height of the element.

clientHeight: VISIBLE content & padding
Only visible height: content portion limited by explicitly defined height of the element.

offsetHeight: VISIBLE content & padding + border + scrollbar
Height occupied by the element on document.