單文件組件
使用單文件組件封裝model的模板孽文、邏輯和樣式，之后就可以在頁(yè)面中調(diào)用此通用組件蜒秤。
model-1.png
需求
model有兩個(gè)使用場(chǎng)景：
- 備注/修改密碼(簡(jiǎn)易)：
在屏幕中垂直居中 - 添加/修改/展示信息(復(fù)雜)：
距離屏幕頂部200px，內(nèi)容過(guò)長(zhǎng)時(shí)可滾動(dòng)。 - 常規(guī)要求(共同點(diǎn))：
標(biāo)題扎酷，關(guān)閉icon
點(diǎn)擊確定/關(guān)閉/遮罩檐涝，隱藏model組件
分析上述需求點(diǎn)遏匆，得到如下圖：
model-2.png
- wrapper
負(fù)責(zé)遮蓋屏幕 - inner
負(fù)責(zé)垂直居中/距頂部200px - title
可變化標(biāo)題 - content
可變化的內(nèi)容區(qū)域
方案
- Prop傳參
title(標(biāo)題)、show(隱藏/顯示)谁榜、width(寬度)幅聘、type(居中/頂部) - 自定義事件
關(guān)閉model - slot分發(fā)
內(nèi)容區(qū)域可自定義 - 滾動(dòng)穿透
具體實(shí)現(xiàn)
template
<div class="model-mask" v-show="show">
<div :class="[type === 'top' ? 'model-wrapper-top' : 'model-wrapper']" @click="close">
<div :class="[type === 'top' ? 'model-container-top' : 'model-container']"
:style="{width:width + 'px'}">
<div class="model-header">
<span>{{title}}</span>
<i class="close-empty" @click="close">
<Icon
type="ivu-icon ivu-icon-ios-close-empty"
size="25" />
</i>
</div>
<div class="model-body">
<slot></slot>
</div>
</div>
</div>
</div>
script
export default {
name: 'MyModel',
props:
{
title: String,
show: Boolean,
width: Number,
type: String
},
data () {
return {
scrollTop: ''
}
},
watch: {
show: function (val, oldVal) {
function getScrollTop () {
return document.body.scrollTop || document.documentElement.scrollTop
}
if (val) {
// 在彈出層顯示之前，記錄當(dāng)前的滾動(dòng)位置
this.scrollTop = getScrollTop()
let body = document.querySelector('body')
body.className = 'not-scroll'
// 把脫離文檔流的body拉上去窃植！否則頁(yè)面會(huì)回到頂部帝蒿！
document.body.style.top = -this.scrollTop + 'px'
}
}
},
methods: {
close: function (e) {
function to (scrollTop) {
document.body.scrollTop = document.documentElement.scrollTop = scrollTop
}
let target = e.srcElement || e.target
if (target.className === 'model-wrapper' ||
target.className.indexOf('ivu-icon-ios-close-empty') > -1 ||
target.className === 'model-wrapper-top') {
this.$emit('close')
let body = document.querySelector('body')
body.className = ''
// 滾回到老地方！
to(this.scrollTop)
}
}
}
}
style
<style scoped lang="scss">
.model-mask {
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(0, 0, 0, .5);
}
/**
* 垂直居中
*/
.model-wrapper {
height: 100%;
text-align: center;
}
.model-wrapper:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.model-container {
position: relative;
display: inline-block;
vertical-align: middle;
background-color: white;
text-align: left;
box-shadow: 0 5px 14px 0 rgba(0,0,0,0.15);
border-radius: 6px;
overflow: hidden;
z-index: 1050;
}
/**
* 距離頂部100px巷怜，可滾動(dòng)
*/
.model-wrapper-top {
position: relative;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
.model-container-top {
margin: 100px auto;
background-color: white;
text-align: left;
box-shadow: 0 5px 14px 0 rgba(0,0,0,0.15);
border-radius: 6px;
overflow: hidden;
}
.close-empty {
position: absolute;
right: 16px;
top: 10px;
overflow: hidden;
cursor: pointer;
z-index: 1100;
}
.model-header {
position: relative;
height: 45px;
line-height: 45px;
padding: 0 20px;
font-size: 14px;
color: #999;
border-bottom: 1px solid #eee;
}
</style>
引用
<button type="button" @click="showModel">戳我呀</button>
import MyModel from '../componets/model.vue'
export default {
name: 'test',
components: {
MyModel
},
data () {
return {
show: false
}
},
methods: {
/**
* 打開model
*/
closeModel: function () {
this.show = false
},
/**
* 關(guān)閉model
*/
showModel: function () {
this.show = true
}
}
}
引用一
<my-model title="標(biāo)題" :width="400" :show="show" v-on:close="closeModel">
<!-- slot -->
<div class="tips">
<p>this is content area葛超。</p>
</div>
</my-model>
引用二
<my-model type="top" title="標(biāo)題" :width="400" :show="show" v-on:close="closeModel">
<!-- slot -->
<div class="tips">
<p v-for="i in 50">this is content area暴氏。</p>
</div>
</my-model>
demo
- 垂直居中
model-3.png
- 距頂部200px，可滾動(dòng)
model-4.png
