<template>
<div>
<el-button @click="popupStatus = true">打开弹窗</el-button>
<Popup :popupStatus="popupStatus" :loading="sonLoading" title="标" @popupStatusFn="popupStatusFn"></Popup>
</div>
</template>
<script>
import Popup from './Popup'
export default {
data() {
return {
popupStatus: false,
sonLoading:false
}
},
components: {
Popup
},
methods: {
popupStatusFn(data) {
data === 'false' ? (this.popupStatus = false) : (this.popupStatus = true)
}
}
}
</script>
<style lang="less" scoped></style>
---------------弹窗-----------------------
<template>
<div class="pop-up">
<el-dialog :title="title" :visible.sync="state" :before-close="handleClose">
<div class="main" v-loading="loading"></div>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
loading: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
},
popupStatus: {
type: Boolean,
default: false
}
},
data() {
return {
state: false
}
},
watch: {
popupStatus(oldVal, newVal) {
this.state = this.popupStatus
}
},
methods: {
handleClose() {
this.$emit('popupStatusFn', 'false')
}
}
}
</script>
<style lang="less" scoped>
.pop-up {
.main {
height: 60vh;
background: #9f9;
overflow: auto;
}
}
</style>
|
