Vue 2 入门学习笔记10.组件练习：Modal
- 本系列文章为
laracasts.com的系列视频教程——Learn Vue 2: Step By Step 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频，支持正版。- 视频源码地址：github.com/laracasts/Vue-Forms
- 项目初始版本为
Vue 2.1.3，教程还在更新中。
本节说明
- 对应第 10 小节：Practical Component Exercise 2：Modal
本节内容
接下来来做第二个练习：Modal组件，我们的例子从 Bulma 网站选取。我们需要引入样式跟组件：
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.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">Something is happening...</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</div>
<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>接下来我们要做到事情是：将Modal抽取成组件，在页面点击按钮显示组件，点击组件中的删除图标（图片右上角）隐藏组件。我们先来完成前两个步骤：
main.js
Vue.component('modal',{
template:`
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<slot></slot>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
`
});
new Vue({
el:'#root',
data:{
showModal:false
}
});我们默认组件不显示，当点击Show Modal按钮之后再显示：
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
<style type="text/css">
body{
padding-top: 40px;
}
</style>
</head>
<body>
<div id="root" class="container">
<modal v-if="showModal">Something is happening</modal>
<button @click="showModal = true">show Modal</button>
</div>
<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>现在查看效果：
然后我们来完成第三步。我们利用Vue的 $emit 触发当前实例上的close事件，在close事件中，我们设置showModal属性为false：
main.js
Vue.component('modal',{
template:`
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<slot></slot>
</div>
</div>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
</div>
`
});
new Vue({
el:'#root',
data:{
showModal:false
}
});index.html
.
.
<div id="root" class="container">
<modal v-if="showModal" @close="showModal = false">Something is happening</modal>
<button @click="showModal = true">show Modal</button>
</div>
.
.现在你可以查看最终效果了。
关于 LearnKu
粤公网安备 44030502004330号