vue3-uikit

1
<template>
2
  <div>
3
    <div class="demo">
4
      <Button @click="showModal = true" class="btn btn-primary"
5
        >Открыть окно</Button
6
      >
7
    </div>
8

9
    <!-- Модальное окно -->
10
    <transition name="modal">
11
      <div v-if="showModal" class="modal-overlay" @click="closeModal">
12
        <div class="modal-content" @click.stop>
13
          <button class="btn modal-close-btn" @click="closeModal">×</button>
14
          <div class="modal-body">
15
            <h3>Modal Title</h3>
16
            <p>
17
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
18
              odio. Quisque volutpat mattis eros. Nullam malesuada erat ut
19
              turpis. Suspendisse urna nibh viverra non semper suscipit posuere
20
              a pede. Donec nec justo eget felis facilisis fermentum. Aliquam
21
              porttitor mauris sit amet orci. Aenean dignissim pellentesque
22
              felis. Morbi in sem quis dui placerat ornare. Pellentesque odio
23
              nisi euismod in pharetra a ultricies in diam. Sed arcu. Cras
24
              consequat.
25
            </p>
26
          </div>
27
          <div class="modal-footer">
28
            <Button @click="closeModal" class="btn btn-primary">Close</Button>
29
            <Button @click="confirmAction" class="btn btn-confirm"
30
              >Confirm</Button
31
            >
32
          </div>
33
        </div>
34
      </div>
35
    </transition>
36
  </div>
37
</template>
38

39
<script>
40
import { ref } from "vue";
41

42
export default {
43
  name: "Modal",
44

45
  setup() {
46
    const showModal = ref(false);
47

48
    const closeModal = () => {
49
      showModal.value = false;
50
    };
51

52
    const confirmAction = () => {
53
      console.log("Confirmed");
54
      closeModal();
55
    };
56

57
    return {
58
      showModal,
59
      closeModal,
60
      confirmAction,
61
    };
62
  },
63
};
64

65
// Компонент кнопки
66
export const Button = {
67
  template: `
68
    <button class="btn" @click="$emit('click')">
69
      <slot></slot>
70
    </button>
71
  `,
72
};
73
</script>
74

75
<style scoped>
76

77
.demo {
78
  padding: 20px;
79
  text-align: center;
80
}
81

82
/* Анимация открытия и закрытия модального окна */
83
.modal-enter-active,
84
.modal-leave-active {
85
  transition: opacity 0.5s, transform 0.5s;
86
}
87

88
.modal-enter, .modal-leave-to {
89
  opacity: 0;
90
  transform: translateY(-10px);
91
}
92

93
/* Стили модального окна */
94
.modal-overlay {
95
  position: fixed;
96
  top: 0;
97
  left: 0;
98
  width: 100%;
99
  height: 100%;
100
  background: rgba(0, 0, 0, 0.7);
101
  display: flex;
102
  align-items: center;
103
  justify-content: center;
104
  z-index: 1000;
105
  opacity: 0;
106
  animation: fadeIn 0.3s forwards;
107
}
108

109
@keyframes fadeIn {
110
  to {
111
    opacity: 1;
112
  }
113
}
114

115
.modal-content {
116
  background: white;
117
  padding: 30px;
118
  border-radius: 10px;
119
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
120
  max-width: 600px;
121
  width: 100%;
122
  position: relative;
123
  animation: slideUp 0.5s forwards;
124
}
125

126
@keyframes slideUp {
127
  from {
128
    transform: translateY(20px);
129
  }
130
  to {
131
    transform: translateY(0);
132
  }
133
}
134

135
.modal-close-btn {
136
  position: absolute;
137
  top: 15px;
138
  right: 15px;
139
  background: red;
140
  border: none;
141
  cursor: pointer;
142
  color: white;
143
}
144

145
.modal-body {
146
  margin-bottom: 20px;
147
  color: #555;
148
  line-height: 1.6;
149
}
150

151
.modal-footer {
152
  text-align: right;
153
}
154

155
/* Стили для кнопок */
156
.btn {
157
  padding: 10px 20px;
158
  border: none;
159
  cursor: pointer;
160
  font-size: 14px;
161
  margin: 5px;
162
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
163
  border-radius: 5px;
164
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
165
}
166

167
.btn-primary {
168
  background-color: #6200ea;
169
  color: white;
170
}
171

172
.btn-primary:hover {
173
  background-color: #531cc0;
174
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
175
}
176

177
.btn-secondary {
178
  background-color: #03dac6;
179
  color: white;
180
}
181

182
.btn-secondary:hover {
183
  background-color: #02c3b0;
184
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
185
}
186

187
.btn:hover {
188
  transform: translateY(-2px);
189
}
190

191
.btn-confirm {
192
  background-color: orange;
193
  color: white;
194
}
195
</style>
196