добавили функцию обработки нажатия на кнопку Отменить,
This commit is contained in:
+13
-18
@@ -30,14 +30,6 @@ function setNumber(item) {
|
||||
item.variable.push(String(clickCount.value));
|
||||
listOfTrips.value.push(item);
|
||||
clickCount.value++;
|
||||
} else if (valueOfMarker === clickCount.value - 1) {
|
||||
//если мы нажимаем на последнюю выбранную клетку, то у неё удаляется число
|
||||
item.variable.splice(0, 1);
|
||||
const index = listOfTrips.value.indexOf(item);
|
||||
if (index !== -1) {
|
||||
listOfTrips.value.splice(index, 1);
|
||||
}
|
||||
clickCount.value--;
|
||||
} else {
|
||||
//если нажимаем на ранее отмеченную клетку (не последнюю), то выводится ошибка
|
||||
listOfTrips.value.push(item);
|
||||
@@ -66,6 +58,17 @@ function saveResult() {
|
||||
isModalVisible.value = true;
|
||||
}
|
||||
|
||||
function cancel(){
|
||||
numbers.value[listOfTrips.value.at(-1).index].variable.pop();
|
||||
listOfTrips.value.pop();
|
||||
|
||||
if (clickCount.value === 1) {
|
||||
return;
|
||||
} else {
|
||||
clickCount.value--;
|
||||
}
|
||||
}
|
||||
|
||||
function cleanResult() {
|
||||
clickCount.value = 1;
|
||||
numbers.value = [];
|
||||
@@ -83,14 +86,7 @@ function cleanResult() {
|
||||
const handleKeydown = (event) => {
|
||||
if (event.ctrlKey && event.code === "KeyZ" && listOfTrips.value.length) {
|
||||
event.preventDefault();
|
||||
numbers.value[listOfTrips.value.at(-1).index].variable.pop();
|
||||
listOfTrips.value.pop();
|
||||
|
||||
if (clickCount.value === 1) {
|
||||
return;
|
||||
} else {
|
||||
clickCount.value--;
|
||||
}
|
||||
cancel();
|
||||
}
|
||||
};
|
||||
useEventListener("keydown", handleKeydown);
|
||||
@@ -121,7 +117,7 @@ function copyAndToast(text) {
|
||||
<div class="actions">
|
||||
<button @click="saveResult">Сохранить</button>
|
||||
<button @click="cleanResult">Очистить</button>
|
||||
<button @click="cleanResult">Отменить</button>
|
||||
<button @click="cancel">Отменить</button>
|
||||
</div>
|
||||
<MyDropMenu/>
|
||||
</div>
|
||||
@@ -165,7 +161,6 @@ function copyAndToast(text) {
|
||||
<style>
|
||||
html {
|
||||
background-image: radial-gradient(#383838e2, #222222);
|
||||
color: white;
|
||||
}
|
||||
|
||||
:root {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<slot name="header">
|
||||
<strong>Заголовок по умолчанию</strong>
|
||||
</slot>
|
||||
<button class="btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
|
||||
<button class="modal-btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
@@ -104,9 +104,10 @@ function closeModal() {
|
||||
.modal-body {
|
||||
position: relative;
|
||||
padding: 20px 10px;
|
||||
color: white
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
.modal-btn-close {
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
padding: 0;
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<transition name="slide">
|
||||
<aside v-if="isOpen" class="side-panel">
|
||||
<div class="menu-header">
|
||||
<h3>Навигация</h3>
|
||||
<h1>SkyVue</h1>
|
||||
</div>
|
||||
|
||||
<nav class="menu-content">
|
||||
@@ -68,7 +68,9 @@ defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
h1{
|
||||
text-align: center;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
@@ -77,9 +79,9 @@ defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
|
||||
}
|
||||
|
||||
/* Анимация бургера в крестик */
|
||||
.is-active .line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
|
||||
.is-active .line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
|
||||
.is-active .line:nth-child(2) { opacity: 0; }
|
||||
.is-active .line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
|
||||
.is-active .line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
|
||||
|
||||
/* Боковая панель */
|
||||
.side-panel {
|
||||
@@ -90,7 +92,7 @@ defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
|
||||
height: 100vh;
|
||||
background: white;
|
||||
z-index: 1000;
|
||||
padding: 80px 20px 20px;
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
/* Затемнение фона */
|
||||
|
||||
Reference in New Issue
Block a user