}
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，可滚动
*/
.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
},
/**
* 关闭model
*/
showModel: function () {
this.show = true
}
}
}
引用一
<my-model title="标题" :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="标题" :width="400" :show="show" v-on:close="closeModel">
