Use vue-element-ui popup box

When building a page, you need to button up a new page for editing, this time need to use the pop-up dialog box, consider reuse, the pop-up box singled to use.

1. The parent component pages of a button, openOff default false, hidden. handleclick trigger,

 

 

 

<el-button type="primary" icon="el-icon-plus" size="small" @click="handleclick()" :disabled="add()">添加</el-button>
<el-dialog title="登陆" :visible.sync="openOff" center :append-to-body='true' :lock-scroll="false" width="30%">
<Diog></Diog>
</el-dialog>

 

Data () {
return {
openOff: false,
}
}
handleClick () {
this.openOff = to true; // default page is not displayed as false, click this button will turn attribute to true
},

 

2. preparation of sub-assemblies

<Template>
<div> subassembly </ div>
</ Template>
<Script>
Export default {

name: 'Diog',
}
</ Script>
3. referenced parent component subassembly

import Diog from './Diog.vue';
components: {
Diog
}