vue自定义组件+Dialog 对话框组件定制弹出框教程（转载）

1、新建一个.vue页面，写一个Dialog组件、把弹出框上想要展示的内容放进去。

<template>
  <el-dialog
    title="新增标签"
    :visible.sync="centerDialogVisible"
    width="80%"
    center>
  <div>
    <!-- 这个div放置内容 -->
  </div>
  </el-dialog>
</template>

<script>
    export default {
        name: "Popup",
      data(){
          return{
            centerDialogVisible:false
          }
      }
    }
</script>

2.父组件引入并注册Dialog组件

import Popup from '/src/components/labelfact/Popup.vue';

<Popup ref="Popup"></Popup>

3.触发Dialog组件的事件调用

this.$refs.Popup.centerDialogVisible = true;

注：弹出框周围要有阴影部分，否则说明用错组件了