天天看點

vue聊天功能子產品(四)聊天消息換行

需求:ctrl+回車換行

回車發送消息

<!--輸入區域-->
<div class="messagesBox-BigRight-down20-input">
    <div style="z-index: 9999">
        <el-input class="inputmsg"
                  type="textarea"
                  :rows="4"
                  placeholder="請輸入内容"
                  v-model="messagesContents"
                  ref="count"
                  @keydown.native="listen($event)">
        </el-input>
    </div>

</div>
<div :style="messagesBoxBigRightBotton">
    <button class="sendMessageBtn" @click="sendMessage()">發送</button>
    <button 
</div>
</div>
           

監聽輸入框即可

listen(event) {
     if (event.ctrlKey  && event.keyCode === 13) {
     // if (event.shiftKey && event.keyCode === 13) {
       console.log("換行");
       this.messagesContents += '\n';
     } else if (event.keyCode === 13) {
       event.preventDefault(); // 阻止浏覽器預設換行操作*/
       this.sendMessage(); // 發送文本
     }
   },
           

繼續閱讀