VUE 模仿微信消息发送按住Enter键发送消息,按住Alt+Enter键换行
主要现在网上的信息太乱了,找半天也找不到一个全的,自己写一个吧
按钮
<el-button type="primary"
icon="el-icon-chat-dot-round"
@click="sendMsg" title="按住Enter键发送消息,按住Alt+Enter键换行">消息发送</el-button>
这个时候在vue的script中return写入变量downCode来记录alt键是否按下,mounted中写入监听
export default {
name: 'index',
data() {
return {
downCode:0,
content :'' ,// 文本框绑定的v-model
}
},
mounted () {
var that = this
document.onkeydown = () => {
var key = window.event.keyCode
if(key==17)
{
that.downCode=1;
}
if (key === 13) {
if(that.downCode==1){
that.content = that.content+'\n'
that.downCode=0;
}else{
that.sendMsg()
}
}
}
},
methods: {
sendMsg(){
console.log('发送消息.........')
}
}
}
非常简单,亲测可用! 大家可以试一下,有问题评论区见!