@imengyu/vue3-context-menu 1.1.4 → 1.1.6

package/README.CN.md

@@ -357,6 +357,45 @@ import '你的样式css文件路径.css'
 
   与 `ContextMenu.showContextMenu` 相同，但此函数注册到 Vue 全局属性中，可以在Vue实例中直接使用。
 
+* `ContextMenu.transformMenuPosition`
+
+  如果你的 `body` 元素处于缩放状态 (例如添加了样式 `transform: scale(0.5)`), 这可能会导致菜单显示位置不正确。
+  你可以使用此函数来转换至正确的菜单显示位置:
+
+  ```ts
+  import ContextMenu from '@imengyu/vue3-context-menu'
+
+  function onContextMenu(e: MouseEvent) {
+    const scaledPosition = ContextMenu.transformMenuPosition(e.target as HTMLElement, e.offsetX, e.offsetY);
+    //完整示例代码位于 `/examples/views/InScaledBody.vue`
+    menuData.x = scaledPosition.x;
+    menuData.y = scaledPosition.y;
+    //显示菜单
+    ContextMenu.showContextMenu(menuData);
+  }
+  ```
+
+#### 在函数模式下动态控制菜单
+
+你只需要将菜单数据声明为响应式数据，即可动态修改菜单：
+
+```ts
+const menuData = reactive<MenuOptions>({
+  items: [
+    { 
+      label: 'Simple item',
+      onClick: () => alert('Click Simple item'),
+    },
+  ]
+});
+
+ContextMenu.showContextMenu(menuData);
+
+//可以在显示菜单后随时更改属性：
+menuData.items[0].label = 'My label CHANGED!'; //更改文本
+menuData.items[0].hidden = true; //更改是否隐藏
+```
+
 #### MenuOptions
 
 | 属性 | 描述 | 类型 | 可选值 | 默认值 |
@@ -384,6 +423,7 @@ import '你的样式css文件路径.css'
 | svgIcon | 菜单项图标 svg，仅在 icon 为空时有效 | `string` | — | — |
 | svgProps | 当使用 svg 图标时，自定义 svg 标签属性 | `SVGAttributes` | — | — |
 | disabled | 是否禁用菜单项 | `boolean` | — | `false` |
+| hidden | 是否隐藏单项 | `boolean` | — | `false` |
 | adjustSubMenuPosition | 是否在子菜单超出屏幕后进行自动调整 | `boolean` | — | `true` |
 | clickableWhenHasChildren | 指定当本菜单下有子菜单时，点击当前菜单是否触发点击事件 | `boolean` | — | `false` |
 | clickClose | 点击当前菜单项是否自动关闭整个菜单 | `boolean` | — | `true` |

package/README.md

@@ -359,6 +359,45 @@ Menu separator component.
 
   Same as `ContextMenu.showContextMenu` but this function is registered to vue global property.
 
+* `ContextMenu.transformMenuPosition`
+
+  If your `body` element is in a scaled state (e.g. `transform: scale(0.5)`), this may lead to the wrong position of the menu display.
+  You can use this function to convert the correct menu display position:
+
+  ```ts
+  import ContextMenu from '@imengyu/vue3-context-menu'
+
+  function onContextMenu(e: MouseEvent) {
+    const scaledPosition = ContextMenu.transformMenuPosition(e.target as HTMLElement, e.offsetX, e.offsetY);
+    //Full code of menuData is in `/examples/views/InScaledBody.vue`
+    menuData.x = scaledPosition.x;
+    menuData.y = scaledPosition.y;
+    //shou menu
+    ContextMenu.showContextMenu(menuData);
+  }
+  ```
+
+#### Dynamic change menu in function mode
+
+You only need to declare the menu data as responsive data, so that you can dynamically modify the menu:
+
+```ts
+const menuData = reactive<MenuOptions>({
+  items: [
+    { 
+      label: 'Simple item',
+      onClick: () => alert('Click Simple item'),
+    },
+  ]
+});
+
+ContextMenu.showContextMenu(menuData);
+
+//You can change properties at any time after the menu is displayed:
+menuData.items[0].label = 'My label CHANGED!'; //Change label
+menuData.items[0].hidden = true; //Change hidden
+```
+
 #### MenuOptions
 
 | Property | Description | Type | Optional value | Default |
@@ -386,6 +425,7 @@ Menu separator component.
 | svgIcon | Display icons use svg symbol (`<use xlink:href="...">`) ， only valid when icon attribute is empty. | `string` | — | — |
 | svgProps | The user-defined attribute of the svg tag, which is valid when using `svgIcon`. | `SVGAttributes` | — | — |
 | disabled | Disable menu item? | `boolean` | — | `false` |
+| hidden | Hide menu item? | `boolean` | — | `false` |
 | adjustSubMenuPosition | Specifies should submenu adjust it position when the menu exceeds the screen. | `boolean` | — | `true` |
 | clickableWhenHasChildren | When there are subitems in this item, is it allowed to trigger its own click event? | `boolean` | — | `false` |
 | clickClose | Should close menu when Click this menu item ? | `boolean` | — | `true` |

package/examples/App.vue

@@ -7,6 +7,7 @@
       <router-link :to="{ name: 'BasicComponent' }">Component useage</router-link>
       <router-link :to="{ name: 'ComponentCustomize' }">Component customize</router-link>
       <router-link :to="{ name: 'Theme' }">Dark Theme</router-link>
+      <router-link :to="{ name: 'InScaledBody' }">Use In scaled</router-link>
     </div>
     <div class="test-host">
       <router-view />

package/examples/router/index.ts

@@ -4,6 +4,7 @@ import BasicCustomize from '../views/BasicCustomize.vue'
 import BasicUseage from '../views/BasicUseage.vue'
 import Theme from '../views/Theme.vue'
 import ComponentCustomize from '../views/ComponentCustomize.vue'
+import InScaledBody from '../views/InScaledBody.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -31,6 +32,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Theme',
     component: Theme,
   },
+  {
+    path: '/InScaledBody',
+    name: 'InScaledBody',
+    component: InScaledBody,
+  },
 ]
 
 const router = createRouter({

package/examples/views/BasicUseage.vue

@@ -4,8 +4,8 @@
       <div class="box1" style="flex:1" @contextmenu="onContextMenu($event)">
         Right click here to show contextmenu !
       </div>
-      <div class="box1" style="flex:1;padding: 50px" @contextmenu="onContextMenu1($event)" @click.stop="test">
-        Contextmenu In parent
+      <div class="box1" style="flex:1;padding: 50px" @contextmenu="onContextMenu1($event)">
+        Test nested menus: Contextmenu In parent
         <div class="box2" style="width: 200px; height: 100px" @contextmenu="onContextMenu2($event)">
           Contextmenu In child
         </div>
@@ -81,197 +81,217 @@ createApp(App)
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue'
 import { MenuOptions } from '../../src/ContextMenuDefine';
+import ContextMenu from '../../src/ContextMenuInstance';
 
-export default defineComponent({
-  mounted() {
-    (window as unknown as {
+onMounted(() => {
+  //highlight demo code
+  (window as unknown as {
       hljs: {
         highlightAll: () => void
       }
     }).hljs?.highlightAll?.();
-  },
-  methods: {
-    test() {
-      console.log('test');
-      
+});
+
+const menuData = reactive<MenuOptions>({
+  items: [
+    { 
+      label: 'Simple item',
+      onClick: () => alert('Click Simple item'),
+    },
+    {
+      label: "Sub menu Example",
+      children: [
+        {
+          label: "Back",
+          onClick: () => {
+            console.log("You click Back");
+          }
+        },
+        { label: "Forward", disabled: true },
+        { 
+          label: "Reload", 
+          divided: true, 
+          icon: "icon-reload-1",
+          onClick: () => {
+            alert("You click Reload");
+          }
+        },
+        { 
+          label: "Save as...",
+          icon: "icon-save",
+          onClick: () => {
+            alert("You click Save as");
+          }
+        },
+        { 
+          label: "Print...", 
+          icon: "icon-print",
+          onClick: () => {
+            alert("You click Print");
+          } 
+        },
+        { label: "View source", icon: "icon-terminal" },
+        { label: "Inspect" }
+      ],
     },
-    onContextMenu(e : MouseEvent) {
-      //prevent the browser's default menu
-      e.preventDefault();
-      //shou our menu
-      this.$contextmenu({
-        items: [
-          { 
-            label: 'Simple item',
-            onClick: () => alert('Click Simple item'),
-          },
-          {
-            label: "Sub menu Example",
-            children: [
-              {
-                label: "Back",
-                onClick: () => {
-                  console.log("You click Back");
-                }
-              },
-              { label: "Forward", disabled: true },
-              { 
-                label: "Reload", 
-                divided: true, 
-                icon: "icon-reload-1",
-                onClick: () => {
-                  alert("You click Reload");
-                }
-              },
-              { 
-                label: "Save as...",
-                icon: "icon-save",
-                onClick: () => {
-                  alert("You click Save as");
-                }
-              },
-              { 
-                label: "Print...", 
-                icon: "icon-print",
-                onClick: () => {
-                  alert("You click Print");
-                } 
-              },
-              { label: "View source", icon: "icon-terminal" },
-              { label: "Inspect" }
-            ],
-          },
-          {
-            label: "Submenu with Submenu",
-            children: [
-              {
-                label: "Very long submenu",
-                divided: true, 
-                children: [
-                  { label: "Test1" },
-                  { label: "Test2" },
-                  { label: "Test3" },
-                  { label: "Test4" },
-                  { label: "Test5" },
-                  { label: "Test6" },
-                  { label: "Test7" },
-                  { label: "Test8" },
-                  { label: "Test9" },
-                  { label: "Test10" },
-                  { label: "Test11" },
-                  { label: "Test12" },
-                  { label: "Test13" },
-                  { label: "Test14" },
-                  { label: "Test15" },
-                  { label: "Test16" },
-                  { label: "Test17" },
-                  { label: "Test18" },
-                  { label: "Test19" },
-                  { label: "Test20" },
-                  { label: "Test21" },
-                  { label: "Test22" },
-                  { label: "Test23" },
-                  { label: "Test24" },
-                  { label: "Test25" },
-                  { label: "Test26" },
-                ]
-              },
-              { 
-                label: "A submenu", 
-                children: [
-                  { label: "Item1" },
-                  { label: "Item2" },
-                  { label: "Item3" },
-                ]
-              },
-              { 
-                label: "A submenu2", 
-                children: [
-                  { label: "Item1" },
-                  { label: "Item2" },
-                  { label: "Item3" },
-                  { 
-                    label: "A submenu", 
-                    children: [
-                      { label: "Item1" },
-                      { label: "Item2" },
-                      { label: "Item3" },
-                    ]
-                  },
-                ]
-              },
-            ]
-          },
-          { 
-            label: 'Item with icon',
-            icon: "icon-reload-1",
-          },
-          { 
-            label: "Item with svg icon",
-            svgIcon: "#icon-clock",
-          },
-          { 
-            label: "Item with svg icon",
-            svgIcon: "#icon-multiply",
-            svgProps: {
-              fill: '#f60',
+    {
+      label: "Submenu with Submenu",
+      children: [
+        {
+          label: "Very long submenu",
+          divided: true, 
+          children: [
+            { label: "Test1" },
+            { label: "Test2" },
+            { label: "Test3" },
+            { label: "Test4" },
+            { label: "Test5" },
+            { label: "Test6" },
+            { label: "Test7" },
+            { label: "Test8" },
+            { label: "Test9" },
+            { label: "Test10" },
+            { label: "Test11" },
+            { label: "Test12" },
+            { label: "Test13" },
+            { label: "Test14" },
+            { label: "Test15" },
+            { label: "Test16" },
+            { label: "Test17" },
+            { label: "Test18" },
+            { label: "Test19" },
+            { label: "Test20" },
+            { label: "Test21" },
+            { label: "Test22" },
+            { label: "Test23" },
+            { label: "Test24" },
+            { label: "Test25" },
+            { label: "Test26" },
+          ]
+        },
+        { 
+          label: "A submenu", 
+          children: [
+            { label: "Item1" },
+            { label: "Item2" },
+            { label: "Item3" },
+          ]
+        },
+        { 
+          label: "A submenu2", 
+          children: [
+            { label: "Item1" },
+            { label: "Item2" },
+            { label: "Item3" },
+            { 
+              label: "A submenu", 
+              children: [
+                { label: "Item1" },
+                { label: "Item2" },
+                { label: "Item3" },
+              ]
             },
-          },
-        ],
-        iconFontClass: 'iconfont',
-        customClass: "class-a",
-        zIndex: 3,
-        minWidth: 230,
-        x: e.x,
-        y: e.y
-      } as MenuOptions);
+          ]
+        },
+      ]
     },
-    onContextMenu1(e : MouseEvent) {
-      //prevent the browser's default menu
-      e.preventDefault();
-      //shou our menu
-      this.$contextmenu({
-        items: [
-          { 
-            label: 'This is menu in parent box',
-          },
-          { 
-            label: 'Simple item',
-          },
-        ],
-        iconFontClass: 'iconfont',
-        customClass: "class-a",
-        zIndex: 3,
-        minWidth: 230,
-        x: e.x,
-        y: e.y
-      } as MenuOptions);
+    { 
+      label: 'Test item dynamic show and hide',
+      clickClose: false,
+      onClick: () => {
+        menuData.items[4].hidden = !menuData.items[4].hidden;
+      },
     },
-    onContextMenu2(e : MouseEvent) {
-      //prevent the browser's default menu
-      e.preventDefault();
-      e.stopPropagation();
-      //shou our menu
-      this.$contextmenu({
-        items: [
-          { 
-            label: 'This is menu in child box',
-          },
-          { 
-            label: 'Simple item',
-          },
-        ],
-        iconFontClass: 'iconfont',
-        customClass: "class-a",
-        zIndex: 3,
-        minWidth: 230,
-        x: e.x,
-        y: e.y
-      } as MenuOptions);
+    { 
+      label: 'Click the item above to show/hide me',
     },
-  }
+    { 
+      label: 'Test item dynamic change the label',
+      clickClose: false,
+      onClick: () => {
+        if (menuData.items[5].label === 'Test item dynamic change the label')
+          menuData.items[5].label = 'My label CHANGED!';
+        else
+          menuData.items[5].label = 'Test item dynamic change the label';
+      },
+    },
+    { 
+      label: 'Item with icon',
+      icon: "icon-reload-1",
+    },
+    { 
+      label: "Item with svg icon",
+      svgIcon: "#icon-clock",
+    },
+    { 
+      label: "Item with svg icon",
+      svgIcon: "#icon-multiply",
+      svgProps: {
+        fill: '#f60',
+      },
+    },
+  ],
+  iconFontClass: 'iconfont',
+  customClass: "class-a",
+  zIndex: 3,
+  minWidth: 230,
+  x: 0,
+  y: 0,
 });
+
+function onContextMenu(e : MouseEvent) {
+  //prevent the browser's default menu
+  e.preventDefault();
+  menuData.x = e.x;
+  menuData.y = e.y;
+  //shou our menu
+  ContextMenu.showContextMenu(menuData);
+}
+
+function onContextMenu1(e : MouseEvent) {
+  //prevent the browser's default menu
+  e.preventDefault();
+  //shou our menu
+  ContextMenu.showContextMenu({
+    items: [
+      { 
+        label: 'This is menu in parent box',
+      },
+      { 
+        label: 'Simple item',
+      },
+    ],
+    iconFontClass: 'iconfont',
+    customClass: "class-a",
+    zIndex: 3,
+    minWidth: 230,
+    x: e.x,
+    y: e.y
+  } as MenuOptions);
+}
+function onContextMenu2(e : MouseEvent) {
+  //prevent the browser's default menu
+  e.preventDefault();
+  e.stopPropagation();
+  //shou our menu
+  ContextMenu.showContextMenu({
+    items: [
+      { 
+        label: 'This is menu in child box',
+      },
+      { 
+        label: 'Simple item',
+      },
+    ],
+    iconFontClass: 'iconfont',
+    customClass: "class-a",
+    zIndex: 3,
+    minWidth: 230,
+    x: e.x,
+    y: e.y
+  } as MenuOptions);
+}
 </script>