src/App.vue

@@ -5,7 +5,7 @@ import {useEventListener} from "@vueuse/core";
 import MyDialog from "./components/MyDialog.vue";
 import MyDropMenu from "./components/MyDropMenu.vue";
 import copyToclipboard from "./shared/copyToclipboard";
-import onContextMenu from './shared/ContextMenu'
+import ContextMenu from "@imengyu/vue3-context-menu";
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
@@ -159,6 +159,55 @@ function deletePlatform(item) {
     clickCount.value--
 }
 
+function onContextMenu(e, item) {
+    ContextMenu.showContextMenu({
+        theme: 'mac dark',
+        x: e.x,
+        y: e.y,
+        items: [
+            {
+                label: "Платформы",
+                children: [
+                    {
+                        label: "Белая",
+                        onClick: () => createPlatform(item, 'white'),
+                    },
+                    {
+                        label: "Синяя",
+                        onClick: () => createPlatform(item, 'blue'),
+                    },
+                    {
+                        label: "Красная",
+                        onClick: () => createPlatform(item, 'red'),
+                    },
+                    {
+                        label: "Удалить",
+                        onClick: () => deletePlatform(item),
+                    },
+                ]
+            },
+            {
+                label: "QR код",
+                children: [
+                    {
+                        label: "Добавить",
+                        onClick: () => alert('Здесь ещё предстоит написать код')
+                    },
+                    {
+                        label: "Удалить",
+                        onClick: () => alert('Здесь ещё предстоит написать код')
+                    },
+                ],
+            },
+            {
+                label: "Отмена",
+                onClick: () => {
+                    alert('Здесь ещё предстоит написать код')
+                }
+            },
+        ]
+    });
+}
 </script>
 
 <template>

src/components/MyDialog.vue

@@ -31,6 +31,7 @@ const props = defineProps({
         required: true
     }
 })
+
 function closeModal() {
     emit('close');
 }
@@ -70,14 +71,16 @@ function closeModal() {
     border-bottom: 1px solid #eeeeee;
     justify-content: space-between;
 }
+
 .modal-header-success {
     color: #4AAE9B;
 }
+
 .modal-header-error {
     color: red;
 }
 
-.modal-header [type = 'button'] {
+.modal-header button {
     color: red;
     font-size: 25px;
 }
@@ -86,17 +89,21 @@ function closeModal() {
     justify-content: flex-end;
     border-top: 1px solid white;
 }
-.modal-footer [type = 'button'] {
+
+.modal-footer button {
     justify-content: flex-end;
     border-top: 1px solid white;
     padding: 5px;
+    color: white;
 }
-.modal-footer-success [type = 'button'] {
+
+.modal-footer-success button {
     background-color: #4AAE9B;
     border: none;
     margin: 3px;
 }
-.modal-footer-error [type = 'button'] {
+
+.modal-footer-error button {
     background: red;
     border: none;
 }

src/shared/ContextMenu.js

@@ -1,51 +0,0 @@
-import ContextMenu from "@imengyu/vue3-context-menu";
-
-export default function onContextMenu(e, item) {
-    ContextMenu.showContextMenu({
-        theme: 'mac dark',
-        x: e.x,
-        y: e.y,
-        items: [
-            {
-                label: "Платформы",
-                children: [
-                    {
-                        label: "Белая",
-                        onClick: () => createPlatform(item, 'white'),
-                    },
-                    {
-                        label: "Синяя",
-                        onClick: () => createPlatform(item, 'blue'),
-                    },
-                    {
-                        label: "Красная",
-                        onClick: () => createPlatform(item, 'red'),
-                    },
-                    {
-                        label: "Удалить",
-                        onClick: () => deletePlatform(item),
-                    },
-                ]
-            },
-            {
-                label: "QR код",
-                children: [
-                    {
-                        label: "Добавить",
-                        onClick: () => alert('Здесь ещё предстоит написать код')
-                    },
-                    {
-                        label: "Удалить",
-                        onClick: () => alert('Здесь ещё предстоит написать код')
-                    },
-                ],
-            },
-            {
-                label: "Отмена",
-                onClick: () => {
-                    alert('Здесь ещё предстоит написать код')
-                }
-            },
-        ]
-    });
-}