## 事件類型
* 點擊事件
* 移動事件
* 獲取焦點事件
* 失去焦點事件
##對應方法
* @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的時候,會選擇一個被注冊的焦點元素來作為默認焦點