关于vue2非表单元素使用contenteditable="true"实现textarea高度自适应

<template>
　　　<div ref="sendContent" contenteditable="true" v-html="sendContent" @keyup.shift.enter="sendMsg" style="min-height:50px;border:1px solid black;"></div>
     <button @click="clearTextarea">清空输入框的值</button>
</template>
<script>
export default {
  data () {
    return {
      sendContent: ''
    }
  },
  methods: {
    sendMsg () {
      let content = this.$refs.sendContent.innerHTML
      if ((content.length) > 1200) {
        alter('您输入的内容过长,无法发送')
        return false
      }
      this.$emit('send', this.sendContent)
    },
   clearTextarea: function(){
      //无效 this.sendContent = '';
      this.$refs.sendContent.innerHTML = '';
   }
  }
}
</script>

参考文章：

https://segmentfault.com/a/1190000012146952

转载于:https://www.cnblogs.com/rachelch/p/9300743.html