vue textarea高度随输入变化

vue textarea的高度可以通过绑定一个动态的CSS样式来实现随输入内容自动调整高度的效果。

在Vue组件中，需要使用v-model指令来绑定textarea元素的值，同时监听输入事件来实时更新绑定的值。

在样式部分，设置textarea的高度为auto，并使用一个自定义的CSS选择器类来控制行高和字体大小。同时，通过设置textarea的box-sizing为border-box，确保在输入多行文本时不会出现滚动条。

通过计算textarea内容的行数和行高的乘积来动态设置textarea的高度，以实现自适应的效果。

以下是一个示例代码：

<template>
  <div>
    <textarea v-model="content" ref="textarea" @input="adjustTextareaHeight"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    };
  },
  methods: {
    adjustTextareaHeight() {
      this.$refs.textarea.style.height = 'auto';
      this.$refs.textarea.style.height = this.$refs.textarea.scrollHeight + 'px';
    }
  }
};
</script>

<style>
.textarea-auto {
  line-height: 1.5;
  font-size: 16px;
}

textarea {
  height: auto;
  box-sizing: border-box;
}
</style>

通过上述代码，当输入内容时，textarea的高度会随着内容的增多而自动调整。由于绑定了动态的CSS样式，所以当内容减少时，高度也会随之减小，保证页面的美观性和用户体验。