封装dialog 确认弹窗

在项目中经常出现需要确认弹框的地方 由于样式都是根据ui确认 不方便基于组件更改 于是自己写了一套

import Vue from 'vue'
import Deletelog from "@/components/deletelog.vue"; 

const JSDeletelog = Vue.extend(Deletelog)

/** JS 调用删除对话提示框 */
export function useDeleteLog(message, confirmCallBack, propsData = {}) {

  function destroy() {
    instance.$destroy()
    instance.$el.remove();
  }

  const instance = new JSDeletelog({
    propsData: {
      isVisible: true,
      content: message,
      ...propsData
    },
    mounted() {
      this.$once('queryDelete', () => {
        confirmCallBack?.()
        destroy()
      })
      this.$once('cancelDelte', () => {
        destroy()
      })
    }
  })

  instance.$mount()

  document.body.appendChild(instance.$el)
}

下面是vue页面

<template>
  <FullScreenDialog
    width="560px"
    height="200px"
    :visible.sync="isVisible"
    class="deleteVisible"
    style="margin-top: 20vh"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="dialogContent">
      <div class="df">
        <img src="../assets/img/delete.png" alt="" />
        <div class="right">
          <div style="font-size: 20px; color: #3a3b40; margin-top: 27px">
            {{ content }}
          </div>
        </div>
      </div>
      <div class="df" style="margin-top: 30px">
        <div
          class="saveBtn"
          style="margin-left: 300px"
          v-loading="loading"
          element-loading-spinner="el-icon-loading"
          @click="queryDelete()"
        >
          {{ confirmButtonText }}
        </div>
        <div class="cancelBtn" style="margin-left: 8px" @click="cancelDelte()">
          {{ cancelButtonText }}
        </div>
      </div>
    </div>
  </FullScreenDialog>
</template>

<script>
export default {
  name: "deletelog",
  props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
    content: {
      type: String,
      default: "数据",
    },
    loading: {
      type: Boolean,
      default: false,
    },
    confirmButtonText: {
      type: String,
      default: "确定",
    },
    cancelButtonText: {
      type: String,
      default: "取消",
    },
  },
  data() {
    return {};
  },
  methods: {
    queryDelete() {
      this.$emit("queryDelete");
    },
    cancelDelte() {
      this.$emit("cancelDelte");
    },
  },
};
</script>

<style scoped lang="scss">
.deleteVisible ::v-deep .el-dialog__headerbtn > i {
  display: none;
}
.dialogContent {
  padding: 30px;
  img {
    margin-right: 30px;
    object-fit: contain;
  }
  .right {
    padding-top: 10px;

    div {
      margin-bottom: 15px;
      line-height: 24px;
    }
  }
}
</style>

下面是在项目中使用

const func = () => {
}
const message = '确定删除该列吗?'
useDeleteLog(message, func);