父组件
<template>
<div class="text-center">
<div v-for=" i in 100" :key="i">{{i}}</div>
<Modal v-show="showModal" v-on:closeme="closeme"></Modal>
</div>
</template>
<script>
import Modal from '@/components/Modal'
export default {
name: 'test',
data () {
return {
showModal: true
}
},
components: {
Modal
},
methods: {
closeme () {
this.showModal = !this.showModal
},
stop () {
var mo = function (e) {
e.preventDefault()
}
document.body.style.overflow = 'hidden'
document.addEventListener('touchmove', mo, false) // 禁止页面滑动
},
move () {
var mo = function (e) {
e.preventDefault()
}
document.body.style.overflow = '' // 出现滚动条
document.removeEventListener('touchmove', mo, false)
}
},
mounted () {
this.stop()
}
}
</script>
<style scoped>
</style>
子组件
<template>
<div class="modal-backdrop">
<div class="modal">
<div class="modal-header">
<h3>我是一个Modal的标题</h3>
</div>
<div class="modal-body">
<p>我是一个Modal的内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn-close" @click="closeSelf">关闭</button>
<button type="button" class="btn-confirm" @click="confirm">确认</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Modal',
props: {
},
data () {
return {
}
},
methods: {
closeSelf () {
this.$emit('closeme')
}
}
}
</script>
<style>
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,.3);
display: flex;
justify-content: center;
align-items: center;
}
.modal {
background-color: #fff;
box-shadow: 2px 2px 20px 1px;
overflow-x:auto;
display: flex;
flex-direction: column;
border-radius: 16px;
width: 700px;
}
.modal-header {
border-bottom: 1px solid #eee;
color: #313131;
justify-content: space-between;
padding: 15px;
display: flex;
}
.modal-footer {
border-top: 1px solid #eee;
justify-content: flex-end;
padding: 15px;
display: flex;
}
.modal-body {
position: relative;
padding: 20px 10px;
}
.btn-close, .btn-confirm {
border-radius: 8px;
margin-left:16px;
width:56px;
height: 36px;
border:none;
cursor: pointer;
}
.btn-close {
color: #313131;
background-color:transparent;
}
.btn-confirm {
color: #fff;
background-color: #2d8cf0;
}
</style>