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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM