情况:
点击按钮后,再点击空格键或者回车键会触发上一次的点击事件,导致重复调用,造成数据量增加。
原因分析:
button按钮点击之后焦点没有移除,仍在按钮之上,即点击空格或回车之后会继续执行button的click事件
解决方案:
@keyup.prevent @keydown.enter.prevent
<button class="buttonStyle" @click="addHastenInfoZhangAi" @keyup.prevent @keydown.enter.prevent>测试</button>
注意:如果使用element-ui组件库中的<el-button></el-button>,可能@keyup.prevent @keydown.enter.prevent会不生效,框架内获取有什么设置阻止了,本次未作深究,所以这里我使用了原生的button按钮,自己写了css样式,可供参考。
CSS:
.buttonStyle{
padding: 1px 10px;
color: #fff;
background-color: #409EFF;
border-color: #409EFF;
cursor: pointer;
border-radius:4px;
box-shadow: none;
outline:none;//去除点击时出现的黑色边框
}
.buttonStyle:hover{
color: #409EFF;
background-color: #fff;
border-color: #fff;
}