之前寫過一個組件的文章，算是入門，也是官網(wǎng)的例子，這個純粹自己再寫一遍，之前的文章
html結(jié)構(gòu)
這也是官網(wǎng)的一個例子
首先我把生成后的html復(fù)制過來，分成兩部分，一部分是一個按鈕，用來彈出對話框，另外一部分是彈出對話框，最外層是一層遮罩，然后是對話框的主體。
<div id="app">
<button id="show-modal">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<div class="modal-mask modal-transition" style="display: none;">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<h3 slot="header">custom header</h3>
</div>
<div class="modal-body">
default body
</div>
<div class="modal-footer">
default footer
<button class="modal-default-button">
OK
</button>
</div>
</div>
</div>
</div>
</div>
Vue組件初步
參照另外一篇，進(jìn)行模板的結(jié)構(gòu)調(diào)整
<script type="x/template" id="modal-template">
<div class="modal-mask modal-transition" style="display: none;">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<h3 slot="header">custom header</h3>
</div>
<div class="modal-body">
default body
</div>
<div class="modal-footer">
default footer
<button class="modal-default-button">
OK
</button>
</div>
</div>
</div>
</div>
</script>
<div id="app">
<button id="show-modal">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modal></modal>
</div>
然后利用vue渲染
<script>
// register modal component
Vue.component('modal', {
template: '#modal-template'
})
// start app
new Vue({
el: '#app'
})
</script>
這樣就有了組件的基本結(jié)構(gòu)，下面就開始css練習(xí)階段
css
主要是利用display table來垂直居中以及fixed加上z-index
.modal-mask{
background-color: rgba(0, 0, 0, .5);
position: fixed;
width: 100%;
height:100%;
top:0;
left: 0;
z-index: 99;
display: table;
}
.modal-wrapper{
display: table-cell;
vertical-align: middle;
}
.modal-container{
margin: auto;
top: 50%;
background-color: white;
width: 300px;
padding: 20px 30px;
}
.modal-header h3{
margin-top: 0;
color:#42b983;
}
.modal-body{
margin: 20px 0;
}
.modal-default-button{
float: right;
}
控制顯示
用showModal來表示顯示與否
// start app
new Vue({
el: '#app',
data: {
showModal: false
}
})
然后組件將值定義，注意這里加了.sync，它是為了強(qiáng)制雙向綁定，一把情況下組件的數(shù)據(jù)流是單向的。
<modal :show.sync="showModal"> </modal>
然后再組件的生命中定義show
Vue.component('modal', {
template: '#modal-template',
props: {
show: {
type: Boolean,
required: true,
twoWay: true
}
}
});
同時用show來控制mask的顯示
<div class="modal-mask" v-show="show">
然后我們有兩個關(guān)于顯示的交互，一個在外面，通過按鈕
<button id="show-modal" @click="showModel=true">Show Modal</button>
另外一個在里面
<button class="modal-default-button" @click="show = false"> OK</button>
slot的用法
slot是關(guān)于內(nèi)容分發(fā)的，用來代替子組件的內(nèi)容，這里的對話框有三類內(nèi)容，header,body,footer三部分內(nèi)容，把對話框組件看成子組件，那么可以利用slot在子組件代替相關(guān)內(nèi)容,比如最后的渲染效果如下
<div class="modal-header">
<h3>custom header</h3>
</div>
我們在子組件里面定義slot，name可以用來標(biāo)識
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
在定義Modal的時候，我們可以利用slot的屬性來替代子組件相應(yīng)的部分。
<modal :show.sync="showModal">
<h3 slot="header">custom header</h3>
</modal>
就這樣還可以定義body和footer
過渡
如果我們增加了transition屬性，那么我們要定義三個class
<div class="modal-mask" v-show="show" transition="modal">
然后我們增加了樣式
.modal-mask{
transition: opacity .3s ease;
}
.modal-enter .modal-container,
.modal-leave .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
