按键上下左右切换输入框

使用插件

//第三方插件
'vue-direction-key';
// 安装
npm install --save vue-direction-key
// 或SDK
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-direction-key/direction.js"></script>

定义位置

// main.js
import Vue from 'vue';
import Direction from 'vue-direction-key';
Vue.use(Direction);
Vue.prototype.keyCodeSwitching = (_this, opt = {}) => {
	let { type = 'a' } = opt;
	let direction = _this.$getDirection(type);
	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();
	});
};

插件使用 - input

<template>
	<el-input placeholder="请输入内容" v-direction="{ x: 0, y: 0 }"></el-input>
	<input type="text" v-direction="{ x: 1, y: 0 }" />
</template>
<script>
//  注意事项:  x，y分别为x轴和y轴的坐标，事件的绑定必须在mounted之前，可以放在created中或者beforeMounted中(在mounted中绑定由于组建的渲染顺序可能会无效)
export default {
	beforeMounted() {
		this.keyCodeSwitching(this);
	},
};
</script>

插件使用 - table

<template>
	<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>
</template>
<script>
//  注意事项:  x，y分别为x轴和y轴的坐标，事件的绑定必须在mounted之前，可以放在created中或者beforeMounted中(在mounted中绑定由于组建的渲染顺序可能会无效)
export default {
	beforeMounted() {
		this.keyCodeSwitching(this);
	},
};
</script>

插件使用 - 多类切换

<template>
	<div>
		<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 }" />
	</div>
</template>
<script>
//  注意事项:  x，y分别为x轴和y轴的坐标，事件的绑定必须在mounted之前，可以放在created中或者beforeMounted中(在mounted中绑定由于组建的渲染顺序可能会无效)
// 若到 a的 1-0 位置 ,   按右的话 调不到b的 0-0 位置
export default {
	beforeMounted() {
		this.keyCodeSwitching(this, { type: a });
		this.keyCodeSwitching(this, { type: b });
	},
};
</script>