關於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