首页 > 其他分享 >Vue3+typescript如何给元素添加一个Ctrl+s的事件,用于保存文件?

Vue3+typescript如何给元素添加一个Ctrl+s的事件,用于保存文件?

时间:2023-04-28 11:45:09浏览次数:40  
标签:typescript Ctrl value key Vue3 editDocumentVisible

如下代码,建议用这个,e.keyCode 已经过时,后面都是用 e.key:string.

onMounted(() => {
  window.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.key === 's') {  // 检查是否按下了 Ctrl + S
      e.preventDefault();  // 阻止默认行为(保存网页)
      console.log(editDocumentVisible.value);
      if (editDocumentVisible.value) {
        saveDocument();
      }
    }
  });
});

标签:typescript,Ctrl,value,key,Vue3,editDocumentVisible
From: https://www.cnblogs.com/pphboy/p/17361648.html

相关文章

  • 【前端可视化】大屏scale适配vue3 hooks
    useScalePage.jsimport{onMounted,onUnmounted}from'vue';import_from'lodash';/**大屏适配的hooks*/exportdefaultfunctionuseScalePage(option){constresizeFunc=_.throttle(function(){triggerScale();//动画缩放网页}......
  • Vue3实现组件级基类的几种方法
    Vue3的组件有三种代码组织方式纯OptionAPI(不含setup)optionAPI+setup纯setup(即compositionAPI)对于这三种形式,设置基类的方法也略有不同。使用mixins、extendsvue3提供了mixins和extends,但是尝试之后发现这两种方法只支持纯OptionAPI,设置的data会被识别,但是设置的......
  • Vue3路由正确写法
    import{createRouter,createWebHistory}from'vue-router'importHomefrom'@/view/Home.vue';importLoginfrom'@/view/Login.vue'constroutes=[{path:'/',component:Home},{path:'/login',......
  • vue3 ts 项目文件夹解析
    vue3ts项目文件夹解析layouts文件夹通常用于存放应用程序中的布局组件或布局相关的文件。布局组件是用于包装应用程序中的页面内容的组件,通常包含头部导航、侧边栏、页脚、页面标题等等。布局组件可以在不同的页面中共享,并且可以为应用程序带来一致的外观和体验。core存放......
  • WIN7下安装VUE3.0
    1、准备工作(你可以检查,清楚的话可以不用管)1.1、检查nodejs版本:node-v1.2、检车npm版本:npm-v1.3、查看VUE脚手架版本:vue--version或vue-V(大写的V)1.4、卸载VUE2版本命令:npmuninstallvue-cli-g1.5、卸载VUE3版本命令:npmuninstall-g@vue/cli2.下载node.js及配置tip......
  • MFC-CListCtrl-SetExtendedStyle设置扩展风格
       mylist.SetExtendedStyle(LVS_SHOWSELALWAYS|LVS_EX_CHECKBOXES|LVS_EX_FULLROWSELECT|LVS_EX_GRIDLINES);//设置扩展风格风格看:https://www.cnblogs.com/liming19680104/p/17358671.html   ......
  • pinia vue3 ts 切换到其他页面后再切回来数据不见了
    piniavue3ts切换到其他页面后再切回来数据不见了刷新有数据,但是切换到其他页面后再切回来数据不见了,我需要切回来后数据还有。因为我的数据是刷新的话就会watch监视数据有没有改变,但是切换其他页面不会触发我应该把得到的数据存储到store里面这样切换其他页面也不会消失......
  • vue3 ts 写搜索联系人功能逻辑
    vue3ts写搜索联系人功能vue<inputtype="text"v-model="search"placeholder="Searchcontacts"><templatev-for="(item,index)infilteredData":key="index">ts!search.value表示如果search.value为空或......
  • html文件中使用vue3+element-plus开发模版
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="w......
  • 安装多个NodeJS windows上安装多个Nodejs版本 解决vue2/vue3同时运行
    第一步下载nvm-windowsnvm-windows下载地址:Github最新下载地址进入之后直接下载第二步安装NVM注意路径一定不要包含空格中文否则会报错注意安装路径一定不要包含空格中文否则会报错 点击安装之后如果之前安装了nodejs的话会提示希望nvm管理已安装node版本吗点击是......