焦点（focus)

与手机、PC等交互不同，目前用户通过遥控器控制焦点移动、点击确定的方式来达到与智能电视交互的目的。
所以在智能电视应用开发时，焦点是一个重点也是难点，应当特别关注。

焦点（focus）一般在一个窗口（例如页面或者弹窗）中是唯一存在的，当一个元素获得焦点时，其它元素将失去焦点。

[范例：focus-basic.vue]

[范例：focus-event.vue]

focusable属性

一个页面中元素，需要通过 focusable属性来表示其可拥有获得焦点的机会。例如：

点击查看源码

<!-- 此div可获得焦点-->
<div :focusable="true"></div>

<!-- 此div不可获得焦点-->
<div :focusable="false">
    <!-- 此img标签可获得焦点-->
    <img :focusable="true" />
</div>

除各别特殊组件外，一般标签focusable属性默认为false。
另外需要注意，原则上ul、swiper等标签不应当设置focusable为true。

焦点样式

当一个元素获得焦点时，应改变其与普通状态的样式来供用户分辨焦点位置。

目前智能电视上的主流应用，都是通过放大元素或者加边框的方式来区分焦点状态。

有快应用开发中，有很多种方式实现状态变化，以下列出一种常用的方法：

点击查看源码

 <div class="focusBox" :focusable="true">
 </div>

css如下：

点击查看源码

.focusBox{
    width: 50px;
    height: 50px;
    padding: 5px;
    background-color: transparent;
    focus-scale:1.1;
    focus-background-color:red;
    focus-border-style:solid;
    focus-border-radius: 5px;
 }

通过以上代码，可实现一个div在焦点状态时显示红色背景、放大1.1倍并且加5像素圆角的白色边框。

另外使用全局模块FocusModule可以在应用初始化时设置默认焦点样式，示例：

点击查看源码

//设置默认焦点颜色
Vue.Native.callNative('FocusModule', 'setDefaultFocusBorderColor', '#ffffff');
//设置焦点框是否有内里黑色边框
Vue.Native.callNative('FocusModule', 'setDefaultFocusInnerBorderEnable',true);
//设置默认焦点边框圆角
Vue.Native.callNative('FocusModule', 'setDefaultFocusBorderCorner', 5);
 //设置默认焦点边框是否开启
Vue.Native.callNative('FocusModule', 'setDefaultFocusBorderEnable', true);
//设置默认焦点放大倍数
Vue.Native.callNative('FocusModule', 'setDefaultFocusScale', 1.1);

其它方式请参考demo

状态变化

当div设置focusable为true时，内部的元素可通过将duplicateParentState属性设置为true，跟随div的状态改变。 示例：

点击查看源码

 <div class="divBoxClass" :focusable="true">
        <div class="divBoxTest" :duplicateParentState="true">
          <p :duplicateParentState="true">焦点时变色</p>
          <p :duplicateParentState="false">焦点时不变</p>
        </div>
 </div>

上述代码可实现p标签随着焦点状态改变颜色