V5 (#509)

* update artplayer.d.ts * update variables.less * update artplayerPluginControl * build:all * update docs * update docs * update docs * Update layers.md * update index.js * update docs * update docs
2026-10-27 09:41:20 -08:00 · 2023-04-23 13:50:30 +08:00
1 parent c8c08137c4
commit ee49a0435e
@@ -0,0 +1,128 @@
+# 右键菜单
+
+## 配置
+
+| 属性      | 类型                | 描述                       |
+| --------- | ------------------- | -------------------------- |
+| `disable` | `Boolean`           | 是否禁用组件               |
+| `name`    | `String`            | 组件唯一名称，用于标记类名 |
+| `index`   | `Number`            | 组件索引，用于显示的优先级 |
+| `html`    | `String`, `Element` | 组件的 DOM 元素            |
+| `style`   | `Object`            | 组件样式对象               |
+| `click`   | `Function`          | 组件点击事件               |
+| `mounted` | `Function`          | 组件挂载后触发             |
+| `tooltip` | `String`            | 组件的提示文本             |
+
+## 创建
+
+<div className="run-code">▶ Run Code</div>
+
+```js{4-13}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);
+```
+
+## 添加
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6-13}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.contextmenu.add({
+    name: 'your-menu',
+    html: 'Your Menu',
+    click: function (...args) {
+        console.info(args);
+        art.contextmenu.show = false;
+    },
+});
+
+art.contextmenu.show = true;
+
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);
+```
+
+## 删除
+
+<div className="run-code">▶ Run Code</div>
+
+```js{21}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the contextmenu by name
+        art.contextmenu.remove('your-menu')
+    }, 3000);
+});
+```
+
+## 更新
+
+<div className="run-code">▶ Run Code</div>
+
+```js{21-24}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the contextmenu by name
+        art.contextmenu.update({
+            name: 'your-menu',
+            html: 'Your New Menu',
+        })
+    }, 3000);
+});
+```