TvCard 焦点元素 TV
该方法或组件支持轻应用调用

TV 焦点元素
通过该组件，设置可聚焦元素，该组件需要内嵌于 tv-chunk 组件中。
按下摇控方向键时，有默认的自动寻焦算法，也可以自定义寻焦逻辑。

引入方式

数字生活小程序工程-TV模板，不需要 import，直接使用组件标签即可。

import { TvCard } from '@21cnfe/tv-vui'
Vue.component('TvCard', TvCard)

代码演示

<div class="container">
    <tv-chunk>
        <div class="nav">
            <tv-card 
                :stopTop="i === 0" 
                @onFocus="onNavFocus(i)" 
                v-for="(navItem, i) in nav" 
                :key="navItem.id">
                {{ navItem.title }}
            </tv-card>
        </div>
    </tv-chunk>
    <tv-chunk>
        <div class="title">标题</div>
        <div class="goods">
            <tv-card>
                卡片
            </tv-card>
            <tv-card>
                卡片
            </tv-card>
        </div>
    </tv-chunk>
</div>

API

属性	说明	类型	默认值
`focusDisable`	禁止聚焦到该元素	Boolean	false
`stopLeft`	当焦点在当前元素时，禁止焦点向左移动	Boolean	false
`stopRight`	当焦点在当前元素时，禁止焦点向右移动	Boolean	false
`stopUp`	当焦点在当前元素时，禁止焦点向上移动	Boolean	false
`stopDown`	当焦点在当前元素时，禁止焦点向下移动	Boolean	false
`nextLeftElement`	当焦点在当前元素时，按左方向键时，自定义焦点切换元素	Object	-
`nextRightElement`	当焦点在当前元素时，按右方向键时，自定义焦点切换元素	Object	-
`nextUpElement`	当焦点在当前元素时，按上方向键时，自定义焦点切换元素	Object	-
`nextDownElement`	当焦点在当前元素时，按下方向键时，自定义焦点切换元素	Object	-

Events

事件名称	说明	回调参数
`onFocus`	元素获取焦点时触发	`--`
`click`	元素被点击时触发	`--`
`left`	元素聚焦时，按左方向键触发	`--`
`right`	元素聚焦时，按右方向键触发	`--`
`up`	元素聚焦时，按上方向键触发	`--`
`down`	元素聚焦时，按下方向键触发	`--`

1. TvCard 焦点元素 TV 该方法或组件支持轻应用调用

TvCard 焦点元素 TV 该方法或组件支持轻应用调用

引入方式

代码演示

API

Events

TvCard 焦点元素 TV
该方法或组件支持轻应用调用