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

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

<template>
  <el-dialog
    title="新增标签"
    :visible.sync="centerDialogVisible"
    width="80%"
    center>
  <div>
    <div style="background-color: #8c939d; color: #FFFFFF;height:50px;margin:0px;position: relative;top: -12px;left: -1%;width:1168px; font-size: 18px;"></div>
    <h4>基本信息</h4>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="标签类目" prop="region" class="region">
        <el-select v-model="ruleForm.region" placeholder="所属标签类目">
          <el-option label="标签类目" value="shanghai"></el-option>
          <el-option label="标签类目" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签名称" prop="name" class="tname"placeholder="请输入标签名称">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="标签编码" prop="name" class="tcode"placeholder="请输入标签编码">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="主体类型" prop="ttype" class="ttype">
        <el-select v-model="ruleForm.region" placeholder="所属标签类目">
          <el-option label="社会法人" value="shanghai"></el-option>
          <el-option label="自然人" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="更新周期" prop="ttype" class="tcir">
        <el-select v-model="ruleForm.region" placeholder="请选择更新周期">
          <el-option label="每天" value="shanghai"></el-option>
          <el-option label="每周" value="beijing"></el-option>
          <el-option label="每月" value="beijing"></el-option>
          <el-option label="每年" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <span class="syx">是否隐形</span>
      <el-switch
        v-model="value"
        active-color="#13ce66"
        inactive-color="#ff4949"
        label="是否隐形" class="yx">
      </el-switch>
      <span class="sbz">备注</span>
      <el-input
        label="备注"
        type="textarea"
        :rows="2"
        placeholder="请输入备注信息"
        v-model="textarea"
        class="bz">
      </el-input>
      <h4 class="tagz">标签值分层</h4>
      <el-form-item label="来源表" prop="ttype" class="lyt">
        <el-select v-model="ruleForm.region" placeholder="请选择搜索选择来源表">
          <el-option label="测试" value="shanghai"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="来源数据项" prop="ttype" class="lyd">
        <el-select v-model="ruleForm.region" placeholder="请选择搜索来源数据项">
          <el-option label="测试" value="shanghai"></el-option>
        </el-select>
      </el-form-item>
      <el-table
        :data="ttable"
        style="width: 85%" class="ttable">
        <el-table-column
          prop="rule"
          label="规则"
          width="280">
          <el-select v-model="ruleForm.tj" style="width:130px;">
            <el-option label="测试" value="shanghai"></el-option>
          </el-select>
          <el-input v-model="ruleForm.tji" style="width:110px;"></el-input>
        </el-table-column>
        <el-table-column
          prop="tvalue"
          label="标签值"
          width="180">
          <el-input v-model="ruleForm.tji" ></el-input>
        </el-table-column>
        <el-table-column
          prop="tms"
          label="标签描述">
          <el-input v-model="ruleForm.tji" ></el-input>
        </el-table-column>
        <el-table-column
          prop="ms"
          label="操作">
          <el-button src="../../assets/image/HTSCIT_.png" circle><img src="../../assets/image/close (2).png" style="width:25px;padding: 0px;"/></el-button>
          <el-button src="../../assets/image/close(2).png" circle><img src="../../assets/image/HTSCIT_.png" style="width:25px;border: 0px;"/></el-button>
        </el-table-column>
      </el-table>
      <el-form-item>
        <el-input v-model="input" placeholder="新增标签内容" class="content"></el-input>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="scope._self.$refs[`popover-${scope.$index}`].doClose()" >取消</el-button>
      </el-form-item>
    </el-form>
    <el-button slot="reference"  class="buttong3">新增</el-button>
  </div>
  </el-dialog>
</template>

<script>
    export default {
        name: "Popup",
      data(){
          return{
            centerDialogVisible:false,
            ruleForm:{},
            rules:'',
            value:'',
            textarea:'',
            ttable:[],
            input:'',
            //校验的规则
            rules: {
              name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
              ],
              region: [
                { required: true, message: '请选择活动区域', trigger: 'change' }
              ],
            },

          }
      }
    }
</script>

<style lang="scss" scoped>
  @import "../../assets/styles/index/tag.css";
</style>
2、在页面中添加自定义组件的双标签，用ref获取组件中想要获取的内容

<Popup ref="Popup"></Popup>
注：要和弹出按钮(触发单击弹出事件的)有公共的div
3、注册组件
在页面中引入自定义组件，并且注册

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

components:{//注册组件
  Popup,
},s
4、在点击事件中打印$refs里取到的内容，在打印结果中查找控制弹出状态的属性

 

 或者在Dialog标签中查找

<el-dialog
  title="新增标签"
  :visible.sync="centerDialogVisible"//一般情况下是这个
  width="80%"
  center>

 

 找到以后把状态指定为弹出

this.$refs.Popup.centerDialogVisible = true;
运行->完美

 

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

最后：感谢可爱小仙革的细心指导