@chancestv/tv-focus 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -42
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,51 +1,15 @@
|
|
|
1
1
|
# @chancestv/tv-focus
|
|
2
2
|
|
|
3
|
-
面向低版本 WebView（Chromium 53+）的 Vue 3 TV
|
|
3
|
+
面向低版本 WebView（Chromium 53+）的 Vue 3 TV 端空间导航焦点系统。遥控器方向键按屏幕几何位置在元素间移动焦点，支持 section 分区、模态层栈、记忆焦点。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
> 业务层通常不直接使用本包，而是通过 [`@chancestv/tv-ui`](https://www.npmjs.com/package/@chancestv/tv-ui) 的组件使用。
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## 文档
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
pnpm add @chancestv/tv-focus vue
|
|
11
|
-
```
|
|
9
|
+
完整文档、安装、用法、API 与在线 Demo 见 GitHub 仓库（npm 页不再维护文档，以仓库为准）：
|
|
12
10
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
```ts
|
|
16
|
-
import { setupFocus, nativeKeyAdapter } from '@chancestv/tv-focus'
|
|
17
|
-
|
|
18
|
-
// 应用入口调用一次
|
|
19
|
-
setupFocus({ defaults: { rememberSource: true } })
|
|
20
|
-
// 把 OTT 原生遥控器按键透传为合成 keydown/keyup
|
|
21
|
-
nativeKeyAdapter('your-native-key-event-name')
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
```vue
|
|
25
|
-
<script setup lang="ts">
|
|
26
|
-
import { FocusSection, Focusable } from '@chancestv/tv-focus'
|
|
27
|
-
</script>
|
|
28
|
-
|
|
29
|
-
<template>
|
|
30
|
-
<FocusSection id="home">
|
|
31
|
-
<Focusable v-slot="{ focused }">
|
|
32
|
-
<div :class="{ active: focused }">item</div>
|
|
33
|
-
</Focusable>
|
|
34
|
-
</FocusSection>
|
|
35
|
-
</template>
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## 导出
|
|
39
|
-
|
|
40
|
-
- 初始化：`setupFocus` / `nativeKeyAdapter` / `SpatialNavigation`
|
|
41
|
-
- 组件：`Focusable` / `FocusSection` / `FocusLayer`
|
|
42
|
-
- 组合式：`useFocusable` / `useFocusSection` / `useKeepAliveFocus`
|
|
43
|
-
- 工具：`hasOpenLayer`
|
|
44
|
-
- 类型：`Direction` / `Restrict` / `EnterTo` / `LeaveFor` / `SectionConfig` 等
|
|
45
|
-
|
|
46
|
-
## 兼容目标
|
|
47
|
-
|
|
48
|
-
产物语法降级到 `chrome53`。
|
|
11
|
+
- 仓库与文档：https://github.com/danweiyuancircle/chances-tv-kit
|
|
12
|
+
- 在线 Demo（遥控器方向键操作）：https://danweiyuancircle.github.io/chances-tv-kit/
|
|
49
13
|
|
|
50
14
|
## License
|
|
51
15
|
|