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();
        }
      }
    });
  };
};
相关推荐
qczg_wxg20 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz21 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码1 天前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v1 天前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山1 天前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin1 天前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip1 天前
结合Worker通知应用更新
前端·javascript
叶玳言1 天前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳1 天前
HTML 基本结构
前端
Gazer_S1 天前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js