elementUI使用vue-direction-key实现键盘上下左右bug解决办法

最新推荐文章于 2024-09-11 10:10:57 发布
最新推荐文章于 2024-09-11 10:10:57 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： 前端 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37225650/article/details/124625543
版权
本文介绍了一个使用Vue-direction-key库实现输入框焦点在页面元素间切换的解决方案，特别针对Element UI的select和date组件存在的问题进行了修复。作者通过监听键盘按键事件，动态调整焦点，并处理select的展开、关闭以及date picker的隐藏，以实现流畅的导航效果。代码中包含了针对上下左右四个方向的焦点移动逻辑，并提供了具体的代码片段作为示例。
摘要由CSDN通过智能技术生成

最近要求输入框上下左右能实现输入框焦点切换的效果，在网上查了下决定使用vue-direction-key来实现功能，但是实际使用发现vue-direction-key配合element的select和date组件使用有问题，比如select无法展开、切换、关闭，然后对direction.on的方法进行修改，最后实现了功能。

页面部分代码，注意x和y必须严格从0开始加1，我没做跳多个的判断，select和date分别使用type，date还需要配置dateIndex和ref

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
          v-if="dialogVisible">


          <section>
            <div class="row">
              <el-form-item label="筛选条件" label-width="100px">
                <el-input v-direction="{x: 0, y: 0,type:'input'}" v-model="searchPaient" placeholder="健康id，证件号，姓名，手机号"  @input="nameChange"
                  @click.native.stop="nameChange"></el-input>
                <div class="paientList" v-show="isShow && searchList.length>0">
                  <div class="item" v-for="item in searchList" :key="item.id" @click="setPaient(item)">
                    {{item.realName}}
                  </div>
                </div>
              </el-form-item>
            </div>
            <div class="title">
              基本信息
            </div>

            <div class="row">
              <div class="inputBox">
                <el-form-item label="姓名" prop="realName">
                  <el-input v-direction="{x: 0, y: 1,type:'input'}" v-model="ruleForm.realName"></el-input>
                </el-form-item>
              </div>
              <div class="inputBox">
                <el-form-item label="证件类型" prop="cardType">
                  <el-select v-direction="{x: 1, y: 1,type:'select'}" v-model="ruleForm.cardType" placeholder="" style="width: 120px;">
                    <el-option v-for="item in cardTypeArr" :key="item.standardCode" :label="item.dictName"
                      :value="item.standardCode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="inputBox">
                <el-form-item label="证件号" prop="idCard">
                  <el-input v-direction="{x: 2, y: 1,type:'input'}" v-model="ruleForm.idCard" placeholder="" @input="getBir"></el-input>
                </el-form-item>
              </div>


            </div>
            <div class="row">
              <div class="inputBox">
                <el-form-item label="性别" prop="accountSex">
                  <el-select v-direction="{x: 0, y: 2,type:'select'}" v-model="ruleForm.accountSex" placeholder="" style="width: 100px;" @change="sexChange">
                    <el-option v-for="item in sexArr" :key="item.standardCode" :label="item.dictName"
                      :value="item.standardCode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="inputBox">
                <el-form-item label="出生日期" prop="birthday">
                <!--   <el-input v-direction="{x: 2, y: 1,type:'input'}" v-model="ruleForm.idCard" placeholder="" @input="getBir" type="date"></el-input> -->
                 <el-date-picker v-direction="{x: 1, y: 2,type:'date',dateIndex:1}" ref="date1" v-model="ruleForm.birthday" type="date" placeholder="" style="width: 200px;"
                    @change="dateChange" value-format="yyyy-MM-dd" :picker-options="pickerBeginDateBefore" >
                  </el-date-picker>
                </el-form-item>
              </div>

修改direction.on代码

  created() {
    let direction = this.$getDirection()
    direction.on('keyup', (e, val) => {
      e.preventDefault()
      console.log($(document.activeElement).parents('.el-input,.el-select'));
      console.log(direction)
      let activeNode = $(document.activeElement).parents('.el-input,.el-select')[1] ? $(document.activeElement)
        .parents('.el-input,.el-select')[1] : $(document.activeElement).parents('.el-input,.el-select')[0];
      let nodeArrayActive;
      let x, y;
      let nodeArr = direction.nodeArray;
      nodeArr.forEach(item => {
        item.forEach((item2) => {
          if (item2.node == activeNode) {
            nodeArrayActive = item2;
            x = item2.value.x;
            y = item2.value.y;
          }
        })
      })
      // 右
      if (e.keyCode === 39) {
        x += 1;
        let nextIndex = nodeArr[y].findIndex(item => {
          return item.value.x == x && item.value.y == y
        })
        if (nextIndex != -1) {
          $(nodeArr[y][nextIndex].node).find('input').focus()
          if (nodeArr[y][nextIndex].value.type == 'select') {
            nodeArr[y][nextIndex].node["__vue__"].toggleMenu()
          }

          if(nodeArrayActive.value.type=='date'){

            this.$refs['date'+nodeArrayActive.value.dateIndex].hidePicker()

          }
          activeNode["__vue__"].blur();
        } else {
          x = 0;
          y += 1;
          if (nodeArr.length - 1 >= y) {
            let nextIndexRow = nodeArr[y].findIndex(item => {
              return item.value.x == x && item.value.y == y
            })
            console.log(nextIndexRow)
            if (nextIndexRow != -1) {
              $(nodeArr[y][nextIndexRow].node).find('input').focus();
              if (nodeArr[y][nextIndexRow].value.type == 'select') {
                nodeArr[y][nextIndexRow].node["__vue__"].toggleMenu()
              }
              if(nodeArrayActive.value.type=='date'){

                this.$refs['date'+nodeArrayActive.value.dateIndex].hidePicker()

              }
              activeNode["__vue__"].blur();
            } else {
              return;
            }
          }
        }
      }
      // 左
      if (e.keyCode === 37) {
        x -= 1;
        if (x >= 0) {
          let nextIndex = nodeArr[y].findIndex(item => {
            return item.value.x == x && item.value.y == y
          })
          if (nextIndex != -1) {

            $(nodeArr[y][nextIndex].node).find('input').focus();
            if (nodeArr[y][nextIndex].value.type == 'select') {
              nodeArr[y][nextIndex].node["__vue__"].toggleMenu()
            }
            if(nodeArrayActive.value.type=='date'){

              this.$refs['date'+nodeArrayActive.value.dateIndex].hidePicker()

            }

            activeNode["__vue__"].blur();

          } else {
            return

          }
        } else {
          y -= 1;
          if (y >= 0) {
            x = nodeArr[y][nodeArr[y].length - 1].value.x;
            let nextIndexRow = nodeArr[y].findIndex(item => {
              return item.value.x == x && item.value.y == y
            })
            console.log(nextIndexRow, x, y)
            if (nextIndexRow != -1) {
              $(nodeArr[y][nextIndexRow].node).find('input').focus();
              if (nodeArr[y][nextIndexRow].value.type == 'select') {
                nodeArr[y][nextIndexRow].node["__vue__"].toggleMenu()
              }
              if(nodeArrayActive.value.type=='date'){

                this.$refs['date'+nodeArrayActive.value.dateIndex].hidePicker()

              }

              activeNode["__vue__"].blur();
            }
          }
        }
      }
      // 上
      if (e.keyCode === 38) {
        y -= 1;
        if (y >= 0) {
          let nextIndexRow = nodeArr[y].findIndex(item => {
            return item.value.x == x && item.value.y == y
          })
          if (nextIndexRow != -1) {
            $(nodeArr[y][nextIndexRow].node).find('input').focus();
            if (nodeArr[y][nextIndexRow].value.type == 'select') {
              nodeArr[y][nextIndexRow].node["__vue__"].toggleMenu()
            }
            if(nodeArrayActive.value.type=='date'){

              this.$refs['date'+nodeArrayActive.value.dateIndex].hidePicker()

            }

            activeNode["__vue__"].blur();
          } else {
            x = 0;
            let nextIndexCol = nodeArr[y].findIndex(item => {
              return item.value.x == x && item.value.y == y
            })
            if (nextIndexCol != -1) {
              $(nodeArr[y][nextIndexCol].node).find('input').focus();
              if (nodeArr[y][nextIndexCol].value.type == 'select') {
                nodeArr[y][nextIndexCol].node["__vue__"].toggleMenu()
              }
              if(nodeArrayActive.value.type=='date'){

                this.$refs['date'+nodeArrayActive.value.dateIndex].hidePicker()

              }

              activeNode["__vue__"].blur();
            }
          }
        }

      }
      // 下
      if (e.keyCode === 40) {
        y += 1;
        if (y <= nodeArr.length - 1) {
          let nextIndexRow = nodeArr[y].findIndex(item => {
            return item.value.x == x && item.value.y == y
          })
          if (nextIndexRow != -1) {
            $(nodeArr[y][nextIndexRow].node).find('input').focus();
            if (nodeArr[y][nextIndexRow].value.type == 'select') {
              nodeArr[y][nextIndexRow].node["__vue__"].toggleMenu()
            }
            if(nodeArrayActive.value.type=='date'){

              this.$refs['date'+nodeArrayActive.value.dateIndex].hidePicker()

            }

            activeNode["__vue__"].blur();
          } else {
            x = 0;
            let nextIndexCol = nodeArr[y].findIndex(item => {
              return item.value.x == x && item.value.y == y
            })
            if (nextIndexCol != -1) {
              $(nodeArr[y][nextIndexCol].node).find('input').focus();
              if (nodeArr[y][nextIndexCol].value.type == 'select') {
                nodeArr[y][nextIndexCol].node["__vue__"].toggleMenu()
              }
              if(nodeArrayActive.value.type=='date'){

                this.$refs['date'+nodeArrayActive.value.dateIndex].hidePicker()

              }

              activeNode["__vue__"].blur();
            }
          }
        }
      }
    })
  },

由于是项目比较急搞得，有一些地方处理没有太好，基本就只是实现自己的目的，但基本通过这种方法能实现功能，基本思路就是通过节点和direction的nodeArr去操作聚焦，失焦，关闭，其中date我发现只能通过强行去操作ref去关闭，否则使用nodeArrayActive[“vue”]关闭一次后，就调用不了hidePicker方法，至于其他的框和类型，暂时还没做，以后有时间再做修改吧，只是提供一个思路，不一定适用所有人项目

学习让我快乐```
关注
专栏目录
JS实现方向键切换输入框焦点的方法
11-28
本文实例讲述了JS实现方向键切换输入框焦点的方法。分享给大家供大家参考。具体如下： 这里实现js方向键控制切换输入框焦点效果，不过无法兼容Firefox。当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内，无需点击鼠标，对于经常录入数据的时候，这种功能可提高输入速度。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
使用 vue-direction-key 快速切换 input 的焦点 focus
qq_36437172的博客
09-20 3363
功能介绍 vue 方向键插件，适合键盘的快捷键操作，通过键盘在 input 间切换，应用在后台系统开的，财务等快速输入和保存上，使用简单，配置方便。 使用方法 安装 npm install --save vue-direction-key 使用 在入口文件中引用 import Direction from 'vue-direction-key' Vue.use(Direction) 在模版文件中使用如下： <el-input placeholder="请输入内容" v-di..
vue+el-table 可输入表格使用上下键进行input框切换
最新发布
qq_44161722的博客
09-11 736
使用上下键进行完工数量这一列input的切换。
el-table中的输入框，用vue-direction-key实现键盘上下左右focus，但IE白屏
FLEX_TT的博客
11-01 633
我用的是vue2，在build\webpack.base.conf.js 加上 resolve('node_modules/vue-direction-key')看报错信息，原来是vue-direction-key里的箭头函数没有被转译。因为babel转译会忽略node_modules的文件。这个直接参考文章，如果不考虑IE的话到这一步就已经完成需求了。重启后main.js报错。我猜是因为不能混合使用。在main.js中把。
vue中使用箭头控制input的焦点 适合操作大量表格填写
weixin_45552104的博客
10-30 523
首先老样子 下载包 yarn add vue-direction-key 然后在全局引用或者组件 都行 // 引入控制input焦点插件 import Direction from 'vue-direction-key' Vue.use(Direction) 然后是在组件中填写 <el-table :data="tableData" style="width: 100%">
vue如何通过键盘方向键切换input焦点
大连海大
03-05 5002
功能介绍 vue方向键插件，适合键盘的快捷键操作，通过键盘在input间切换，应用在后台系统开单，财务等等的快速输入和保存上，使用简单，配置方便 使用方法 安装npm install --save vue-direction-key 使用 在入口文件中引用 import Direction from 'vue-direction-key' Vue.use(Direction) 在模...
基于VUE、iview实现零件号组件
weixin_42597770的博客
09-23 161
基于VUE、iview实现零件号组件 1、功能介绍 可自定义控制输入号码的长度，键盘左右键可切换位置，可进行空格分割，也可自己输入空格 2、组件代码实现 （1）实现原理是利用多个input相互切换，每一个字符对应一个input <template v-for="(item, index) in numberLen"> <Input class="node-input" :key="index" :maxlength="1"
Vue+ElementUI使用vue-pdf实现预览功能
10-15
以下是从给定文件信息中提取出的关于实现Vue+ElementUI中使用vue-pdf实现PDF预览功能的知识点。 首先，要使用vue-pdf插件，需要通过npm命令安装vue-pdf依赖到项目中。安装的命令是npm install --save vue-pdf。安装...
基于elementUI使用v-model实现经纬度输入的vue组件
10-17
综上所述，本文所介绍的基于elementUI使用v-model实现经纬度输入的Vue组件，充分展示了Vue.js和Element UI在构建复杂表单界面时的便利性和灵活性。通过组件化的思想，不仅简化了开发流程，也提高了代码的可维护性...
elementUi vue el-radio 监听选中变化的实例代码
10-16
ElementUI 是一个为 Vue.js 提供的一套基于 Vue 2.0 的桌面端组件库，它能够帮助开发者快速搭建美观、实用的 Web 界面。在使用 ElementUI 的过程中，我们经常会用到表单组件来收集用户的信息或输入。其中，el-radio ...
vue-direction-V Vuejs中的方向感知悬停-Vue.js开发
05-27
在Vuejs安装中使用Usag vue-direction方向感知悬停通过运行npm i vue-direction或yarn add vue-direction，通过npm安装组件。 用法导入，注册组件并将其放置在Vue应用程序中。 {{mouseDirection.x}} {{...
如何利用vue+vue-router+elementUI实现简易通讯录
10-17
运行`npm install -g vue-cli`，接着创建项目`vue init webpack contact`，进入项目目录`cd contact`，并安装依赖包`npm install`。为了在开发过程中实时预览，可以使用`npm run dev`命令，这将启动一个本地服务器并...
vue-自定义指令
qq_43611698的博客
02-14 632
键值修饰符 系统默认： .enter .tab .delete .esc .space .up .down .left .right 使用： <input @keyup.enter = 'submit'> 定义自定义全局： @keyup.f2 = "add" Vue.config.keyCodes.f2 = 113 //113 键盘码 定义全局指令： Vue.direction(参数1， 参数2) 在定义指令时不用加v-前缀，调用时加 Vue.d.
vue3+Element-Plus+js 解决表格按住上下左右获取焦点
m0_61629964的博客
08-04 1629
vue3+Element-Plus+js 解决表格按住上下左右获取焦点
Vue中key的作用及原理
热门推荐
cun的博客
10-11 2万+
在vue中key的作用是什么？实现原理是什么？如果不写会怎么样？
Vue:Element组件el-input输入框支持上下左右回车键跳转
qq_35147970的博客
07-04 3046
Element组件el-input输入框支持上下左右回车键跳转
vue中key的作用和工作原理
ZkD953的博客
11-22 561
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable.
elementUI——input无法输入/滑块点击不动
weixin_30609331的博客
08-22 673
通过this.$forceUpdate() 可以解决这个问题： 虽然问题解决了，但是并不知道为什么出现这样的情况。 转载于:https://www.cnblogs.com/liAnran/p/11395535.html
Vue element 表格内容上下左右编辑
hhhhhjkhf的博客
03-13 362
element table
使用elementUI与v-model构建 Vue 经纬度输入组件
"这篇文章主要讲解了如何在Vue.js项目中，结合ElementUI库，利用v-model来实现一个用于输入经纬度的自定义组件。组件允许用户以度、分、秒的形式编辑经纬度，并能自动处理度分秒之间的转换。" 在Vue.js中，v-model...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值