Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags
more
Today
Total
관리 메뉴

고리타분한 개발자

[Vue JS] Practical Component Exercise #2: Modal 본문

Vue JS/Step By Step

[Vue JS] Practical Component Exercise #2: Modal

sunlee334 2017. 12. 5. 03:56

이번에는 modal 이용하여 컴포넌트 사용을 연습해 보려고 합니다.

역시 bulma의 component-modal 부분을 사용해보도록 하겠습니다. (https://bulma.io/documentation/components/modal/)


<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<style type="text/css">
body {
padding-top: 40px;
}
</style>
</head>

<body>
<div id="root" class="container">
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula,
id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<!-- <script src="main.js"></script> -->

</body>

</html>


bulma에서 modal코드를 가져온뒤 몇가지 문장을 추가한 코드입니다. 



코드를 실행시켜보면 위 사진과 같이 모달창이 생긴것을 확인할 수 있습니다.

이제 이 코드를 컴포넌트로 변경시켜 보도록 하겠습니다.


<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<style type="text/css">
body {
padding-top: 40px;
}
</style>
</head>

<body>
<div id="root" class="container">
<modal></modal>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script src="main.js"></script>

</body>

</html>


// main.js
Vue.component('modal', {
template: `
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula,
id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
`
})

new Vue({
el: '#root',

})


이런식으로 우리는 이름은 modal이며, template속성만을 지닌 컴포넌트를 만들었습니다.

이번에는 버튼 하나를 만들고 버튼을 클릭하면 modal을 띄워보도록 하겠습니다.


<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<style type="text/css">
body {
padding-top: 40px;
}
</style>
</head>

<body>
<div id="root" class="container">
<modal v-if="showModal"></modal>
<button @click="showModal = true">Show Modal</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script src="main.js"></script>

</body>

</html>


// main.js
Vue.component('modal', {
template: `
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula,
id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
`
})

new Vue({
el: '#root',

data: {
showModal: false
}

})


v-if에 showModal 값을 바인딩 시켜주고 


<modal v-if="showModal"></modal>


showModal의 초기 값을 false로 지정해 주었습니다.


showModal: false


그리고 난뒤, 버튼을 클릭하면 showModal의 값이 true로 변화하게끔 해주었습니다.


<button @click="showModal = true">Show Modal</button>


하지만, 여기에서 끝내면 한가지 문제점이 생깁니다. 



modal의 작동하지 않아 우리는 modal을 종료할 수 없습니다. 이 문제점을 해결하기 위해 X버튼을 클릭하면 modal창을 닫는 이벤트를 주도록 하겠습니다.


<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<style type="text/css">
body {
padding-top: 40px;
}
</style>
</head>

<body>
<div id="root" class="container">
<modal v-if="showModal" @close1="showModal = false"></modal>
<button @click="showModal = true">Show Modal</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script src="main.js"></script>

</body>

</html>


// main.js
Vue.component('modal', {
template: `
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula,
id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close" @click="$emit('close1')"></button>
</div>
`
})

new Vue({
el: '#root',

data: {
showModal: false
}

})


main.js 코드를 살펴보면 close1이라는 커스텀 이벤트를 만들었습니다. close1은 click 이벤트를 활성화 시켜줍니다. 그런뒤, index.html에서 X버튼을 클릭하면 showModal = false로 변화하게끔 구상하였습니다.


<button class="modal-close is-large" aria-label="close" @click="$emit('close1')"></button>


<modal v-if="showModal" @close1="showModal = false"></modal>


저작자표시

'Vue JS > Step By Step' 카테고리의 다른 글

[Vue JS] Practical Component Exercise #3: Tabs  (0) 2017.12.05
[Vue JS] Practical Component Exercise #1: Message  (0) 2017.12.04
[Vue JS] Components Within Components  (0) 2017.12.04
[Vue JS] Components 101  (0) 2017.12.04
[Vue JS] The Need for Computed Properties  (0) 2017.12.04
공유하기 링크
'Vue JS/Step By Step' Related Articles more
Comments