feat: Add analysis demo

src/components/ContextMenu/index.ts

@@ -1,3 +1,8 @@
 import ContextMenu from './src/ContextMenu.vue'
+import { ElDropdown } from 'element-plus'
+
+export interface ContextMenuExpose {
+  elDropdownMenuRef: ComponentRef<typeof ElDropdown>
+}
 
 export { ContextMenu }

src/components/ContextMenu/src/ContextMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
-import { PropType } from 'vue'
+import { PropType, ref, unref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useDesign } from '@/hooks/web/useDesign'
 
@@ -10,6 +10,8 @@ const prefixCls = getPrefixCls('context-menu')
 
 const { t } = useI18n()
 
+const emit = defineEmits(['visibleChange'])
+
 defineProps({
   schema: {
     type: Array as PropType<contextMenuSchema[]>,
@@ -24,14 +26,26 @@ defineProps({
 const command = (item: contextMenuSchema) => {
   item.command && item.command(item)
 }
+
+const visibleChange = (visible: boolean) => {
+  emit('visibleChange', visible, unref(elDropdownMenuRef))
+}
+
+const elDropdownMenuRef = ref<ComponentRef<typeof ElDropdown>>()
+
+defineExpose({
+  elDropdownMenuRef
+})
 </script>
 
 <template>
   <ElDropdown
+    ref="elDropdownMenuRef"
     :class="prefixCls"
     :trigger="trigger"
     placement="bottom-start"
     @command="command"
+    @visible-change="visibleChange"
     popper-class="v-context-menu-popper"
   >
     <slot></slot>