快速开始

安装

pnpm add vuepg@^1.2.2

注册和配置插件实例

// 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 时不可用
• inject 得到的对象不包含按键事件相关的方法（如 setAction），需要时请使用 useVuEPG()

<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>