精华内容
下载资源
问答
  • 主要介绍了vue监听键盘事件的快捷方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • VUE全局监听键盘事件

    千次阅读 2019-03-26 16:00:11
    <!DOCTYPE html> <... <head> ...meta charset="UTF-8">...script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdn.st...
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    		<script src="" type="text/javascript" charset="utf-8"></script>
    		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    		<title></title>
    	</head>
    
    	<body v-on:keyup.enter="test">
    		<div id="div1">
    			<input v-bind:style="[style,style2,style3]" v-model="shuju" />
    			<div @click="test($event)">点击</div>
    			<div id="" v-if="s>1">
    				{
      {s}}
    		
    展开全文
  • Vue 全局监听键盘事件(在项目中使用左右键控制翻页)想法实现方法 想法 此段可略过,直接看后面如何实现的 页面结构: 有一个含有表格的父组件,表格利用iView里的 <i-table> 和 render 函数实现的,表格中...

    Vue 全局监听键盘事件(在项目中使用左右键控制翻页)

    想法

    此段可略过,直接看后面如何实现的

    页面结构:

    有一个含有表格的父组件,表格利用iView里的 <i-table> 和 render 函数实现的,表格中含有一个显示按钮,点击后会出现一个 <Drawer> 的抽屉,其中,这个抽屉由于在项目中多次用到,被我封装成了一个 <charts> 组件,抽屉中左侧为详细信息的数据,右侧是用 echarts实现的折线图等。点击父组件的按钮,出现抽屉,显示对应那一条数据的详细信息和图表等。

    待实现功能:

    1. 我在子组件中添加了左右两个按钮,希望点击按钮可以实现不用返回父组件页面就能切换下一条数据的信息和图表。
    2. 同时,点击键盘的左右键可以同时实现这一项功能。

    实现方法

    1. 在父组件中利用生命周期函数 mounted(),全局监听键盘左右键事件:
    mounted () {
       // 全局监听键盘左右键事件
       var _this = this
       document.onkeyup = function (e) {
         if (e.code === 'ArrowLeft') {
           console.log('arrowleft')
           // pageUp() 和 pageDown()是具体实现的函数
           _this.pageUp()
         } else if (e.code === 'ArrowRight') {
           console.log('arrowright')
           _this.pageDown()
         }
       }
    },
    

    在Vue中,取消了键盘码,用名字代替,如 e.code === 'ArrowLeft' 代表的就是左键,其他名字可以在控制台打印出自己想要的按键名,或直接参照菜鸟教程.

    1. 在实现该功能之前绘制图表的参数依靠表格的属性params.row,现在改为直接从后端获取的数据searchData。searchData总体上是一个数组,利用searchData可以实现切换下一条,而params.row仅为当前条,无法实现切换,缺点是searchData没有像params.row一样的索引,先获取到params.row的索引,再为searchData的每一项都添加index索引值即可实现切换上下条数据
    triggerFetchChart () {
      // 为searchData添加索引值
      for (let item in this.searchData) {
        this.searchData[item].index = parseInt(item)
      }
      this.paramsPassChild = this.searchData
      // 向子组件传图表要用到的参数和当前条数据的索引值
      this.$refs.fetchChart.fetchChart(this.paramsPassChild, this.currentRow)
    },
    
    1. 在触发左右键时,将当前条数据的索引值加一或减一,不要忘记判断前面或后面没有数据了的情况:
    pageUp () {
      console.log('pageUp')
      // 切换为上一行的参数,传给子组件
      this.currentRow--
      if (this.currentRow > 0) {
        this.triggerFetchChart()
      } else {
        this.$message('到头啦')
      }
    },
    pageDown () {
      console.log('pageDown')
      // 切换为下一行的参数,传给子组件
      this.currentRow++
      if (this.currentRow < this.searchData.length) {
        this.triggerFetchChart()
      } else {
        this.$message('到尾啦')
      }
    }
    
    1. 子组件中也为左右按钮绑定事件,与上面相似,基本上就实现啦

    以上代码并不完整,仅供参考哦


    更新于2021.6.16

    展开全文
  • vue全局监听键盘事件 在created钩子函数监听键盘事件即可, created () { document.onkeydown=(e)=>{ if(86 == e.keyCode && e.ctrlKey){ document.addEventListener('paste', (event)=> { let ...

    vue中全局监听键盘事件
    在created钩子函数监听键盘事件即可,

    created () {
        document.onkeydown=(e)=>{
          if(86 == e.keyCode && e.ctrlKey){
            document.addEventListener('paste', (event)=> {
              let paste = (event.clipboardData || window.clipboardData).getData('text');
              this.code = paste;
              // this.getInfo();
            })
          }
        }
      }
    

    paste为粘贴板的内容

    展开全文
  • vue 全局键盘监听

    千次阅读 2019-04-03 19:12:02
    如何实现全局监听时,尝试了有效的方法如下: mounted() 在mounted()中编写监听的快捷键和方法即可实现: 例如监听ctrl+s的组合键, mounted(){ this.loadData() var _this = this; document.onkey...

    vue实现键盘监听,使用了控件监听组件时,需要获得控件的焦点才能起作用。
    如何实现全局监听时,尝试了有效的方法如下:

    • mounted()
      在mounted()中编写监听的快捷键和方法即可实现:
      例如监听ctrl+s的组合键,
    mounted(){
          this.loadData()
          var _this = this;        
          document.onkeydown = function(e) {            
          let key = window.event.keyCode;            
          if (key== 83 && event.ctrlKey) {//== 83 && event.ctrlKey
                window.event.preventDefault() //关闭浏览器快捷键
                _this.save_onkeydown();//;saveProject1()
                }
            };
        },
    

    在浏览器中ctrl+s的组合键有其他的用途,所以在这边重新定义的时候,需要关闭原组合键,下面的代码可屏蔽原快捷键。

    window.event.preventDefault()
    
    • methods()
      在methods中写保存触发的操作。
      提示保存成功。
    save_onkeydown(){
            this.saveProject()
            this.$message.success("保存成功!")
          },
    
    • 效果如图
      保存

    引用

    展开全文
  • 监听键盘事件 方法一 document.addEventListener("keydown",function(e){ alert("您按下的按钮的keyCode为:"+e.keyCode) }) 方法二 document.onkeydown = function (e) { // 方向键--上 if (e.keyCode ...
  • [vue] vue如何监听键盘事件

    多人点赞 2021-02-28 18:38:49
    [vue] vue如何监听键盘事件? 那要看你怎么监听了, 比如 @keyup.enter, 或者直接全局监听 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起...
  • vue.js监听键盘事件

    千次阅读 2019-12-09 10:41:46
    Vue监听键盘,直接用@绑定就可以,而且Vue为几个常用的按键提供了别名,不用去查询按键的keyCode 全部的按键别名 .enter .tab .delete //(捕获“删除”和“退格”键) .esc .space .up .down .left .right 一、input...
  • Vuevue里面如何监听键盘事件

    热门讨论 2019-12-14 15:57:19
    元素中是不可以用键盘事件的,所以需要另想办法。 二、解决方案: (1)通过监听的方法。 mounted(){ this.backEvent(); }, methods: { backEvent(){ document.addEventListener('keyup',(event) =&...
  • 方法一 ()" style="color: #ffffff" type="text" v-model="ruleForm.account" auto-complete="off" placeholder="账号"> ...如果用了element-ui的话要在后面加上...这样写就可以实现在该页面键盘回车实现登录
  • vue在某页面监听键盘输入事件

    千次阅读 2020-10-09 09:57:15
    {{current.title}} 你的浏览器不支持iframe标签</p> ps:注意:加个header,当点击了ifame组件之后,再点击时header组件时候,才能再继续键盘事件; 或者通过家蒙版来解决这个问题。 (2)、js处理 方式(一): ...
  • mounted(){ const _t = this; _t.oldBodyHeight = document.documentElement.clientHeight window.onresize = () => { if (_t.oldBodyHeight) { _t.bodyHeightIsChange = document.documentElement....
  • vue键盘监听及销毁

    千次阅读 2020-07-15 17:32:10
    监听回车键,组件销毁即清空事件 created() { document.onkeydown = e => { if (e.keyCode == 13) { this.submit() } } }, beforeDestroy() { document.onkeydown = '' },
  • 直接在Vue的mounted中监听键盘按键 具体代码 <div id="app"> </div> <script type="text/javascript"> Vue.config.keyCodes.f2 = 113 var vm = new Vue({ el: '#app', data: {
  • Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: 1 2 <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> 你可以直接将 KeyboardEvent.key 暴露的任意有效...
  • 请问大佬们,如何局部监听键盘事件,比如只监听Dialog 对话框里的键盘事件
  • VUE在浏览器全屏下监听Esc键盘事件

    千次阅读 2020-10-14 09:11:38
    解决了在浏览器全屏下监听不到键盘Esc事件 解决了取消全屏和全屏的同步问题,ESC按键下可以同步 实例: <!--html--> <!-- 全屏显示 --> <div class="btn-fullscreen" @click=...
  • Vue监听键盘,直接用@绑定就可以,而且Vue为几个常用的按键提供了别名,不用去查询按键的keyCode 全部的按键别名 .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 一、...
  • Vue组件中获取全局的点击事件

    万次阅读 2018-03-17 16:51:24
    使用场景:在Vue组件中点击某元素之外的地方移除该元素需求:如上图所示,“用户列表”页面有三个Vue组件组成,分别是“菜单组件”,“导航组件”和“列表组件”。其中“列表组件”中包含一个“下拉菜单”,当我们...
  • vue 监听全局键盘热键

    2021-09-15 17:44:24
    document.onkeydown = e => { // const key = window.event.... // 避免onkeydown一直监听 if (e.repeat) { return } if (e.code === 'ArrowUp') { this.checkUp() } if (e.code === 'ArrowDown') { .
  • Vue监听事件:v-on

    2020-08-06 15:37:18
    Vue监听事件:v-on 1.v-on介绍 作用 绑定事件监听器 缩写 @ 预期 Function | Inline Statement | Object 参数 event 2.v-on的基本是用 <div id="app"> <span v-text="count"&...
  • vue各种事件监听实例

    千次阅读 2020-06-21 00:38:37
    计算属性的Get方法和Set方法 看代码说话: <!... <...vue小练习</title> </head> <body> <div id="calc"> <a v-cloak="">{{name}}</a> </div> <
  • vue监听enter键触发事件

    千次阅读 2020-09-27 10:59:01
    window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件 } methods: { handleKeyDown (e) { let key = null if (window.event === undefined) { key = e.keyCode } else { ...
  • 在Vue下我们可以给事件一个修饰符,采用Vue全局config对象来添加, 例如:Vue.config.keyCodes['Left'] = 37 我们通过一个例子来看看如何实现 Vue下给 div 自定义键盘事件以及键盘修饰符 <!DOCTYPE html> ...
  • { document.addEventListener('keyup', this.enterKey) } 加载绑定事件 destroyed () { // 销毁enter事件 this.enterKeyupDestroyed() }, mounted () { // 绑定enter事件 this.enterKeyup() this.handleColumns(this...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,844
精华内容 1,137
关键字:

vue全局监听键盘事件

vue 订阅