Tv-vconsole NPM

简体中文

TVConsole

一个轻量、可拓展、针对电视网页的前端开发者调试面板。

特性

继承vConsole V3.3.4所有PC端特性
支持自定义遥控按键,实现不同面板的切换
支持自定义遥控按键，实现面板滚动条的滚动
支持默认开启或者关闭vConsole面板
支持自定义遥控按键，实现面板的显示与隐藏
支持自定义遥控按钮，实现面板的清除日志

上手

下载 TVConsole 的最新版本。（不要直接下载 dev 分支下的 ./tv-vconsole.js）

或者使用 npm 安装：

npm install tv-vconsole

vue项目使用：

import TVConsole from 'tv-vconsole';

Vue.use(new TVConsole({
    maxLogNumber: 50, // vConsole 属性
    tvConfig: { // tv-vconsole 扩展的属性
      defaultOpen: false, // 是否默认打开tv-vconsole面板
      triggerOpenKeyCodes: [49, 50, 51, 52, 53], //  触发tv-vconsole面板打开或者关闭触发按键码
      scrollUpKeyCode: 56, // 触发tv-vconsole面板滚动条向上按键码
      scrollDownKeyCode: 48, // 触发tv-vconsole面板滚动条向下按键码
      leftKeyCode: 37, // 触发tv-vconsole面板焦点向左按键码
      rightKeyCode: 39, // 触发tv-vconsole面板焦点向右按键码
      upKeyCode: 38, // 触发tv-vconsole面板焦点向上按键码
      downKeyCode: 40, // 触发tv-vconsole面板焦点向下按键码
      clearLogKeyCode: 55, // 触发tv-vconsole面板清除log日志按键码
    },
  }));

引入 ./tv-vconsole.js 到项目中：

<script src="path/to/tv-vconsole.js"></script>
<script>
  // 初始化
  var vConsole = new TVConsole({
    maxLogNumber: 50, // vConsole 属性
    tvConfig: { // tv-vconsole 扩展的属性
      defaultOpen: false, // 是否默认打开tv-vconsole面板
      triggerOpenKeyCodes: [49, 50, 51, 52, 53], //  触发tv-vconsole面板打开或者关闭触发按键码
      scrollUpKeyCode: 56, // 触发tv-vconsole面板滚动条向上按键码
      scrollDownKeyCode: 48, // 触发tv-vconsole面板滚动条向下按键码
      leftKeyCode: 37, // 触发tv-vconsole面板焦点向左按键码
      rightKeyCode: 39, // 触发tv-vconsole面板焦点向右按键码
      upKeyCode: 38, // 触发tv-vconsole面板焦点向上按键码
      downKeyCode: 40, // 触发tv-vconsole面板焦点向下按键码
      clearLogKeyCode: 55, // 触发tv-vconsole面板清除log日志按键码
    },
  });
  console.log('Hello tv-vconsole');
</script>

设计原理

tv-vconsole 设计原理，完全继承vConsole, 并在vConsole的基础上，扩展适配电视端只有遥控器没有鼠标的情况也可以使用vConsole。以不占有电视现有焦点的方式使用tv-vconsole,所以弃用focus方法，只用遥控按键监听，然后对应响应到tv-vconsole DOM元素的click事件来实现tv-vconsole面板的显示与切换，进而实现TV下vConsole的友好使用。