首页 > 其他分享 >给vue单页面绑定快捷键

给vue单页面绑定快捷键

时间:2022-08-29 21:34:05浏览次数:56  
标签:vue keyup 绑定 快捷键 handleKeyUp document

  created() {
    // 添加快捷键
    document.addEventListener('keyup', this.handleKeyUp)
  },
  destroyed() {
    // 删除快捷键
    document.removeEventListener('keyup', this.handleKeyUp)
  },
  methods: {
    // 添加快捷键的事件处理
    handleKeyUp(e) {
      e.preventDefault();
      e.stopPropagation();

      // 点击 Delete 键
      if (e.keyCode == 46) {
        this.deleteCurContent(); // 删除组件或模板
      }
    }
  }

标签:vue,keyup,绑定,快捷键,handleKeyUp,document
From: https://www.cnblogs.com/jeacy/p/16637431.html

相关文章

  • 引入VUE的方式(8种)
    第一类:1、本地引入把vue的js文件下载下来引入   2、CDN引入把vue.js网址引入   3、把vue.js文件放在项目文件夹src中引入项目然后webpack打包 4、......
  • Vite 按需引入 Ant Design Vue 3.0
    Vite按需引入AntDesignVue3.0第一步下载:npmiunplugin-vue-components-D需要注意的是:Vite你可以用unplugin-vue-components来进行按需加载。但是此插件无法处......
  • tp+javascript 输入框/绑定邮箱
    添加数据库and绑定邮箱!!! 实现效果:  数据库设计:CREATETABLE`o_my_resume`(`id`int(11)NOTNULLAUTO_INCREMENT,`name`varchar(255)NOTNULLCOMM......
  • CentOS 安装Nginx并部署vue项目
    安装yuminstallnginx配置nginx设置开机启动systemctlenablenginx启动服务systemctlstartnginx停止服务systemctlstopnginx重启服务syst......
  • vue3基础入门
    vue3基础入门官方网站:https://v3.vuejs.org/中文文档:https://staging-cn.vuejs.org/guide/introduction.html1、简介1.1、vue是什么?Vue.js(读音/vjuː/,类似于vi......
  • vue 监听事件addEventListener
    vue添加监听事件addEventListener//vue添加监听事件,addEventListener第二个参数要绑在this上,即需要在methods中声明,否则销毁的时候会报错//在mounted中监听,在beforeD......
  • Vue封装的过渡与动画
    一.作用:在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名。二.图示: 三.写法:1.准备好样式元素进入的样式:v-enter:进入的起点v-enter......
  • vue3+vuex 的 mutations 的 使用
    <template><divclass="app">姓名:{{$store.state.nameVuex}}<button@click="btn">基本方法:修改名字</button><br/><button@click="btn1">传递值......
  • vue2+vuex 的 mutations 的 使用
    <template><divclass="app">姓名:{{$store.state.nameVuex}}<button@click="btn">基本方法:修改名字</button><br/><button@click="btn1......
  • vue-通信
    1、props父子1、Parent.vue//Parent.vue<template> <div> <span>我是Parent组件</span> <Childref="child":parentValue="value"@emitEdit="edit"></Child> ......