Pop-layer element ui

<template>
<div class="mat_addcompt">
<The-dialog
:visible.sync="visible"
:show-close="false"
width="1000px"
:modal="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
:append-to-body="true"
class="add"
>
<h2 slot="title">
<Template> Add setting </ template>
</h2>
<button
type="button"
aria-label="Close"
class="el-dialog__headerbtn"
@click.stop="cancelModal"
>
<i class="close"></i>
</button>
<-! Form specific content ->
<div>
qwewr
</div>
 
<div slot="footer" class="buttons-wrap">
<el-button type="primary" @click="">保存</el-button>
<el-button type="primary" @click="cancelModal()">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import httpApi from "@/api/config.js";
export default {
name: "SettingComponent",
props: {
visible: { type: Boolean, default: false },
 
},
data() {
return {
 
};
},
mounted() {
 

 
},
Before // Create
created() {
 
},
// add a keepalive <component: is = "Component name"> </ component>
activated() {},
//monitor
watch: {
// changes will perform this function
currentRow() {}
},
methods: {
 
cancelModal() {
// Close popup triggered parent component modifications visible value
this.$emit("update:visible", false);
 
},
 
}
};
</script>
<style scoped lang='scss'>
.el-dialog__header /deep/ h2 {
margin-top: 12px;
font-weight: bold;
}

</style>
<button @click="add">新增</button>
父<ImportAddComponent :visible.sync="addIsShow"></ImportAddComponent>

<script>

import ImportAddComponent from "./BedutyImport_addcomponen";
import api from "@/api/config";
export default {
name: "BedutyDaily",
components: { ImportAddComponent },
data() {
return {
addIsShow: false,
}
},
methods: {
add(){
this.addisShow = true;
 
}
</script>

Guess you like

Origin www.cnblogs.com/lihong-123/p/10950531.html