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
}