Vue封装回车事件
1、实现函数在utils目录下创建tools.ts文件(这里使用的是typescript,用javascript就创建tools.js)/*** @description 文档注册enter事件* @param cb*/export const handleEnter = (cb: any): void => {document.onkeydown = (e: any) => {e =
·
1、实现函数
在utils目录下创建tools.ts文件(这里使用的是typescript,用javascript就创建tools.js)
/**
* @description 文档注册enter事件
* @param cb
*/
export const handleEnter = (cb: any): void => {
document.onkeydown = (e: any) => {
e = window.event || e;
if (e.keyCode === 13) {
cb();
}
};
};
2、组件内使用
在要使用的组件内按如下代码使用
<el-button type="info" @click="console.log(111)" handleEnter> // 要使用回车的按钮
import { handleEnter } from '@/utils/tools'; // 注册
private created(): void {
handleEnter(this.xxx); // 按下回车执行的函数
}
private beforeDestroy(): void {
document.onkeydown = null; // 清除登陆页面的回车事件
}
由于keyCode
被禁用,改写一下函数
/**
* @description 文档注册enter事件
* @param cb
*/
export const handleEnter = (cb: any): void => {
document.onkeydown = (e: any) => {
e = window.event || e;
if (e.key === 'Enter') {
cb();
}
};
};
Thank you for your reading!
更多推荐
所有评论(0)