1.vue中指定的写法

<button @keyup.enter.native="xxxx">查询</button>

但是,这种方式只能在该按钮获取到光标之后才能绑定回车键,也就是说你需要先用鼠标点击一下触发绑定回车的操作。

2.vue3中在 onMounted中监听键盘的keydown方式,这种方式不需要按钮获取到焦点

const keydownEvent = () => {
	document.onkeydown = (e: any) => {
	    if (e.defaultPrevented) {
		    return;
	    }
	    const body = document.getElementsByTagName('body')[0];
        // match(xxxx应填写文件在浏览器中的地址,不需要包括https、http或者www),这里是为了防止其他页面触发
	    if (e.keyCode === 13 && e.target.baseURI.match("xxxx") && e.target === body) {
            console.log("按下了回车键");
            xxxx(); //需要调用的方法
        }
	};
};

onMounted(() => {
    keydownEvent();
});

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐