编辑器开发——组合快捷键

编辑器开发组合快捷键

使用vue+原生js

按键键值和名称

可以使用js代码获取具体值

    <div :keydown="stopNavte">
        <input :keydown="stopNavte">
    </div>
    stopNavte: function(e) {
        console.log(e)
    }
	//e.keyCode 输入键的值

vue为常用的按键设置了别名，无需去匹配keyCode，使用别名就能监听按键的事件。

<input @keyup.enter="function">

另外，Vue中还支持组合写法：

使用中有一些组合键带有原生时间的因此需要阻止原生事件

stopDefault: function(e) {
			// Prevent the default browser action (W3C)
			if (e && e.preventDefault)
				e.preventDefault();
			else
				// A shortcut for stoping the browser action in IE
				window.event.returnValue = false;
			return false;
		},

//使用vue组合键函数或者js原生之前使用阻止函数如：
stopNavte: function(e) {
			//阻止原生快捷键并使用指定快捷键
			console.log(e)
			var that = this;
			if (e.ctrlKey && e.keyCode == 49) {
				console.log(‘输入ctrl+1的快捷键‘);
				that.stopDefault();
				that.restoreMemory(that.memoryLibraryData[0].translatedText);
				
			}
    }

组合快捷键使用必须是keydown事件 keyup组合键阻止原生功能不太友好

F11全屏展示和退出全屏的功能键 js只能监听全屏展示的事件退出的事件无法监听但是js可以监听浏览器设备高度的变化因此我们可以使用F11监听全屏函数以及监听设备高度的变化实现F11的全屏和退出(vue.js)

//监听设备高度的函数
window.onresize = () => {
	return (() => {
		window.screenHeight = document.body.clientHeight;
		that.screenHeight = window.screenHeight;
	})()
}
//监听F11原生功能加入F11全屏识别isF11
if (e.keyCode == 122) {
	console.log(‘输入F11‘);
	that.biggerEditor(2);
	that.isF11 = true;
}
//在vue watch中监听screenHeight高度因为watch事件是异步的所以要在加一层判断triggerWatchF11
screenHeight(val) {
    if(that.isF11&&that.triggerWatchF11){
		that.isF11 = false;
		that.triggerWatchF11 = false;
		//在此可以执行退出全屏的函数
		
	}
	if(that.isF11){
		that.triggerWatchF11 = true;
	}
}

文章参考：https://blog.csdn.net/xiaxiangyun/article/details/80404768

编辑器开发——组合快捷键

原文：https://www.cnblogs.com/wuyexuetu/p/12888919.html