|
@@ -1,17 +1,17 @@
|
|
|
<template>
|
|
|
- <div ref="modalRef"
|
|
|
- class="tabs_item 小手指"
|
|
|
- v-if="modal"
|
|
|
- :style="displayLocation">
|
|
|
- <slot v-if="slots"/>
|
|
|
- <ul v-else>
|
|
|
- <li v-for="(item,index) in props.config"
|
|
|
- :style="prohibit(item)"
|
|
|
- @click="handlingClickEvents(item.click)">
|
|
|
- {{ item.name }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ <div ref="modalRef"
|
|
|
+ class="tabs_item 小手指"
|
|
|
+ v-if="modal"
|
|
|
+ :style="displayLocation">
|
|
|
+ <slot v-if="slots"/>
|
|
|
+ <ul v-else>
|
|
|
+ <li v-for="(item,index) in props.config"
|
|
|
+ :style="prohibit(item)"
|
|
|
+ @click="handlingClickEvents(item.click)">
|
|
|
+ {{ item.name }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup name='RightClickMenu'>
|
|
@@ -19,22 +19,22 @@ import {ref} from "vue";
|
|
|
import {onClickOutside} from '@vueuse/core'
|
|
|
|
|
|
const props = defineProps({
|
|
|
- config: {
|
|
|
- type: Array,
|
|
|
- default: [{
|
|
|
- name: '请设置', click: () => {
|
|
|
- console.warn('请先设置')
|
|
|
- }
|
|
|
- }]
|
|
|
- },
|
|
|
- mousePosition: {
|
|
|
- type: Object,
|
|
|
- default: {}
|
|
|
- },
|
|
|
- closeManually: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- }
|
|
|
+ config: {
|
|
|
+ type: Array,
|
|
|
+ default: [{
|
|
|
+ name: '请设置', click: () => {
|
|
|
+ console.warn('请先设置')
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ mousePosition: {
|
|
|
+ type: Object,
|
|
|
+ default: {}
|
|
|
+ },
|
|
|
+ closeManually: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
|
|
@@ -42,75 +42,75 @@ const modal = ref(false)
|
|
|
const modalRef = ref(null)
|
|
|
|
|
|
onClickOutside(modalRef, () => {
|
|
|
- if (!props.closeManually) {
|
|
|
- modal.value = false
|
|
|
- }
|
|
|
+ if (!props.closeManually) {
|
|
|
+ modal.value = false
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
let displayLocation = $ref({
|
|
|
- left: '0px',
|
|
|
- top: '0px'
|
|
|
+ left: '0px',
|
|
|
+ top: '0px'
|
|
|
})
|
|
|
|
|
|
const handlingClickEvents = (cb) => {
|
|
|
- cb(props.mousePosition.data, props.mousePosition.index)
|
|
|
- modal.value = false
|
|
|
+ cb(props.mousePosition.data, props.mousePosition.index)
|
|
|
+ modal.value = false
|
|
|
}
|
|
|
|
|
|
const prohibit = (data) => {
|
|
|
- if (!data.validator) {
|
|
|
- return
|
|
|
- }
|
|
|
- if (!data.validator(props.mousePosition.data)) {
|
|
|
- return {
|
|
|
- color: '#c8c9cc',
|
|
|
- cursor: 'not-allowed'
|
|
|
+ if (!data.validator) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!data.validator(props.mousePosition.data)) {
|
|
|
+ return {
|
|
|
+ color: '#c8c9cc',
|
|
|
+ cursor: 'not-allowed'
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
watch(() => props.mousePosition, () => {
|
|
|
- modal.value = true
|
|
|
- nextTick(() => {
|
|
|
- calculateTheLocation(props.mousePosition.event.pageX, props.mousePosition.event.pageY)
|
|
|
- })
|
|
|
+ modal.value = true
|
|
|
+ nextTick(() => {
|
|
|
+ calculateTheLocation(props.mousePosition.event.pageX, props.mousePosition.event.pageY)
|
|
|
+ })
|
|
|
})
|
|
|
|
|
|
const calculateTheLocation = (x, y) => {
|
|
|
|
|
|
- const {innerWidth: windowWidth, innerHeight: windowHeight} = window;
|
|
|
+ const {innerWidth: windowWidth, innerHeight: windowHeight} = window;
|
|
|
|
|
|
- const menu = modalRef.value;
|
|
|
- const menuHeight = menu.offsetHeight;
|
|
|
- const menuWidth = menu.offsetWidth
|
|
|
+ const menu = modalRef.value;
|
|
|
+ const menuHeight = menu.offsetHeight;
|
|
|
+ const menuWidth = menu.offsetWidth
|
|
|
|
|
|
|
|
|
- if (menuWidth + x + 20 >= windowWidth) {
|
|
|
- displayLocation.left = x - menuWidth + 'px';
|
|
|
- } else {
|
|
|
- displayLocation.left = x + 'px';
|
|
|
- }
|
|
|
+ if (menuWidth + x + 20 >= windowWidth) {
|
|
|
+ displayLocation.left = x - menuWidth + 'px';
|
|
|
+ } else {
|
|
|
+ displayLocation.left = x + 'px';
|
|
|
+ }
|
|
|
|
|
|
- if (menuHeight + y + 20 >= windowHeight) {
|
|
|
- displayLocation.top = y - menuHeight + 'px'
|
|
|
- } else {
|
|
|
- displayLocation.top = y + 'px';
|
|
|
- }
|
|
|
+ if (menuHeight + y + 20 >= windowHeight) {
|
|
|
+ displayLocation.top = y - menuHeight + 'px'
|
|
|
+ } else {
|
|
|
+ displayLocation.top = y + 'px';
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const close = () => {
|
|
|
- modal.value = false
|
|
|
+ modal.value = false
|
|
|
}
|
|
|
|
|
|
defineExpose({
|
|
|
- close
|
|
|
+ close
|
|
|
})
|
|
|
|
|
|
let slots = $ref(false)
|
|
|
onMounted(() => {
|
|
|
- if (!!useSlots().default) {
|
|
|
- slots = true
|
|
|
- }
|
|
|
+ if (!!useSlots().default) {
|
|
|
+ slots = true
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
</script>
|
|
@@ -134,8 +134,8 @@ onMounted(() => {
|
|
|
line-height: 20px;
|
|
|
|
|
|
&:hover {
|
|
|
- background-color: rgba(78, 80, 84, 0.63);
|
|
|
- color: white;
|
|
|
+ background-color: #c6e2ff;
|
|
|
+ //color: white;
|
|
|
}
|
|
|
}
|
|
|
}
|