自定义上下文菜单

2020-08-11 10:57:03
孙浩
1753
最后编辑:孙浩 于 2020-08-11 11:11:08
分享链接

通过主入口模块的contextMenuCreators字段可以为应用添加自定义上下文菜单。contextMenuCreators字段为一个数组,包含多个上下文菜单生成器对象。

上下文菜单生成器对象

上下文菜单生成器对象各个属性定义如下:

  • create:回调函数function(context: Object): Object[],用于根据上下文对象返回上下文菜单项列表;
  • items:类型为Object[],表示上下文菜单项列表;
  • id:类型为string,表示上下文菜单项生成器 ID,如果不指定,最终会自动生成一个,如果所指定的 ID 已经在系统上下文菜单中已经存在,则会替换之前定义的菜单项,使用此机制可以实现使用扩展机制替换原菜单项;
  • match:类型为string或者string[],使用一个逗号分隔的字符串列表或者一个字符串数组来表示改上下文菜单生成器应该匹配哪些上下文(名称)。

以上create和items字段代表两种生成上下文菜单项的方式,但仅需且只能其中一个字段。

上下文菜单项对象

上下文菜单项应该通过回调函数返回或者使用数组直接指定上下文菜单项对象列表,一个上下文菜单项对象包含如下属性:

  • id:为菜单项指定一个唯一的名称,默认为'',通过此选项指定的值如果与官方菜单项实现中相同,则会替换官方实现的菜单项;
  • type:可选值为'divider'或'item',分别表示该菜单项为分隔线或者普通菜单项,如果不指定此字段,默认类型为普通菜单项(item);
  • label:当类型为普通菜单项时为必须提供的字段,类型string,指定菜单项上的显示文本;
  • icon:类型string,指定菜单项显示的图标,可以使用 Material Design Icons 图标名称或者http://或https://协议开头图片地址;
  • click:指定一个回调函数function(item: Object, index: number, event: Event)来响应用户点击菜单项时的操作;
  • url:指定一个链接来响应用户点击菜单项时的操作;
  • render:指定一个回调函数动态返回ReactNode,使用 React 来自定义菜单项呈现;
  • checked: 类型boolean,用于在菜单上添加已勾选中标记;
  • disabled:类型boolean,用于定义该菜单项是否可以点击;
  • className:类型string,用于添加界面上菜单项元素上的类名;
  • hidden:类型boolean,用于定义该菜单项是否隐藏;
  • data:任意类型,为菜单项添加额外的数据。

如果将菜单项定义为字符串'-'、'divider'或'separator'中的一个则相当于定义了一个分隔线类型的菜单项,即相当于{type: 'divider'}。

默认情况下菜单项在界面上显示的名称会自动添加扩展名称前缀,例如当菜单项名称为创建待办时会显示为禅道:创建待办,如果不需要添加前缀,可以在菜单项名称前添加!,例如!创建待办会显示为创建待办。

上下文菜单名称

上下文菜单生成器对象中可以通过match字段匹配的上下文菜单包括:

  • link:为界面上的链接添加上下文菜单;
  • emoji:为界面上的 Emoji 表情符号添加上下文菜单;
  • chat.toolbar:添加聊天工具栏右键菜单;
  • chat.sendbox.toolbar:为发送框工具栏添加菜单项;
  • chat.menu:添加聊天上下文菜单;
  • chat.toolbar.more:添加聊天工具类更多按钮下拉菜单项;
  • chat.member:添加聊天成员上下文菜单;
  • chat.group:添加讨论组上下文菜单项;
  • message.text:为纯文本聊天消息添加菜单项;
  • image:为界面上的图片添加菜单项;
  • member:为系统成员添加菜单项。

自定义上下文菜单例子

在扩展入口模块内使用如下代码来为纯文本消息添加一个在对话框内显示消息内容的功能:

module.exports = {
    // 在扩展内定义上下文菜单生成器
    contextMenuCreators: [
        {
            // 匹配纯文本消息右键菜单
            match: 'message.text',

            // 使用回调函数返回上下文菜单项清单
            create: context => {
                // 从上下文对象中获取右键菜单触发时对应的聊天消息对象
                const {message} = context;

                // 获取聊天消息内容
                const messageContent = message.content;

                // 返回上下文菜单项列表
                return [
                    {
                        // 右键菜单项图标
                        icon: 'mdi-star',

                        // 右键菜单项名称
                        label: '在对话框显示消息',

                        // 定义点击右键菜单项时的操作
                        click: () => alert(messageContent);
                    },
                    // 如果要定义多个菜单项则可以在数组中继续添加更多的菜单项对象
                ]
            }
        },
        // 如果要定义多个上下文菜单生成器,则可以在数组中继续添加更多的上下文菜单生成器对象
    ]
}

该扩展例子需要在package.json中声明如下权限:

{
    "usePermissions": [
        "components.Modal",
        "ext.onUserLogin"
    ]
}
发表评论
评论通过审核后显示。
咨询电话

公司电话:400-8320-078

客服电话:18562550650