1、二次确认弹窗组件reconfirm.vue

<template>
  <el-dialog :visible="dialogFlag"  @close="closeDialog()" width="420px" class="myz-info-reconfirm">
    <div slot="title" class="title-reconfirm">
      <span>{{title}}</span>
      <span class="warn-red" v-if="deleteAdmin">({{redWarnMessage}})</span>
    </div>
    <div class="body_message">
      <span class="warn-img"></span>
      {{warnMessage}}
    </div>
    <span slot="footer" class="clearfix">
      <span class="check-exact"  v-if="deleteAdmin">
        <el-checkbox v-model="checked">我已了解</el-checkbox>
      </span>
      <span class="check-btn">
        <el-button type="primary" :disabled="!checked && deleteAdmin" @click="exact()">确定</el-button>
        <el-button  @click="closeDialog">取消</el-button>
      </span>
    </span>
  </el-dialog>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import eventBus from '@/components/busTag' // 引入公共的bus，来做为中间传达的工具
export default {
  props: {
    title: {
      type: String,
      default: '提示'
    },
    warnMessage: {
      type: String
    },
    redWarnMessage: {
      type: String,
      default: ''
    },
    deleteInfo: { // 删除信息
      type: Object,
      default: () => {}
    }
  },
  components: {
  },
  data () {
    return {
      deleteAdmin: false,
      dialogFlag: false,
      checked: false
    }
  },
  computed: {
    ...mapState(['reConfirm'])
  },
  watch: {
    reConfirm (newVal) {
      this.dialogFlag = newVal
    }
  },
  created () {
  },
  mounted () {
    //删除后初始化条件
    eventBus.$on('deleteHandleSuccess', () => {
      this.checked = false
      this.deleteAdmin = false
    })
  },
  methods: {
    ...mapActions(['updateReconfirm']),
    closeDialog: function () {
      this.checked = false
      this.deleteAdmin = false
      this.updateReconfirm(false)
    },
    exact () {
      if (this.deleteInfo.adminUser && this.checked === false) {
        this.deleteAdmin = true
      } else {
        this.$emit('deleteHandle')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .title-reconfirm{
    font-size: 18px;
  }
  .check-exact{
    float: left;
  }
  .check-btn{
    float: right;
  }
  .warn-red{
    font-size: 12px;
    color:red;
  }
  .body_message{
    padding-bottom: 30px;
    padding-left: 10px;
  }
  .warn-img{
    padding-right: 30px;
    display: inline-block;
    width: 25px;
    height:25px;
    background: url("/static/icon/common-icon/warning.png") no-repeat;
    border: none;
    background-size: 25px 25px;
    vertical-align: middle;
  }
</style>
<style lang="scss">
  .el-checkbox__inner{
    border: 1px solid #909399;
  }
  .myz-info-reconfirm div.el-dialog__footer{
    border:none;
    text-align: right;
    height: 50px;
    padding: 6px 0;
  }
  .myz-info-reconfirm div.el-dialog__header{
    border:none;
    padding: 6px 0;
  }
  .myz-info-reconfirm div.el-dialog__body{
    padding: 20px;
  }
  .myz-info-reconfirm div.el-dialog{
    margin-top: 35vh !important;
  }
/*清除浮动-start*/

.clearfix {
  *zoom: 1;
}
.clearfix:before,.clearfix:after {
  display: block;
  overflow: hidden;
  clear: both;
  height: 0;
  visibility: hidden;
  content: ".";
}

/*清除浮动-end*/
</style>

2、引用二次弹窗组件

<template>
  <div>
    <reconfirm @deleteHandle="deleteHandle" :warnMessage="'确定删除提示'" :deleteInfo="deleteLabelInfo" :redWarnMessage="'二次提示信息'"></reconfirm>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import Reconfirm from '@/components/Reconfirm'
export default {
  components: {
    Reconfirm
  },
  data () {
    return {
      deleteLabelInfo: {}
    }
  },
  watch: {
  },
  mounted () {
  },
  computed: {
  },
  methods: {
    ...mapActions(['updateReconfirm']),
    deleteHandle () {
       //处理删除逻辑
    },
    deleteAppLabel () {
      //显示二次提示条件adminUser
      this.deleteLabelInfo.adminUser = (this.TeamLabelTeams.length > 0)
      //显示二次提示弹窗
      this.updateReconfirm(true)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>