把dialog对话框设置成组件的形式

准备一个按钮点击打开对话框

  <el-button type="success" style="margin-top:30px;" @click="showDialogQrCode('游戏', 3)">打开一个dialog对话框</el-button>

 

  

   // 打开对话框

    showDialogQrCode(QrCode, id) {

      this.$nextTick(() => {

        this.$refs.dialogDownloadQrCode.showDialog(QrCode, id)

      })

    }

 

  导入对话框组件并且注册为自己的私有组件

  

  import dialogDownloadQrcode from './dialogDownloadQrCode.vue'

  components: {

    dialogDownloadQrcode

  }

对话框组件

<template>
  <el-dialog title="下载电子码" ref="dialog" :visible.sync="dialogVisible" width="850px" center>
    <div slot="footer">
      <el-button type="primary">立即下载</el-button>
    </div>
  </el-dialog>
</template>


<script>
export default {
  name: 'dialogDownloadQrCode',
  data() {
    return {
      dialogVisible: false,
      eventsId: ''
    }
  },
  methods: {
    showDialog(QrCode, id) {
      this.dialogVisible = true
      this.eventsId = id
    }
  }
}
</script>



<style scoped>
 
</style>