feat: contextMenu支持visible属性

yue1123 · Jun 19, 2023 · 0aebae9 · 0aebae9
1 parent e48ffa1
commit 0aebae9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/docs/zh-CN/components/context-menu/index.md b/docs/zh-CN/components/context-menu/index.md
@@ -8,7 +8,7 @@ import { BContextMenu } from 'vue3-baidu-map-gl'
 
 ## 组件示例
 
-:::demo
+:::demo 添加地图和 `Marker` 上下文菜单，鼠标右击地图或 `Marker` 试试
 context-menu/index
 :::
 
@@ -20,9 +20,10 @@ context-menu/index
 
 ## 动态组件 Props
 
-| 属性      | 说明                  | 类型                                                | 可选值 | 默认值 |
-| --------- | --------------------- | --------------------------------------------------- | ------ | ------ |
-| menuItems | 菜单项，`-`添加分割线 | ([`ContextMenuItem`](#contextmenuitem) \| `-`) `[]` | -      | -      |
+| 属性      | 说明                  | 类型                                                | 可选值 | 默认值 | 版本                               |
+| --------- | --------------------- | --------------------------------------------------- | ------ | ------ | ---------------------------------- |
+| menuItems | 菜单项，`-`添加分割线 | ([`ContextMenuItem`](#contextmenuitem) \| `-`) `[]` | -      | -      | -                                  |
+| visible   | 是否显示              | `boolean`                                           | -      | `true` | <Badge type="tip" text="^2.1.4" /> |
 
 ## ContextMenuItem
 

diff --git a/packages/components/contextMenu/index.vue b/packages/components/contextMenu/index.vue
@@ -4,7 +4,7 @@
   import { inject, watch } from 'vue'
   import useBaseMapEffect from '../../hooks/useBaseMapEffect'
   import useLifeCycle from '../../hooks/useLifeCycle'
-  import { bindEvents, Callback, isString, callWhenDifferentValue } from '../../utils/index'
+  import { bindEvents, Callback, isString, callWhenDifferentValue } from '../../utils'
   export interface ContextMenuItem {
     text: string
     callback: (...arg: any[]) => void
@@ -13,15 +13,19 @@
   export type ContextMenuSeparator = '-'
   export interface ContextMenuProps {
     width?: number
+    /**
+     * 是否可见
+     */
+    visible?: boolean
     menuItems?: (ContextMenuItem | ContextMenuSeparator)[]
     onOpen?: Callback
     onClose?: Callback
   }
   const props = withDefaults(defineProps<ContextMenuProps>(), {
     width: 100,
+    visible: true,
     menuItems: () => []
   })
-
   const getParentInstance = inject('getOverlayInstance', () => null)
   const vueEmits = defineEmits(['initd', 'unload', 'open', 'close'])
   const { ready } = useLifeCycle()
@@ -32,7 +36,7 @@
       contextMenu && target.removeContextMenu(contextMenu)
     }
     const init = () => {
-      const { width, menuItems } = props
+      const { width, menuItems, visible } = props
       contextMenu = new BMapGL.ContextMenu()
       for (const item of menuItems) {
         if (isString(item) && item === '-') {
@@ -58,9 +62,17 @@
         ;(item as ContextMenuItem).disabled ? menuItem.disable() : menuItem.enable()
         contextMenu.addItem(menuItem)
       }
-      target.addContextMenu(contextMenu)
+      visible && target.addContextMenu(contextMenu)
       bindEvents(props, vueEmits, contextMenu)
     }
+    watch(
+      () => props.visible,
+      (n) => {
+        if (contextMenu) {
+          target[n ? 'addContextMenu' : 'removeContextMenu'](contextMenu)
+        }
+      }
+    )
     watch(
       () => {
         return props.menuItems