Vue.js のモーダルコンポーネントのサンプルです。
モーダルコンポーネント
MyModal.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| <template>
<transition name="b2t">
<div class="modal-wrapper" @click.self.stop="$emit('hide')" v-if="isOpened">
<div id="modal" class="modal-container">
<div class="hide" @click="$emit('hide')">
<i class="far fa-times"></i>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
props: {
isOpened: false,
},
}
</script>
<style scoped="" lang="scss">
.modal {
&-wrapper {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 10000;
}
&-container {
position: fixed;
top: 20vh;
left: 10vw;
width: 80vw;
background-color: white;
border-radius: 15px 15px 0px 0px;
padding: 15px;
padding-top: 5vh;
overflow: auto;
}
}
.hide {
position: absolute;
top: 0;
right: 2vw;
font-size: 2.5rem;
}
.b2t-enter-active,
.b2t-leave-active {
transition: opacity 300ms;
}
.b2t-enter-active > .modal-container,
.b2t-leave-active > .modal-container {
transition: all 300ms;
}
.b2t-enter > .modal-container {
transform: translateX(100vw);
}
.b2t-leave-to > .modal-container {
transform: translateX(100vw);
}
</style>
|
モーダルコンポーネントを呼び出すコンポーネント
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <template>
<MyModal
:isOpened="isOpenModal"
@hide="isOpenModal = false"
/>
</template>
<script>
import MyModal from '@/components/MyModal.vue';
export default {
components: {
MyModal,
},
data() {
return {
isOpenModal: false,
};
},
}
|