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;
運行->完美

 

 注：彈出框周圍要有陰影部分，否則說明用錯組件了

最后：感謝可愛小仙革的細心指導