@corgicoding-el/custom-dialog

为 @corgicoding/web-quick-start 工程模板设定的弹出组件，基于 el-dialog 封装。主要为快速绑定用户习惯，并添加国际化支持

绑定依赖

无

如何使用

安装工程到本地，并按需使用或全局使用

前置依赖

• element-plus
• vue-i18n
• vue (3.x)

如果没有以上依赖，工程执行以下命令进行安装

pnpm install element-plus vue vue-i18n -S

如果使用 web-quick-start 模板则无需任何操作，上述依赖已经在模板安装

{
  "peerDependencies": {
    "element-plus": "^2.7.2",
    "vue-i18n": "^9.7.1",
    "vue": "^3.4.25"
  }
}

安装

使用 pnpm 下载

pnpm install @corgicoding-el/custom-dialog -S

特性

区别与默认的 el-dialog，有以下举动：

1. 默认将弹窗插入 body 区域
2. 默认关闭锁定滚动
3. 自定义弹窗标题和底部
4. 配置默认的提交和取消按钮
5. 全局的配置支持
6. 配合系统的国际化支持

使用

props入参

参数定义

import type { DialogEmits, DialogProps } from 'element-plus';

/**
 * @description 弹窗入参
 */
export type CustomDialogProps = {
  modelValue: boolean; // 弹窗显示控制
  title?: string; // 标题
  destroyOnClose?: boolean; // 关闭时销毁
  confirmText?: string; // 确认按钮文本
  cancelText?: string; // 取消按钮文本
  loading?: boolean; // 加载
  width?: number; // 宽度
  disabled?: boolean; // 禁用确认按钮
  showFooter?: boolean; // 是否有底部
  showClose?: boolean;
  noPadding?: boolean; // 无边距模式
  draggable?: boolean; // 可拖拽
  closeOnClickModal?: boolean; // 点击外部关闭弹窗
  ignoreGlobal?: boolean; // 忽略全局弹窗的穿透
  componentOptions?: DialogProps; // el-dialog 默认props
  eventOptions?: DialogEmits; // el-dialog 默认emits
};

默认参数

const props = withDefaults(defineProps<CustomDialogProps>(), {
  modelValue: true,
  title: undefined,
  destroyOnClose: true,
  confirmText: undefined,
  cancelText: undefined,
  loading: false,
  width: 700,
  disabled: false,
  showFooter: true,
  showClose: true,
  noPadding: false,
  draggable: true,
  closeOnClickModal: false,
  componentOptions: () => ({}) as any,
  eventOptions: () => ({}) as any
});

emits 事件

// 触发方法返给上一级
const Emits = defineEmits([
  'update:modelValue', // 弹窗显示控制
  'confirm', // 提交按钮触发
  'cancel' // 取消按钮触发
]);

暴露参数

defineExpose({
  /**
   * @description el-dialog挂载ref
   */
  elRef: dialogRef
});

按需使用

较为完整的案例如下

<script setup lang="ts">
import CustomDialog from '@corgicoding-el/custom-dialog';
// 若使用全局则可以不引入 （ 按需引入则为必引 ）
import '@corgicoding-el/custom-dialog/style.css';

const showModal = ref(false);
const execSuccess = () => {
  ElMessage.success('提交成功');
};
const closeModal = () => {
  ElMessage.info('操作取消');
  showModal.value = false;
};
</script>

<template>
  <CustomDialog
    v-model="showModal"
    :width="500"
    title="测试弹窗标题"
    ignore-global
    @confirm="execSuccess"
    @cancel="closeModal"
  >
    <div>这里是你弹窗的内容</div>
  </CustomDialog>
</template>

全局引入

在 main.ts 引入

import CustomDialog from '@corgicoding-el/custom-dialog';

app.use(CustomDialog);

原生 element-plus 使用

文档： https://element-plus.org/zh-CN/component/dialog.html#api

• 所有 element-plus 的 dialog 参数属性直接直接绑定 componentOptions 上
• 所有 element-plus 的 dialog 事件可以通用 eventOptions 进行绑定

<CustomDialog
  v-model="showModal"
  :width="500"
  title="测试弹窗标题"
  ignore-global
  :component-options="{
    draggable: false
  }"
  @confirm="execSuccess"
  @cancel="closeModal"
>
  <div>
    这里是你弹窗的内容
  </div>
</CustomDialog>

全局配置穿透

使用 app.provide 注射进子页面，例如在 App.vue 有这样定义的一段代码

// App.vue

provide('system-configs', preferenceStore.systemConfigs);

其中 preferenceStore.systemConfigs 定义为

/**
 * @description 弹窗和表格设计
 */
const systemConfigs = useStorage(
  SYSTEM_CONFIGS,
  {
    table: {
      border: false,
      stripe: true,
      size: 'default'
    },
    dialog: {
      draggable: false, // 可拖拽？
      closeOnClickModal: true // 是否点击modal关闭
    }
  },
  localStorage,
  {
    serializer: StorageSerializers.object
  }
);

通过修改 systemConfigs.dialog 内的 draggable 和 closeOnClickModal 即可全局影响 ignoreGlobal 不为 true 的弹窗。

国际化支持

修改 vue-i18n 的语言能自动影响弹窗的取消和提交的显示。