基于 ElementPlus 二次封装的 删除组件

基于 elementPlus 二次封装的 删除组件

<template>
  <div v-if="deleteVisible">
    <!-- 删除弹窗 -->
    <el-dialog
      :model-value="deleteVisible"
      title="提示"
      width="500"
      :close-on-click-modal="false"
      :before-close="deleteClose"
    >
      <div style="display: flex; align-items: center">
        <el-icon style="width: 25px"><WarningFilled style="color: #e6a23d; width: 50px; height: 20px" /></el-icon>
        {{ deleteContent }}
        <span style="font-weight: 600">【{{ deleteContentTitle }}】 </span>吗？
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="isLoading" type="primary" @click="deleteOk"> 
             {{ submitTitle }}
          </el-button>
          <el-button :loading="isLoading" type="shape" class="close" @click="deleteClose">
            {{ closeTitle }}
          </el-button>
          
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, withDefaults } from "vue";
import { WarningFilled } from "@element-plus/icons-vue";
import { ElIcon, ElDialog, ElButton } from "element-plus";

/**
 * 删除确认对话框组件
 *
 * @displayName DeleteConfirmDialog 删除确认对话框
 * @version 1.0.0
 *
 * @example 基本用法
 * <DeleteConfirmDialog
 *   v-model:deleteVisible="showDialog"
 *   deleteContentTitle="用户数据"
 *   :deleteApi="deleteUserApi"
 *   :deleteId="selectedUserId"
 *   @confirm="handleDeleteSuccess"
 * />
 */
interface Props {
  /**
   * 对话框标题
   * @default "提示"
   */
  title?: string;

  /**
   * 控制对话框显示/隐藏
   * @model
   * @required
   */
  deleteVisible: boolean;

  /**
   * 要删除的项目ID
   * @required
   */
  deleteId: string | number;

  /**
   * 删除确认内容前缀
   * @default "确认要删除"
   */
  deleteContent?: string;

  /**
   * 要删除的项目名称
   * @default "名称"
   */
  deleteContentTitle?: string;

  /**
   * 确认按钮文字
   * @default "确认"
   */
  submitTitle?: string;

  /**
   * 取消按钮文字
   * @default "取消"
   */
  closeTitle?: string;

  /**
   * 删除API函数
   * @type {function}
   * @param {Object} params - 参数对象
   * @param {string|number} params.id - 删除项ID
   * @returns {Promise} 返回Promise
   * @required
   */
  deleteApi: (params: { id: string | number }) => Promise<any>;
}

const props = withDefaults(defineProps<Props>(), {
  title: "提示",
  deleteContent: "确认要删除",
  deleteContentTitle: "名称",
  submitTitle: "确认",
  closeTitle: "取消",
});

/**
 * @event {function} update:deleteVisible - 对话框关闭时触发 (用于v-model同步)
 * @event {function} close - 用户点击取消或关闭按钮时触发
 * @event {function} confirm - 用户点击确认按钮时触发
 * @returns
 */
const $emit = defineEmits(["update:deleteVisible", "close", "confirm"]);

/**
 * 按钮的加载状态
 */
const isLoading = ref<boolean>(false);

/**
 * 处理确认删除操作
 * @async
 * @description 调用删除API并在成功后触发confirm事件
 * @returns {Promise<void>}
 */
const deleteOk = async () => {
  isLoading.value = true;
  try {
    const data = await props.deleteApi({ id: props.deleteId });
    $emit("confirm");
    $emit("update:deleteVisible", false);
  } catch (error) {
    console.log("error ::>>", error);
  } finally {
    isLoading.value = false;
  }
};

/**
 * 处理对话框关闭操作
 * @description 触发关闭事件并重置加载状态
 */
const deleteClose = () => {
  $emit("update:deleteVisible", false);
  $emit("close");
  isLoading.value = false;
};
</script>
<style lang="scss" scoped>
:deep(.el-dialog__title) {
  font-weight: 500;
}
.close {
  margin-left: 20px;
}
</style>

使用

 <DeleteTip
    :delete-api="deleteAPI"
    :delete-content="'确认删除策略'"
    :delete-content-title="策略名称"
    :delete-id="1"
    v-model:delete-visible="deleteVisible"
    @confirm="submitDelete"
  />
// ------------------------------------------- delete dialog start ------------------------------------------------

//  删除 开关
const deleteVisible = ref<boolean>(false);

// 删除的行内容
const deleteContent = ref<any>("");

// 确认删除
const submitDelete = () => {
  ElMessage.success("已删除");
  deleteClose();
};
// 取消删除
const deleteClose = () => {
  deleteVisible.value = false;
  deleteContent.value = "";
};
// ------------------------------------------- delete dialog end ------------------------------------------------