一、DeleteButton、index.vue

<template>
  <el-button v-bind="$attrs" @click="handleClick">
    <slot />
  </el-button>
</template>
<script>
export default {
  name: "DeleteButton",
  props: {
    autoConfirm: { type: Boolean, default: true },
    confirmConfig: { type: Object, default: () => ({}) },
  },
  methods: {
    handleClick() {
      if (this.autoConfirm) {
        const {
          message = "此操作将永久删除该数据, 是否继续?",
          title = "提示",
          confirmButtonText = "确定",
          cancelButtonText = "取消",
          type = "warning",
        } = this.confirmConfig;
        this.$confirm(message, title, {
          confirmButtonText,
          cancelButtonText,
          type,
        })
          .then(() => {
            this.$emit("confirm");
          })
          .catch(() => {
            this.$emit("cancel");
          });
      } else {
        this.$emit("click");
      }
    },
  },
};
</script>

二、全局注册

import DeleteButton from "./components/ButtonWrapper/DeleteButton";

Vue.component(DeleteButton.name, DeleteButton)

三、使用

    <DeleteButton @confirm="handleConfirm">删除自动二次确认</DeleteButton>
    
    
    handleConfirm() {
      console.log("执行");
    },

四、效果