vue 上下键li_解决页面需要上下左右选中元素的问题，富操作__Vue.js

前言

纯粹是因为无聊吧，然后就是突发奇想。

我以前开发过web端的收银系统。之前更早的时候也是做过零售软件方面的实施，通常在门店的时候收银员为了更为快速的去收银，是很少会去用鼠标的。都是键盘解决。但是web操作系统页面有一个问题。就是你的通过tab等方式其实不是很方便。然后我们还有商品列表也需要通过键盘方式选中返回。如果通过鼠标，在一些门店每天都是几万的销售额中，是非常累人，且效率低下的。这次开发的这个插件也是为了解决这方面的问题。

目前做到了基本的上下左右，属于初步的完成。未经业务实战。但是我想还是比较OK的。

原理：

首先，我们想要键盘上面操作选中dom元素。有本身的tap，上下左右等等，也可以使用tabindex，方式。但是这些都无法说使得操作统一方便。规则较为混乱，并且我们都知道div是么有焦点这个状态的。

那么我们想要实现的情况下，那么就需要自己造轮子了。我们自己来定义并且实现这一套规则。

1、监听键盘的上下左右

2、随着元素的上下左右进行数据移动。

吐槽一下，如果是jquery时代，怕是要麻烦很多。

实现左右移动

左右移动其实很简单，我们只要操作元素的数组的index对应的增加减就可以了。所以代码简单的不行。

同理，我们要操作元素的上下也可以这样实现。但是我的目的是要普适性的实现。那么左右我们是根据既定规则来实现的。

定义插入的数组的元素结构

// 设置绑定的初始数据

this.dhtSetList({

bindData: value, // 绑定数据

self: this, // 本身

select: