首页 > 其他分享 >vue项目中实现监听键盘按键事件

vue项目中实现监听键盘按键事件

时间:2023-06-02 16:34:31浏览次数:40  
标签:vue 46 event 键盘 按键 document keyDownReview 监听

created() {
    this.keyDown();
},
beforeDestroy() {
    this.keyDownReview();
},
methods: {
  //按键恢复
   keyDownReview() {
      document.onkeydown = function (event) {
        var e = event || window.event;
        e.returnValue = true;
      };
   },
   //键盘按钮截获
   keyDown() {
     document.onkeydown = (e) => {
    // 46--delete,8--回退 if (e.keyCode === 8 || e.keyCode === 46) { //delete键后执行刷新方法 this.deletePlotBtnClickHandler(); //取消原来的后续事件 e.preventDefault(); } }; },
}

 

标签:vue,46,event,键盘,按键,document,keyDownReview,监听
From: https://www.cnblogs.com/Hhuizi/p/17452174.html

相关文章

  • vue-element-admin安装依赖报错问题
    vue-element-admin安装依赖的时候报以下错误npmERR!codeENOENTnpmERR!syscallspawngitnpmERR!pathgitnpmERR!errno-4058npmERR!enoentAnunknowngiterroroccurrednpmERR!enoentThisisrelatedtonpmnotbeingabletofindafilenpmERR!enoentnpmE......
  • Vue修改数组、对象并且触发视图更新的方法以及原理
    一、数组 items:['a','b','c'];//一个普通的数组this.items[1]='x';//修改已有项this.items[3]='d';//新增一项this.item.length=2;//修改数组的长度//一个对象数组msg:[{id:1,selected:true,title:'aaa',},{i......
  • Vue3 中 ref 的优势
    1.允许使用任何值类型2. 一个包含对象类型值的ref可以响应式地替换整个对象:constobjectRef=ref({count:0})//这是响应式的替换objectRef.value={count:1}3. ref被传递给函数或是从一般对象上被解构时,不会丢失响应性:constobj={foo:ref(1),......
  • Vue3 reactive 定义一个变量时,如何具有响应式?
    错误示范:constarr=reactive([]);constload=()=>{constres=[2,3,4,5];//假设请求接口返回的数据//方法1失败,直接赋值丢失了响应性//arr=res;//方法2这样也是失败//arr.concat(res);//方法3可以,但是很麻烦res.forEach(e=>{......
  • app直播源代码,vue+Ant design a-table分页器使用
    app直播源代码,vue+Antdesigna-table分页器使用 vue+Antdesigna-table分页器使用 当前页current设置生效 <a-table:columns="columns":data-source="detail":pagination="pagination"rowKey="id"@change="tablePaginationChange"......
  • vue多行文本显示省略号加展开收起按钮
    getClientRects()获取文本的行数和宽高等信息,只能获取行内元素的 nextTick(()=>{    constlineRows=document.querySelector('.abc').getClientRects();    //如果行数超出2||行数是2&&最后一行宽度超过dom宽度-展开收起按钮的width就是多了,要显示展开......
  • Vue中的APP与js的对象字面量
    JavaScript的对象字面量是一种方便创建和初始化对象的语法。它允许您直接在代码中定义对象,而无需使用类或构造函数。对象字面量使用大括号{}括起来,并包含零个或多个键值对。以下是JavaScript对象字面量的常见用法和特点:键值对:对象字面量中的键值对由键和值组成,使用冒号:分隔。键......
  • SpringBoot Vue3 Element Plus 打造分布式存储系统
    SpringBoot+Vue3+ElementPlus打造分布式存储系统download:3w51xuebccom配置IDEA热部署-devtools开发过程中频繁修改代码,每次都需要重新编译,部署,重启服务器,这无疑极大浪费了我们的时间。解决这个问题的方法就是使用热部署技术。本篇文章将介绍如何在IDEA中使用devtools实现热部署......
  • 黑马Vue3 + ElementPlus + Pinia 小兔鲜电商项目2023版
    黑马Vue3+ElementPlus+Pinia小兔鲜电商项目2023版download:3w51xuebccom合式API-watch-基本使用和立即执行合式API是一个用于构建可靠、模块化、灵活的RESTfulAPI的框架。它提供了许多实用的功能,其中包括watch机制。在本篇文章中,我们将介绍合式API的watch机制的基本使用和立......
  • 使用 mysql-replication python监听mysql binlog 实时同步数据
    使用mysql-replicationpython监听mysqlbinlog实时同步数据文章目录使用mysql-replicationpython监听mysqlbinlog实时同步数据前言一、环境二、安装与配置1.首先安装mysql-replication2.参数3.配置数据库4.读取binlog日志总结前言数据库的基础信息需要频繁访问,需要存入red......