vuEPG

Vue2/3 通用大屏端焦点管理工具，基于 vue-epg 完全重写， with Typescript 😊

document

快速开始

安装

pnpm install vuepg

注册和配置插件实例

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

const epg = useVuEPG();
epg.setConfig({
  debug: true,
});

app.use(vuEPG);
// Vue.use(vuEPG) vue@2

调用实例方式

使用 useVuEPG()

<script setup>
import { useVuEPG } from "vuepg";

const epg = useVuEPG();

// epg.xxxx
</script>

使用 inject

在 Vue 3 中，插件会直接通过 provide 提供实例，我们可以直接调用

::: warning inject 方式在使用 Vue 2 时不可用 :::

<script setup>
const epg = inject("epg");

// epg.xxxx
</script>

默认 class

为了肉眼可见的效果，我们需要新建一个全局 class，你可以稍后对其进行更改。

.vuepg-focus {
  background: red;
}

基本使用

<template>
  <div v-epg-group>
    <div v-epg-item ref="top">Top</div>
    <div v-epg-group>
      <div v-epg-item>item1</div>
      <div v-epg-item>item2</div>
      <div v-epg-item @up="epg.move(top)">item3</div>
    </div>
  </div>
</template>

<script setup>
import { useVuEPG } from "vuepg";
import { ref, onMounted } from "vue";
const epg = useVuEPG();

const top = ref();

onMounted(() => {
  epg.move(top.value);
});
</script>