子頁面
<template>
<div class="app-container">
<el-button type="primary" icon="el-icon-plus" size="small" @click="handleclick()">添加</el-button>
<el-dialog
title
:visible.sync="openOff"
center
:append-to-body="true"
:lock-scroll="false"
width="30%"
fullscreen="true"
>
<prop_form></prop_form>
</el-dialog>
</div>
</template>
<script>
import prop_form from "@/views/form/prop_form.vue";
export default {
components: {
prop_form,
},
data() {
return {
form: {},
openOff: false,
};
},
methods: {
handleclick() {
this.openOff = true; //默認(rèn)頁面不顯示為false,點(diǎn)擊按鈕將這個(gè)屬性變成true
},
},
};
</script>
<style scoped>
.line {
text-align: center;
}
</style>
父頁面
<template>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<style>
.el-header,
.el-footer {
background-color: #b3c0d1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #d3dce6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #e9eef3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
聯(lián)系客服