右键菜单

演示

警告

此插件只适用于pc端

安装

npm i @lin-media/contextmenu

初始化

import MediaPlayer from "@lin-media/player";
import Contextmenu from "@lin-media/contextmenu";
MediaPlayer.use(Contextmenu);

const contextMenuList = [
  {
    label: "播放",
    desc: "描述信息",
    type: "MenuItem",
    callback: () => {
      player.play();
    },
    eventName: "click-play"
  },
  {
    label: "暂停",
    type: "MenuItem",
    callback: () => {
      player.pause();
    }
  },
  {
    label: "播放/暂停",
    type: "MenuItem",
    callback: () => {
      player.toggle();
    }
  },
  {
    type: "MenuLine"
  },
  {
    type: "SubMenuItem",
    label: "倍数",
    subMenuList: [
      {
        label: "0.5x",
        callback: () => {
          player.setSpeed(0.5);
        }
      },
      {
        label: "1x",
        callback: () => {
          player.setSpeed(1);
        }
      },
      {
        label: "1.5x",
        callback: () => {
          player.setSpeed(1.5);
        }
      }
    ]
  },
  {
    type: "SubMenuItem",
    label: "清晰度",
    subMenuList: [
      {
        label: "标清",
        callback: () => {
          player.switchDefinition(0);
        }
      },
      {
        label: "高清",
        callback: () => {
          player.switchDefinition(1);
        }
      }
    ]
  }
];
const player = new MediaPlayer({
  // ...
  Contextmenu: {
    menuList: contextMenuList,
    // 一级菜单宽度
    menuItemWidth: "300px",
    // 二级菜单宽度
    subMenuItemWidth: "100px"
  }
});

player.$on("click-play", (item) => {
  console.log(item);
});

Contextmenu 参数

提示

Contextmenu 参数设置为 false 可关闭插件功能

参数	说明	类型	可选值	默认值
menuList	菜单列表，格式见下方	Array	—	—
menuItemWidth	一级菜单宽度	string	—	250px
subMenuItemWidth	二级菜单宽度	string	—	80%

menuList 参数格式

菜单项分为三种格式，分别是：MenuItem，MenuItemLine，SubMenuItem

MenuItem：

字段	说明	类型
type	菜单类型，值为：MenuItem	string
label	菜单文本	string
callback	回调函数，可选。存在时，点击菜单项会执行，回调参数：MenuItem	Function
eventName	自定义事件，可选。存在时，点击菜单项会广播事件	string
desc	描述信息，可选。	string

MenuItemLine：

字段	说明	类型
type	菜单类型，值为：MenuLine	string

SubMenuItem：

字段	说明	类型
type	菜单类型，值为：SubMenuItem	string
label	菜单文本	string
subMenuList	二级菜单列表，列表项请参考：MenuItem	Array<MenuItem>