使用elementUI封装公共弹框

1.先在component里面创建公共弹框

<template>
      <div>
      <el-dialog :show-close="false" :title="title" class="fw600" style="border-radius: 10px;margin-top: 100px;" :visible.sync="centerDialogVisible" width="412px" center>
      <div class="text f14" ><slot></slot></div>
      <div class="df" style="flex-direction: row-reverse">
      <div class="dCenter btn mouse" 
          @click="affirm"
          style="margin-left: 20px;background-color:#E33F57 ;color: #ffffff;border: none;">确认</div>
      <div class="dCenter btn mouse" @click="cancel">取消</div>
      </div>
      </el-dialog>
      </div>
</template>

  <script>
export default {
  name: 'XitongPopup',
  props:['dialog','title'],
  data() {
    return {
      centerDialogVisible:this.dialog
    };
  },

  mounted() {

  },
  watch:{
    // 监听父组件数据,触发改变事件,不能直接改变
    dialog(){
      this.centerDialogVisible=!this.centerDialogVisible
    }  
  },
  methods: {
    // 确定 点击时触发父组件里面的事件
    affirm(){
      this.$emit('affirm');
    },
    // 取消
    cancel(){
      this.$emit('cancel',false);
      //this.centerDialogVisible = false
    }
  },
};
</script>

  <style lang="scss" scoped>
  .text{
    color: #4D4D4D;
    margin: 0 0 30px 0;
    font-weight: 400 !important;
    line-height: 20px;
}
.btn{
  width: 100px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid #1A1A1A;
}
</style>

2.在mian.js中全局注册弹框组件

import Popup from '@/components/popup'
Vue.component('Popup', Popup)

3.直接在界面中引用

 <Popup :dialog="dialog" @cancel="n=>{dialog=n}" title="删除确认"  @affirm="affirm">
      <span>是否确认删除，<span class="fb">{{itemName}}</span> 自己定义</span>
</Popup>

 注意: 里面的样式可以自己使用插槽更改