vue绑定键盘事件enter,ctrl+enter,alt+enter以及其他组合键的使用。

最近项目需要im在线聊天功能,消息发送enter键,换行ctrl+enter,找了很多资料才解决,结合自己理解也扩展了一些内容,希望可以帮大家解决问题:

下面是HTML代码
<el-input
 @keydown.enter.native="keyDown"
  type="textarea"
  :rows="4"
  class="text-input"
  placeholder="请输入内容"
  v-model="textarea">
el-input>
下面是js代码
keyDown(e) {
	if(e.ctrlKey && e.keyCode==13) {   //用户点击了ctrl+enter触发
	  this.textarea += '\n';
	}else { //用户点击了enter触发
	  this.sendMessage();
	}  
},
这样就完美解决了,如果你用的到alt或者其他快捷键的话,吧js里面的ctrlKey换成altKey就可以了,其他同理,我这边用的@keydown.enter.native,就是以enter结束才会触发,如果不是,这样写就可以了@keydown.native然后判断event里面的keycode就可以了。

你可能感兴趣的:(Vue.js,Element,vue,javascript,html,vue.js,前端)