textarea Input输入框高度自适应方法

文章内容来源于网络+实践
参考文章 https://www.cnblogs.com/yf-html/p/11378405.html

---

前端项目框架

vue2

---

一、div标签+contenteditable属性实现高度自适应

<div contenteditable=true ></div>
<!--<div>中的其他属性和样式使用各自项目前端的统一格式即可-->

此时，使用v-model进行双向数据绑定无效

二、双向数据绑定实现

html：

<!--content为绑定数据，改为本项目所需的数据即可-->
<div contenteditable="true" v-text="content" @input="handleInput"></div>
<!--<div>中的其他属性和样式使用各自项目前端的统一格式即可-->

js：

export default {
  data() {
    return {
      // content为绑定数据，改为本项目所需的数据即可
      content: ''
    }
  },
  methods: {
    handleInput($event){
      // content为绑定数据，改为本项目所需的数据即可
      this.content = $event.target.innerText;
      // 拓展 如果想要只需要前100位数据
      this.content = this.content.substring(0,100)
    }
  }
}