diff --git a/packages/g6/__tests__/demos/plugin-contextmenu.ts b/packages/g6/__tests__/demos/plugin-contextmenu.ts
index bbc2032dfb..e3ecfe75fa 100644
--- a/packages/g6/__tests__/demos/plugin-contextmenu.ts
+++ b/packages/g6/__tests__/demos/plugin-contextmenu.ts
@@ -7,10 +7,12 @@ export const pluginContextmenu: TestCase = async (context) => {
autoResize: true,
data,
layout: { type: 'd3-force' },
+ behaviors: ['drag-canvas'],
plugins: [
{
type: 'contextmenu',
trigger: 'contextmenu',
+ className: 'custom-class-name',
getItems: () => {
return [
{ name: '展开一度关系', value: 'spread' },
diff --git a/packages/g6/src/plugins/contextmenu/index.ts b/packages/g6/src/plugins/contextmenu/index.ts
index eac48429c4..8e3dee6716 100644
--- a/packages/g6/src/plugins/contextmenu/index.ts
+++ b/packages/g6/src/plugins/contextmenu/index.ts
@@ -13,9 +13,9 @@ import { CONTEXTMENU_CSS, getContentFromItems } from './util';
*/
export interface ContextmenuOptions extends BasePluginOptions {
/**
- * 给菜单的 DOM 追加的 classname,便于自定义样式。默认是包含 `g6-contextmenu`
+ * 给菜单的 DOM 追加的类名
*
- * The classname appended to the menu DOM for custom styles. The default is `g6-contextmenu`
+ * The class name appended to the menu DOM for custom styles
* @defaultValue 'g6-contextmenu'
*/
className?: string;
@@ -42,7 +42,7 @@ export interface ContextmenuOptions extends BasePluginOptions {
*
* The callback method triggered when the menu is clicked
*/
- onClick?: (v: string, target: HTMLElement) => void;
+ onClick?: (value: string, target: HTMLElement) => void;
/**
* 返回菜单的项目列表,支持 `Promise` 类型的返回值。是 `getContent` 的快捷配置
*
@@ -88,18 +88,24 @@ export class Contextmenu extends BasePlugin {
enable: () => true,
};
- private $element: HTMLElement = createPluginContainer('contextmenu', false);
+ private $element!: HTMLElement;
constructor(context: RuntimeContext, options: ContextmenuOptions) {
super(context, Object.assign({}, Contextmenu.defaultOptions, options));
+ this.initElement();
+ this.update(options);
+ }
+
+ private initElement() {
+ this.$element = createPluginContainer('contextmenu', false);
+ const { className } = this.options;
+ if (className) this.$element.classList.add(className);
+
const $container = this.context.canvas.getContainer();
$container!.appendChild(this.$element);
- // 设置样式
insertDOM('g6-contextmenu-css', 'style', {}, CONTEXTMENU_CSS, document.head);
-
- this.update(options);
}
/**
@@ -210,16 +216,10 @@ export class Contextmenu extends BasePlugin {
const { onClick } = this.options;
if (event.target instanceof HTMLElement) {
if (event.target.className.includes('g6-contextmenu-li')) {
- const v = event.target.getAttribute('value') as string;
- onClick && onClick(v, event.target);
-
- this.hide();
- }
-
- // 点击其他地方,隐藏菜单
- if (!this.context.graph.getCanvas().getContainer()!.contains(event.target)) {
- this.hide();
+ const value = event.target.getAttribute('value') as string;
+ onClick?.(value, event.target);
}
}
+ this.hide();
};
}