Element Plus封装选择数据弹窗技巧

在Vue3项目中,我们使用了Element Plus的ElMessageBox组件来实现一个自定义的选择弹窗。这个弹窗可以集成任何自定义组件并提供数据选择功能,适用于多选或单选的场景。以下是该功能的核心设计思路和实现流程:

功能介绍

该功能的目标是动态创建一个选择弹窗,用户可以通过自定义组件进行数据选择。弹窗中展示的组件必须暴露一个名为getSelectionData的方法,用于返回用户选中的数 据。通过传递参数,开发者可以灵活地控制弹窗的行为和数据传递。

主要功能点

参数传递:

title: 弹窗的标题,默认为传入的title或options.title。 component: 要展示的自定义组件。 componentProps: 可选的组件属性,通过此属性可以传递给自定义组件。 tip: 可选提示,用于提醒用户在提交前进行数据选择。

弹窗配置:

multiple: 是否支持多选,默认单选。 queryParams: 查询参数,提供给自定义组件使用。 onOk: 提交回调,选择的数据将传递给此回调函数。 onBeforeOk: 提交前的钩子函数,可以进行数据验证,返回true表示通过验证。

弹窗行为:

弹窗内的组件通过ref引用绑定,便于获取选中的数据。 用户确认选择后,会检查是否有选择数据,如果没有,则显示提示消息(ElMessage.warning)。 提交前,如果存在onBeforeOk回调函数,将会异步执行并判断是否可以提交。如果没有该回调,直接调用onOk。 弹窗可以显示加载状态,防止用户多次点击确认。

自定义组件要求:

被引用的组件需要暴露一个getSelectionData方法,用于获取用户选择的数据。

封装代码

定义组件

使用

类型提示

源码

ts 复制代码
import { ElMessage, ElMessageBox } from 'element-plus';

type CreateSelectDialogParams = {
  title: string;
  component: any;
  componentProps?: Record<string, any>;
  tip?: string;
};

type DialogOption<T> = {
  title?: string;
  multiple?: boolean; // 多选单选
  queryParams?: Record<string, any>; // 查询参数
  onOk?: (data: T) => void;
  onBeforeOk?: (data: T) => Promise<boolean>;
};

/**
 * 创建选择弹窗
 * @description component组件必须暴露一个getSelectionData方法
 */
export const createSelectDialog = <T>(params: CreateSelectDialogParams) => {
  return function (options: DialogOption<T>) {
    const { multiple = false, onOk, onBeforeOk, queryParams } = options;
    const DialogTableRef = ref<any>();
    ElMessageBox({
      title: params.title || options.title,
      message: () =>
        h(params.component, {
          ref: (e: any) => (DialogTableRef.value = e),
          multiple: multiple,
          queryParams: queryParams,
          ...params.componentProps
        }),
      showCancelButton: true,
      customStyle: { maxWidth: '1000px' },
      beforeClose: async (action, instance, done) => {
        if (action === 'confirm') {
          const data = DialogTableRef.value?.getSelectionData();
          if (!data.length) {
            return ElMessage.warning(params.tip || '请选择数据');
          }
          if (onBeforeOk) {
            try {
              instance.confirmButtonLoading = true;
              const flag = await onBeforeOk(data);
              if (flag) {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }
            } catch (error) {
              instance.confirmButtonLoading = false;
            }
          } else {
            onOk?.(data);
            done();
          }
        } else {
          done();
        }
      }
    });
  };
};
相关推荐
闭着眼睛学算法4 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴4 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.5 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰5 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息5 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
BTU_YC5 小时前
FastAPI+Vue前后端分离架构指南
vue.js·架构·fastapi
卷Java5 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
北城以北88885 小时前
JavaScript--基础ES(一)
开发语言·javascript·intellij-idea
gihigo19986 小时前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos
珍宝商店6 小时前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript