OTT开发总结

插件使用

npm install vue-awesome-mui

npm i vue-tv-focusable

聚焦插件

常用指令

this.$tv.requestFocus(Element,bool); // Element;
必填 bool非必填。默认为true指定移动到某个聚焦节点,获取节点Element可以用refs或者 e.target
 
 this.$tv.formAutofocus=false；// 不可以输入
控制选中的表单是否可以输入,默认为true
 
this.$tv.findFocusType  = 0;
聚焦查找方式,1是就近查找,0是直线查找
 
@up @down @left @right @onFocus @onBlur @longPress @click
监控按键,其中click同事可对应pc端的点击事件
 
$tv.resetFocusClassName()   重置 focusClassName   
$tv.resetFindFocusType()    重置 findFocusType    
$tv.resetKEYS()  重置 KEYS
....
$tv.reset() 重置所有
 
初始配置
 // 初始化配置
    // 全局配置可在mian.js中，也可以放在APP.vue中
  const vm = new Vue();
  // 1.init初始化（init的所有配置项可以在最后面的表格中查看）
  vm.$tv.init({
    focusClassName: "on-focus", // 聚焦元素的className （默认focus）
     KEYS: {
      KEY_LEFT: [37, 21], 
      KEY_UP: [38, 19], 
      KEY_RIGHT: [39, 22], 
      KEY_DOWN: [40, 20]，
      KEY_ENTER: [40, 20]
     }, // 自定义键值
     longPressTime: 800, // 长按响应时间（单位：毫秒），默认500ms
     distanceToCenter: false // 是焦点始终在可是范围的中间部分， 默认false
  });
 
// 2.独立配置初始化
  vm.$tv.KEYS=  {
      KEY_LEFT: [37, 21], 
      KEY_UP: [38, 19], 
      KEY_RIGHT: [39, 22], 
      KEY_DOWN: [40, 20]，
      KEY_ENTER: [40, 20]
   };  
   vm.$tv.longPressTime= 800;  //延迟事件为800毫秒
 
//3.聚焦滑动效果
    //滚动时间，默认200
    // this.$tv.smoothTime = 300;
    this.$tv.smoothTime = 0;//设置为0的话就是不要动画
    //动画流畅度smoothTime(数值越小动画越流畅,
    //但是越耗性能)默认是20，
    //当smoothTime设置为40时,spacingTime=20和spacingTime=1的效果是不一样的
    this.$tv.spacingTime = 40;
 
//4.限制滚动区域(图一)
    //一般在弹窗或者横向移动图（如：选集）的时候可以用到，一般都是三个属性连用
      //只有upbox里面的内容可以聚焦
                  this.$tv.limitingEl = document.querySelector(".upbox");
      //限制页面的滚动的盒子
                  this.$tv.scrollEl = this.$tv.getElementByPath(
                    '//div[@class = "upbox"]'
                  );
     //强制聚焦到某个内容（当前弹窗中的可聚焦内容）
                  this.$tv.requestFocus(this.$refs.update);
                }, 600);
  //值得注意的是，当聚焦弹窗关闭之后，或者需要切换页面的时候，需要重置limitingEl和scrollEl，否则将会出现无法聚焦和无法滚动等bug
    //重制
      this.$tv.resetScrollEl();
      this.$tv.limitingEl = null;//或者    this.$tv.resetLimitingEl();