Browse Source

右键菜单中添加新的功能

DESKTOP-MINPJAU\Administrator 2 years ago
parent
commit
65265d3278
1 changed files with 25 additions and 3 deletions
  1. 25 3
      src/components/menu-item/RightClickMenu.vue

+ 25 - 3
src/components/menu-item/RightClickMenu.vue

@@ -3,7 +3,8 @@
        class="tabs_item 小手指"
        v-if="modal"
        :style="displayLocation">
-    <ul>
+    <slot v-if="slots"/>
+    <ul v-else>
       <li v-for="(item,index) in props.config" @click="handlingClickEvents(item.click)">
         {{ item.name }}
       </li>
@@ -27,6 +28,10 @@ const props = defineProps({
   mousePosition: {
     type: Object,
     default: {}
+  },
+  closeManually: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -35,7 +40,9 @@ const modal = ref(false)
 const modalRef = ref(null)
 
 onClickOutside(modalRef, () => {
-  modal.value = false
+  if (!props.closeManually) {
+    modal.value = false
+  }
 })
 
 let displayLocation = $ref({
@@ -77,6 +84,21 @@ const calculateTheLocation = (x, y) => {
   }
 }
 
+const close = () => {
+  modal.value = false
+}
+
+defineExpose({
+  close
+})
+
+let slots = $ref(false)
+onMounted(() => {
+  if (!!useSlots().default) {
+    slots = true
+  }
+})
+
 </script>
 
 <style scoped lang="scss">
@@ -85,7 +107,7 @@ const calculateTheLocation = (x, y) => {
   text-align: center;
   margin: 5px;
   padding: 5px;
-  z-index: 99999;
+  z-index: 100;
   background-color: white;
   box-shadow: 2px 2px 3px 0 rgb(4 4 4);
   border-radius: 5px;