ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## v-items ### 组件绑定 ### 参数 * class string 类型 * default bollen 类型 默认情况下,页面中没有定义焦点,我们可以绑定在任意html元素 或组件([components](https://cn.vuejs.org/v2/guide/components.html))上 ### **HTML** ~~~ //在元素上使用 v-items 指令注册焦点元素 <div class="shop-list-item" v-items v-for="item in list" @click="itemClick(item)"> <div class="title">{{item.title}}</div> </div> ~~~ ### **JS** ~~~ export default { name: 'example', data() { return { list:[{id:1,title:'第一个测试焦点'}] } }, methods:{ //元素点击事件 itemClick(item){ console.log(`${item.id} - ${item.title}`) } } } ~~~ ### 设置及获取默认焦点 通过 **default:true** 来设置默认焦点,组件加载完成后会自动在默认焦点上响应 fouces 事件,并设置focus 样式 通过 **class:'new_focus_class'** 来设置新的焦点样式 ### **HTML** ~~~ <div class="my nav-item" v-items="{default:true}" > <div class="translate-block"> <div class="title">首页</div> </div> </div> <div class="search nav-item" v-items="{default:true}"> <div class="translate-block"> <div class="title">最新</div> </div> </div> <div class="lottery nav-item" v-items={class:'curr'} > <div class="translate-block"> <div class="title">最热</div> </div> </div> ~~~ 也可以通过 绑定值来设置是否为默认焦点,通常页面只有一个默认焦点,如果出现多次,则默认会以最后一个为准 ### 通过服务获取默认焦点 ### **JS** ~~~ this.$service.pointer //返回为一个epg 的pointer对象,可以调用pointer.$el 获取元素实例 ~~~