|
|
@ -1,9 +1,9 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<teleport to="#app"> |
|
|
|
<teleport to="#app"> |
|
|
|
<div class="dialog" v-show="show" @contextmenu.prevent="console.log('禁用浏览器默认右键功能')" |
|
|
|
<div ref="dialog" class="dialog" v-show="show" @contextmenu.prevent="console.log('禁用浏览器默认右键功能')" |
|
|
|
@click=" commit('close_equip_tip');" :style="style"> |
|
|
|
@click=" commit('close_equip_tip');" :style="style"> |
|
|
|
<div class="content" @click.native.stop> |
|
|
|
<div class="content" @click.native.stop> |
|
|
|
<div class="title" v-if="title"> |
|
|
|
<div class="title" v-if="title" @mousemove="mouseMove" @mousedown="mouseDown" @mouseup="mouseup"> |
|
|
|
<span>{{ title }}</span> |
|
|
|
<span>{{ title }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<slot /> |
|
|
|
<slot /> |
|
|
@ -15,7 +15,7 @@ |
|
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { useStore } from "vuex"; |
|
|
|
import { useStore } from "vuex"; |
|
|
|
import { watch, onMounted, ref, onBeforeUnmount } from "vue"; |
|
|
|
import { watch, onMounted, ref, onBeforeUnmount, computed, reactive } from "vue"; |
|
|
|
import { useI18n } from "vue3-i18n"; |
|
|
|
import { useI18n } from "vue3-i18n"; |
|
|
|
import { close_icon } from "@/config"; |
|
|
|
import { close_icon } from "@/config"; |
|
|
|
|
|
|
|
|
|
|
@ -77,6 +77,44 @@ watch(() => prop.modelValue, (n, o) => { |
|
|
|
show.value = n; |
|
|
|
show.value = n; |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const dialog = ref() |
|
|
|
|
|
|
|
const move = reactive({ |
|
|
|
|
|
|
|
x: 0, |
|
|
|
|
|
|
|
y: 0 |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
const temp = reactive({ |
|
|
|
|
|
|
|
x: 0, |
|
|
|
|
|
|
|
y: 0 |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
let x = 0, y = 0; |
|
|
|
|
|
|
|
const moveFlag = ref(false); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const left = computed(() => { |
|
|
|
|
|
|
|
return "calc(" + prop.left + ' - ' + move.x + 'px)'; |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
const top = computed(() => { |
|
|
|
|
|
|
|
return "calc(" + prop.top + ' - ' + move.y + 'px)'; |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const mouseDown = (e: MouseEvent) => { |
|
|
|
|
|
|
|
moveFlag.value = true; |
|
|
|
|
|
|
|
x = e.clientX; |
|
|
|
|
|
|
|
y = e.clientY; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const mouseMove = (e: MouseEvent) => { |
|
|
|
|
|
|
|
if (moveFlag.value) { |
|
|
|
|
|
|
|
move.x = temp.x + x - e.clientX; |
|
|
|
|
|
|
|
move.y = temp.y + y - e.clientY; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
const mouseup = (e: MouseEvent) => { |
|
|
|
|
|
|
|
mouseMove(e); |
|
|
|
|
|
|
|
moveFlag.value = false; |
|
|
|
|
|
|
|
temp.x = move.x; |
|
|
|
|
|
|
|
temp.y = move.y; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const keydown = (e) => { |
|
|
|
const keydown = (e) => { |
|
|
|
if (e.keyCode == 27) { |
|
|
|
if (e.keyCode == 27) { |
|
|
|
show.value = false; |
|
|
|
show.value = false; |
|
|
@ -97,6 +135,7 @@ onMounted(() => { |
|
|
|
onBeforeUnmount(() => { |
|
|
|
onBeforeUnmount(() => { |
|
|
|
document.removeEventListener('keydown', keydown) |
|
|
|
document.removeEventListener('keydown', keydown) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.dialog { |
|
|
|
.dialog { |
|
|
@ -106,8 +145,8 @@ onBeforeUnmount(() => { |
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
|
|
|
|
|
|
|
|
|
.content { |
|
|
|
.content { |
|
|
|
top: v-bind('prop.top'); |
|
|
|
top: v-bind('top'); |
|
|
|
left: v-bind('prop.left'); |
|
|
|
left: v-bind('left'); |
|
|
|
right: v-bind('prop.right'); |
|
|
|
right: v-bind('prop.right'); |
|
|
|
bottom: v-bind('prop.bottom'); |
|
|
|
bottom: v-bind('prop.bottom'); |
|
|
|
padding: v-bind('prop.padding'); |
|
|
|
padding: v-bind('prop.padding'); |
|
|
|