## 事件类型
* 点击事件
* 移动事件
* 获取焦点事件
* 失去焦点事件
##对应方法
* @click
* @left @right @up @down
* @focus
* @blur
### 点击事件
设置@click来响应事件,通过实例化注册的ENTER数组监听,可以传递参数
### **Templete**
~~~
<div v-items @click=itemClick('ok') >点击我</div>
export default {
methods:{
itemClick(msg){
alert(msg)
}
}
}
~~~
### 焦点移动事件
~~~
this.$service.move
~~~
> 默认响应 上下左右 是个方向,对应事件为 @up @down @left @right
如果事件没有传递任何参数则会有两个默认参数,(pointer,defaultFunc) 当前元素及默认事件,绑定了移动事件后,会默认将移动操作取消,可以通过执行defaultFunc来继续移动
当传递了参数后,需要通过调用epg服务来移动:this.$service.move('left')
获取item的方式有以下几种:
* this.$service.move(this.$service.pointer) 移动到默认焦点
* this.$service.move(this.$refs.toMe) 通过vue 的 refs 来获取元素
* this.$service.move(this.$el.querySelectorAll(".item")[0] 通过h5 的 querySelectorAll 方法来获取元素
* this.$service.move('left') 通过方向来移动焦点 参数可以时 right,up,down,left
### ***Example***
~~~
<div v-items @left="itemLeft">点击我</div>
<div v-items @right="itemRight('hello')">我传递了参数</div>
<div class="item" v-items refs="toMe">移动过来吧</div>
export default {
methods:{
itemLeft(pointer,next){
console.log('当前元素',pointer.$el)
next()//继续移动 如果不写,则焦点不会移动
},
itemRight(msg){
console.log(msg)
this.$service.move('right') //也可move('down') 改为向下移动
// this.$service.move(this.$refs.toMe)
//this.$service.move(this.$el.querySelectorAll(".item")[0]) //document.querySelectorAll 相同
}
},
mounted(){
//页面加载后,移动到默认焦点
this.$service.move(this.$service.pointer)
}
}
~~~
### 注意事项
请务必确保页面元素存在,才可以指定元素 move ,否则焦点移动会不执行,可以在异步事件完成后(如加载异步数据),调用move方法。可以使用 vue 的 $nextTicket 方法
没有指定默认pointer的时候,会选择一个被注册的焦点元素来作为默认焦点