mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-24 06:31:20 -08:00
docs(core): [SITE-04] document component lifecycle and selector contracts
This commit is contained in:
1 parent
5910c3f179
commit
bb2fec8dd1
110 files changed
+4745
-2334
No files matched your search
@@ -7,11 +7,12 @@
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称,用于标记类名 |
|
||||
| `index` | `Number` | 组件索引,用于显示的优先级 |
|
||||
| `html` | `String`, `Element` | 组件的 DOM 元素 |
|
||||
| `html` | `String`, `Element`, `Number` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
| `beforeUnmount` | `Function` | 显式 remove/update 移除前的回调 |
|
||||
| `tooltip` | `String`, `Number` | 组件的提示文本 |
|
||||
|
||||
## 创建
|
||||
|
||||
@@ -125,4 +126,23 @@ art.on('ready', () => {
|
||||
})
|
||||
}, 3000);
|
||||
});
|
||||
```
|
||||
```
|
||||
|
||||
## 菜单管理与生命周期 {#contextmenu-contract}
|
||||
|
||||
配置、回调、返回值、名字冲突及更新/清理规则见[组件公共行为](./layers#component-contract)。父节点为 template.$contextmenu;管理器名称是 contextmenu,条目类名为 art-contextmenu 和 art-contextmenu-NAME。show/toggle 控制整个菜单,不是单项可用状态;点击自定义条目不会自动关闭菜单,可在回调中设置 art.contextmenu.show = false。
|
||||
|
||||
桌面初始化安装内置条目和配置条目,并处理右键、键盘、菜单外点击及播放器 blur。移动端不会自动执行这段初始化;直接 add 仍可注册条目,但这不等于已安装完整的桌面右键流程。不要通过重复初始化来刷新菜单,用 add/update/remove 管理条目。
|
||||
|
||||
## TypeScript 菜单示例
|
||||
|
||||
```ts
|
||||
import Artplayer from 'artplayer/runtime';
|
||||
|
||||
const art = new Artplayer({ container: '#player', url: '/video.mp4' });
|
||||
const menu: HTMLDivElement | undefined = art.contextmenu.add({
|
||||
name: 'custom-menu', html: 'Close menu',
|
||||
click() { this.contextmenu.show = false; },
|
||||
});
|
||||
if (menu) art.contextmenu.remove('custom-menu');
|
||||
```
|
||||
Reference in new issue
Block a user