OTT开发总结 2.0版本

发布于 2022-05-07  352 次阅读


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();

1651905417303


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。