CviLux_fe/src/views/system/components/SystemInfoModal.vue

45 lines
920 B
Vue

<script setup>
import { inject, ref, watch } from "vue";
import SystemInfoModalContent from "./SystemInfoModalContent.vue";
const { selectedDevice: data } = inject("system_selectedDevice")
const position = ref({
left: "0px",
top: "0px",
display: "none",
});
watch(
data,
(newValue) => {
console.log(newValue.value)
if (!newValue.value) {
position.value = {
display: "none"
};
} else {
position.value = {
...data.value.initPos,
display: "block"
};
}
}, {
deep: true,
}
);
</script>
<template>
<Modal id="system_info_modal" :onCancel="onCancel" width="600" :draggable="!data?.isMobile" :backdrop="false"
:modalStyle="position" :class="data?.isMobile ? '-translate-x-1/2 -translate-y-1/2' : ''">
<template #modalContent>
<SystemInfoModalContent />
</template>
</Modal>
</template>
<style lang="scss" scoped></style>