ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 事件类型 * 点击事件 * 移动事件 * 获取焦点事件 * 失去焦点事件 ##对应方法 * @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的时候,会选择一个被注册的焦点元素来作为默认焦点