vue-epg 差异 #

vuEPG 保留、更改或移除了一些 vue-epg 的特性。为了旧组件的重用，你需要参考本页内容。

未移除，可恢复的 #

移动逻辑 #

vuEPG 的移动逻辑是完全重新编码的，与 vue-epg 完全不同。vuEPG 是通过 EPGGroup 和 EPGItem 的层级关系来进行移动的，而 vue-epg 是通过对所有 Item 进行对比来移动的。如果你觉得新的逻辑有问题，可以使用以下方式暂时还原到 vue-epg 的移动逻辑。

// main.js
import { useVuEPG } from "vuepg";
const epg = useVuEPG();

epg.setConfig({
  useOldMoveRule: true,
});

按键事件 #

vue-epg 默认对所有按键操作执行 preventDefault() 操作并且无法设置，这样会导致所有按键操作事件全部失效，无法输入数字，也无法使用键盘原生的各种功能。 vuEPG 中，默认只会对预定义的 7 种按键事件执行preventDefault() 操作，并且也可以通过设置来操控是否需要preventDefault() ，详见按键事件。

自定义指令变更 #

vue-epg 使用 v-items/v-groups 指令来注册可移动对象和组，但这在使用逻辑和代码逻辑上都是有误的，且 v-groups 实际意义不大。为了兼容性，v-items/v-groups 依旧可用，编写新代码时，请使用 v-epg-item/v-epg-group 替代。

已移除，可恢复的 #

$service #

vuEPG 移除了对 $service 的默认绑定。因为 $service 的名称不具有唯一性，容易出现一些问题。为了兼容性，你需要手动赋值全局变量。

// main.js
import { useVuEPG } from "vuepg";
const epg = useVuEPG();

// Vue2
Vue.prototype.$service = epg;
// Vue3
app.config.globalProperties.$service = epg;

serviceBack #

vuEPG 移除了对 serviceBack 的支持。 在 vue-epg 中，serviceBack 是使用 mixins 实现的。mixins 是 Vue 2 创建可重用组件逻辑的主要方式，但现在已不再推荐。为了兼容性，你需要手动配置 mixin。

// main.js
import { useVuEPG } from "vuepg";

const epg = useVuEPG();

Vue.mixin({
  created() {
    if (this.serviceBack) {
      epg.onBack(this.serviceBack);
    }
  },
});

已弃用，不可恢复的 #

XPath #

vuEPG 完全移除了对 XPath 的支持，getPointerPosition() 和 getEleByPath(xpath) 已不再可用，如果你需要用到，可以在你的项目中自行实现相关功能。

Group class #

Group class 无实际意义，已移除，不再对 group 自动添加 class。通常情况下，你都可以手动为 Group 添加 class。