VUE+element頁面按鈕調用dialog

VUE+element通過按鈕調用普通彈框（彈框頁面獨立出一個dialog頁面，非在同一個頁面文件里）

 

 

代碼如下

<el-dialog>
<el-button type="primary" style="float: right;margin-bottom: 15px;" @click="addDetailNormal">彈出dialog</el-button>
<StockOutDetailEditDialog ref="StockOutDetailEditDialog"/>
</el-dialog>

//在這里導入你的dialog頁面組件
import StockOutDetailEditDialog from './StockOutDetailEditDialog'

export default {
//這里不能忘記，否則可能會出現 不彈框
  components: {
    StockOutDetailEditDialog
  }
}

method:{
//這個就是上方按鈕的調用方法
    addDetailNormal() {
        this.$refs.StockOutDetailEditDialog.openAdd().then(res => {//若有，加入你的操作}
    }
}

這里展示的是最普通的按鈕調用另外頁面的dialog

至於上方方法里的openAdd()方法，就是你彈框頁面的方法

 

 是否展示用的是

dialogVisible=false或者true控制

 

 

<template>
  <el-dialog
    custom-class="form-dialog"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <div slot="title" class="dialog-header">{{ type === 'add' ? '新增' : '編輯' }}入庫明細</div>
    <dynamic-form ref="form" v-model="formData" :fields="fields" :disabled="type === 'detail'" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false;reject()">取 消</el-button>
      <el-button v-if="type !== 'detail'" type="primary" @click="submitForm('accountForm')">確 定</el-button>
    </span>
  </el-dialog>
</template>

總體思路就是

A頁面按鈕調用a方法，a方法通過

this.$refs.StockOutDetailEditDialog.openAdd().then(res => {

調用B(即dialog頁面)的b方法，而b方法內通過dialogVisible=true展示頁面