import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1759888544000}'),p={name:"en/component/contextmenu.md"};function t(h,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s('

Context Menu ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique component name for CSS class
indexNumberComponent index for display priority
htmlString, ElementComponent DOM element
styleObjectComponent style object
clickFunctionComponent click event
mountedFunctionTriggered after component mount
tooltipStringComponent tooltip text

Creation ​

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
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']);

Addition ​

`,2),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
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']);

Removal ​

`,2),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
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);
});

Update ​

`,2),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
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);
});
`,1)]))}const o=n(p,[["render",t]]);export{g as __pageData,o as default};