使用 vue-direction-key 快速切换 input 的焦点 focus
功能介绍
vue 方向键插件,适合键盘的快捷键操作,通过键盘在 input 间切换,应用在后台系统开的,财务等快速输入和保存上,使用简单,配置方便。
使用方法
- 安装
npm install --save vue-direction-key
- 使用
在入口文件中引用
import Direction from 'vue-direction-key'
Vue.use(Direction)
在模版文件中使用如下:
<el-input placeholder="请输入内容" v-direction="{x: 0, y: 0}"></el-input>
<input type="text" v-direction="{x: 1, y: 0}">
script中
created: function () {let direction = this.$getDirection()direction.on('keyup', function (e, val) {if (e.keyCode === 39) {direction.next()}if (e.keyCode === 37) {direction.previous()}if (e.keyCode === 38) {direction.previousLine()}if (e.keyCode === 40) {direction.nextLine()}})
}
说明: x,y分别为x轴和y轴的坐标,事件的绑定必须在mounted之前,可以放在created中或者beforeMounted中(在mounted中绑定由于组建的渲染顺序可能会无效)
api
在vue组件钩子中使用this.$getDirection()获取direction对象,该对象有以下方法
direction.on(keys, fun)
- 参数: keys: (string) 原生的事件参数如: 'keyup', 'keydown'等
fun: 自定义函数,有两个参数function(e, val),e为event对象,val为触发的input绑定的自定义指令的值,可以通过此选项来传值进行特殊判断,例如:
template中
<input type="text" v-direction="{x: 1, y: 0, type: 'name'}">
script中
direction.on('keyup', function (e, val) {if (val.type === 'name') {console.log(111)} })
- 作用: 给directive作用的原生input绑定事件,注意是绑定在原生的input上,例如:
direction.on('keyup', function (e, val) {if (e.keyCode === 39) {direction.next()}if (e.keyCode === 37) {direction.previous()}if (e.keyCode === 38) {direction.previousLine()}if (e.keyCode === 40) {direction.nextLine()} })
- 参数: keys: (string) 原生的事件参数如: 'keyup', 'keydown'等
direction.next(x, y)
- 参数: x,y轴的坐标,例如(1, 1) <选填>,默认为当前focus的input坐标
- 作用: 光标移动到下一个input
direction.previous(x, y)
- 参数: x,y轴的坐标,例如(1, 1) <选填>,默认为当前focus的input坐标
- 作用: 光标移动到上一个input
direction.previousLine(x, y)
- 参数: x,y轴的坐标,例如(1, 1) <选填>,默认为当前focus的input坐标
- 作用: 光标移动到上一行的input
direction.nextLine(x, y)
- 参数: x,y轴的坐标,例如(1, 1) <选填>,默认为当前focus的input坐标
- 作用: 光标移动到下一行的input
direction.onEnd
- 作用: 函数,光标移动到最后一个input出发的函数
例如:
direction.onEnd = function () {console.log(111) }
- 作用: 函数,光标移动到最后一个input出发的函数
在element表格中使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><title>vue-direction-key</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><!-- 引入vue-direction-key --><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-direction-key/direction.js"></script>
</head><body><div id="app"><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"><template slot-scope="scope"><el-input v-model="scope.row.date" placeholder="请输入内容" v-direction="{x: 0, y: scope.$index}"></el-input></template></el-table-column><el-table-columnprop="name"label="姓名"width="180"><template slot-scope="scope"><el-input v-model="scope.row.name" placeholder="请输入内容" v-direction="{x: 1, y: scope.$index}"></el-input></template></el-table-column><el-table-columnprop="address"label="地址"><template slot-scope="scope"><el-input v-model="scope.row.address" placeholder="请输入内容" v-direction="{x: 2, y: scope.$index}"></el-input></template></el-table-column></el-table></div>
</body><script type="text/javascript">Vue.use(Direction)var app = new Vue({el: '#app',data: {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]},created: function () {let direction = this.$getDirection()direction.on('keyup', function (e, val) {console.log(val)if (e.keyCode == 39) {direction.next()}if (e.keyCode == 37) {direction.previous()}if (e.keyCode == 38) {direction.previousLine()}if (e.keyCode == 40) {direction.nextLine()}})}})
</script>
</html>
多个组件共存
如果一个组件里面有多个表格或控件,可以支持自定义指令的参数,例如
<input type="text" v-direction:a="{x: 0, y: 0}">
<input type="text" v-direction:a="{x: 1, y: 0}">
<input type="text" v-direction:b="{x: 0, y: 0}">
<input type="text" v-direction:b="{x: 1, y: 0}">
created: function () {let a = this.$getDirection('a')a.on('keyup', function (e, val) {if (e.keyCode === 39) {a.next()}if (e.keyCode === 37) {a.previous()}if (e.keyCode === 38) {a.previousLine()}if (e.keyCode === 40) {a.nextLine()}})let b = this.$getDirection('b')b.on('keyup', function (e, val) {if (e.keyCode === 39) {b.next()}if (e.keyCode === 37) {b.previous()}if (e.keyCode === 38) {b.previousLine()}if (e.keyCode === 40) {b.nextLine()}})
}
使用 vue-direction-key 快速切换 input 的焦点 focus相关推荐
- ios webView 放大网页解决/input 获得焦点focus 网页放大 解决
新手遇到的问题: 终于找到原因,各种HTML viewport 都试过 setScalePageToFit 也试过,webViewDidFinishLoad加JS代码,动态算webView.scrol ...
- vue.js的快速入门使用
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angula ...
- Vue全家桶快速开发指南
Vue全家桶快速开发指南着手与项目 环境配置 安装npm 安装vuecli4.x 构建项目 图形化构建 命令行配置 代码目录 vue-router 定义组件 组件的作用 如何定义组件 在需要他显示的h ...
- vue中key的作用及案例
1.key的作用 假设现在有一个需求,在页面循环data中的数组. <div id="app"><ul><li v-for="(item, ...
- 2017 Vue.js 2快速入门指南
注意,据部分读者反映本文水多,怕湿身者勿进.后续推荐详解 Vue & Vuex 实践 2017 Vue.js 2快速入门指南翻译自Vue.js 2 Quickstart Tutorial 20 ...
- vue lang_推荐一个基于Vue 的 H5 快速开发模板
关注 Vue社区,回复"加群" 加入我们一起学习,天天进步 praise juejin.im/post/5e612534e51d4527017971a2 模板基于 vue-cli4 ...
- 如何实现一个地图库封装,可以快速切换地图
前言 日前在公司负责的主要业务是gis开发相关,现在使用的是百度地图,百度地图相比高德地图总有些缓慢.卡顿.因此才想到了这个方案.实现一个自己的库,可以快速切换百度地图与高德地图. 思路 有了上面这个 ...
- 1. vue.js的快速入门使用
1. vue.js的快速入门使用1.1 vue.js库的下载1.2 vue.js库的基本使用1.3 vue.js的M-V-VM思想1.4 显示数据2. 常用指令2.1 操作属性2.2 事件绑定例如:完 ...
- Vue (一) --- vue.js的快速入门使用
=-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...
最新文章
- phpcms标签大全V9
- 【百度地图API1.1】修改文本标注的样式
- opencv 使用cvload加载xml出现错误原因解析及方法
- PHP 如何阻止用户上传成人照片或者裸照
- 通过sql-labs进行sql注入学习(11-22)
- 解决pl/sql devloper 中数据库操作语句中文乱码的问题
- PyMongo--非关系型数据库mongodb入门(一步一步 版)
- 动态照片墙 python 实现_利用python生成照片墙的示例代码
- 并发高?可能是编译优化引发有序性问题
- EL表达式+JSTL,forEach的两种用法
- 【转】浅论ViewState及其与Session的关系
- hdu4504java
- unity 将虚拟相机的视角局部放大,显示在一个平面上
- 利用Cramer法则求具有唯一解的方程组的解
- ionic 插件安装
- ems苹果专线投递速度_苹果官网运抵速度让人欲罢不能
- 知识图谱-KGE-语义匹配-双线性模型-2019:QuatE
- amd为什么还用针脚_闲聊CPU针脚 一年一换都怪AMD不给力?
- 如何在鸿蒙系统中移植 Paho-MQTT 实现MQTT协议
- 量化策略——准备2 量化技能树量化术语
热门文章
- 倍增算法入门 超详细解答+LCA+RMQ(ST表)+例题剖析
- 【JHOK-ZBZ201型智能型剩余电流继电器】
- 3D视觉检测:智能工业机器人从平面到立体的“视界”升级
- 原生七彩影视APP源码 支持PC+WAP+APP三端
- ENDNOTE 添加国标参考文献格式
- 近视200度能学计算机吗,近视200度严重吗
- Bootstrap学习(三)——Bootstrap 插件
- Deep Feedback Network for Recommendation用于推荐系统的深度反馈网络
- matlab 报错:数组索引必须为正整数或逻辑值。
- three.js之高级几何体-使用二元操作组合网格(vue中使用three.js38)