yjhenan/vue-focusable

vue-focusable

基于 Vue 的 焦点组件,既键盘导航组件（keyboard navigation/spatial navigation）

参考：

vue-spatialnavigation

配置

• tag：必填，所要渲染的标签，如div
• clickable：选填，鼠标是否可点击/悬浮聚焦，默认为true
• className：选中状态下的 class 样式名称，默认为focus
• setupKeyBoardEvents：设置键盘事件

import Focusable, { SpatialNavigationOptions ,NavigationServiceDirection } from "../../dist/"
Vue.use(Focusable, <SpatialNavigationOptions>{
  tag: "div",
  clickable: true,
  setupKeyBoardEvents(el) {
    document.addEventListener("keydown", (e: KeyboardEvent) => {
      // 查找
      const keyCode = e.keyCode ? e.keyCode : e.charCode ? e.charCode : e.which;
      if (el) {
        switch (keyCode) {
          case 38:
            el.spatialNavigationAction(NavigationServiceDirection.Up)
            break;
          case 40:
            el.spatialNavigationAction(NavigationServiceDirection.Down)
            break;
          case 37:
            el.spatialNavigationAction(NavigationServiceDirection.Left)
            break;
          case 39:
            el.spatialNavigationAction(NavigationServiceDirection.Right)
            break;
          case 13:
            el.spatialNavigationAction(NavigationServiceDirection.Enter)
            break;
        }
      }
    });
  }
})

属性

当 left、right、up、down 为AUTOFOCUS时，跳转到下一个默认：具有data-default / default的焦点元素

属性名	说明
id	指定组件id：默认随机
data-default / default	是否为默认焦点
data-left / left	指定触发left事件时所要导航到的id
data-right / right	指定触发right事件时所要导航到的id
data-up / up	指定触发up事件时所要导航到的id
data-down / down	指定触发down事件时所要导航到的id

事件

事件参数：

{
    id: string,
    isDefault: boolean,
    isFocus: boolean
}

属性名	说明
focus	触发focus事件时
blur	触发blur事件时
click	触发click事件时
left	触发left事件时
right	触发right事件时
up	触发up事件时
down	触发down事件时

手动跳转

跳转到指定的 id

    import { navigationService } from "../../dist/";
    let el = navigationService.getFocusElementById("button2");
    if (el) el.focus()

组件使用

来自example目录下的HOME

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
    <div class="df fw yellow">
        <Focusable down="left1"  class="item blueviolet">{{0}}</Focusable>
        <Focusable v-for="i in 5" :key="i" class="item blueviolet" default>{{i}}</Focusable>
    </div>
    <Focusable id="f1" class="df crimson">
      <!-- <template>
        <div :style="{'color':scope.isFocus?'red':'#333'}">1111111{{scope}}</div>
      </template> -->
          <Focusable class="blue">
              <Focusable id="left0" right="right2"  class="item red">{{0}}</Focusable>
              <Focusable :id="'left' + i" right="right2" v-for="i in 5" :key="i" class="item red">{{i}}</Focusable>
          </Focusable>
           <Focusable class="df dfc red">
               <div>
                <Focusable class="df fw blueviolet">
                    <Focusable left="AUTOFOCUS" down="AUTOFOCUS" class="item blue">{{0}}</Focusable>
                    <div v-for="i in 10" :key="i">
                        <Focusable :id="'right' + i" v-if="i%2 == 0" class="item blue">{{i}}</Focusable>
                        <div  v-if="i%2 != 0" class="item crimson">{{i}}</div>
                    </div>
                </Focusable>
               </div>
               <Focusable class="df fw red">
                   <Focusable v-for="i in 10" :key="i" class="item yellow" default>{{i}}</Focusable>
               </Focusable>
           </Focusable>
    </Focusable>
  </div>
</template>

演示