mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
Harvey Zack
bbbeca6e4c
Update progress bar height in Artplayer Add dynamic layer, controller, menu, and setting item management Update Changelog_CN Update utils.js Update package.json Update built-in management in Artplayer Update i18n documentation Add support for new languages Update language import and modification
128 lines
2.9 KiB
Markdown
128 lines
2.9 KiB
Markdown
# 右键菜单
|
|
|
|
## 配置
|
|
|
|
| 属性 | 类型 | 描述 |
|
|
| --------- | ------------------- | -------------------------- |
|
|
| `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);
|
|
});
|
|
``` |