@lin-media/contextmenu

右键菜单

安装

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: {
    // 一级菜单宽度
    menuItemWidth: "300px",
    // 二级菜单宽度
    subMenuItemWidth: "100px"
  }
});

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

Contextmenu 参数

参数	说明	类型	可选值	默认值
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>