功能介紹
vue方向鍵插件,適合鍵盤的快捷鍵操作,通過鍵盤在input間切換,應用在後臺系統開單,財務等等的快速輸入和保存上,使用簡單,配置方便
使用方法
- 安裝
npm install --save vue-direction-key
- 使用
在入口文件中引用
import Direction from 'vue-direction-key'
Vue.use(Direction)
在模版文件中使用
template中
<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-column
prop="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-column
prop="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-column
prop="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()
}
})
}
原鏈接:https://www.jianshu.com/p/b12dbb0b17f9