vue-element-ui弹出框的使用

构建页面时，需要按钮弹出一个新的页面进行编辑，此时需要用到dialog弹出框，考虑复用，把弹出框单独提出来使用。

1.父组件页面一个按钮，openOff默认false，隐藏。handleclick触发，

 

 

 

<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=true;//默认页面不显示为false,点击按钮将这个属性变成true
},

 

2.子组件编写

<template>
<div>子组件</div>
</template>
<script>
export default {

name: 'Diog',
}
</script>
3.父组件中引用子组件

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