Vue Configurable Dialog

🚀 一个高度可配置的 Vue 3 对话框/模态框组件，支持丰富的自定义选项、动画效果和响应式设计。

✨ 特性

• 🎨 高度可定制 - 主题、布局、动画全面可配置
• 🎭 多种动画 - 淡入淡出、滑动、缩放等动画效果
• 📱 响应式设计 - 完美适配移动端和桌面端
• 🎯 灵活配置 - 尺寸、位置、按钮主题等全面配置
• ⚡ TypeScript 支持 - 完整的类型定义
• 🎪 丰富功能 - 加载状态、禁用状态、ESC关闭等
• 🔒 安全可靠 - 支持锁定背景滚动、点击遮罩关闭控制

📦 安装

npm install vue-configurable-dialog

🚀 快速开始

基本使用

<template>
  <div>
    <button @click="showDialog = true">打开对话框</button>
    <ConfigurableDialog
      v-model:visible="showDialog"
      title="提示"
      content="这是一个对话框示例"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ConfigurableDialog } from 'vue-configurable-dialog';
import 'vue-configurable-dialog/dist/style.css';

const showDialog = ref(false);

const handleConfirm = () => {
  console.log('确认');
  showDialog.value = false;
};

const handleCancel = () => {
  console.log('取消');
};
</script>

使用 Slot 自定义内容

<template>
  <ConfigurableDialog
    v-model:visible="showDialog"
    title="自定义内容"
    @confirm="handleConfirm"
  >
    <div>
      <p>这是使用slot自定义的内容</p>
      <input v-model="inputValue" placeholder="输入内容" />
    </div>
  </ConfigurableDialog>
</template>

危险操作对话框

<template>
  <ConfigurableDialog
    v-model:visible="showDialog"
    title="确认删除"
    content="确定要删除这个项目吗？此操作不可撤销。"
    confirm-button-theme="danger"
    confirm-text="删除"
    @confirm="handleDelete"
  />
</template>

加载状态对话框

<template>
  <ConfigurableDialog
    v-model:visible="showDialog"
    title="提交中"
    content="正在提交您的数据，请稍候..."
    :confirm-loading="isSubmitting"
    :confirm-disabled="isSubmitting"
    @confirm="handleSubmit"
  />
</template>

<script setup>
const isSubmitting = ref(false);

const handleSubmit = async () => {
  isSubmitting.value = true;
  // 执行异步操作
  await submitData();
  isSubmitting.value = false;
  showDialog.value = false;
};
</script>

📚 API 文档

Props

必需属性

| 属性 | 类型 | 描述 | | -------- | --------- | -------------- | | visible | boolean | 是否显示（v-model:visible） | | title | string | 对话框标题 |

可选属性

| 属性 | 类型 | 默认值 | 描述 | | ------------------- | --------------------------- | ----------- | -------------------- | | content | string | '' | 对话框内容（HTML） | | confirmText | string | '确定' | 确认按钮文字 | | cancelText | string | '取消' | 取消按钮文字 | | showCancel | boolean | true | 是否显示取消按钮 | | confirmLoading | boolean | false | 确认按钮加载状态 | | confirmDisabled | boolean | false | 确认按钮禁用状态 | | closeOnOverlay | boolean | true | 点击遮罩是否关闭 | | closeOnEsc | boolean | true | 按ESC是否关闭 | | showClose | boolean | true | 是否显示关闭按钮 | | confirmButtonTheme| ButtonTheme | 'primary' | 确认按钮主题 | | size | DialogSize | 'medium' | 对话框尺寸 | | position | DialogPosition | 'center' | 对话框位置 | | theme | Partial<DialogTheme> | - | 主题配置 | | layout | Partial<LayoutConfig> | - | 布局配置 | | animation | Partial<AnimationConfig> | - | 动画配置 | | responsive | Partial<ResponsiveConfig> | - | 响应式配置 | | loadingText | string | '处理中...' | 加载文字 | | scrollable | boolean | false | 内容是否可滚动 | | lockScroll | boolean | true | 是否锁定背景滚动 |

类型定义

ButtonTheme

type ButtonTheme = 'primary' | 'danger' | 'success' | 'warning';

DialogSize

type DialogSize = 'small' | 'medium' | 'large' | 'fullscreen';

DialogPosition

type DialogPosition = 'center' | 'top' | 'bottom' | 'left' | 'right';

AnimationType

type AnimationType = 'fade' | 'slide' | 'zoom' | 'none';

DialogTheme

interface DialogTheme {
  overlayColor: string;           // 遮罩层颜色
  overlayOpacity: number;         // 遮罩层透明度
  backgroundColor: string;        // 对话框背景色
  titleColor: string;             // 标题颜色
  contentColor: string;           // 内容文字颜色
  primaryButtonBg: string;        // 主按钮背景色
  primaryButtonText: string;      // 主按钮文字颜色
  primaryButtonHoverBg: string;   // 主按钮悬浮背景色
  dangerButtonBg: string;         // 危险按钮背景色
  dangerButtonText: string;       // 危险按钮文字颜色
  dangerButtonHoverBg: string;   // 危险按钮悬浮背景色
  cancelButtonText: string;       // 取消按钮文字颜色
  cancelButtonHoverBg: string;   // 取消按钮悬浮背景色
  closeButtonColor: string;       // 关闭按钮颜色
  closeButtonHoverColor: string; // 关闭按钮悬浮颜色
  boxShadow: string;              // 阴影
}

事件

| 事件名 | 参数 | 描述 | | ----------------- | ----------------- | -------------------- | | update:visible | [value: boolean] | 显示状态更新 | | confirm | [] | 确认按钮点击 | | cancel | [] | 取消按钮点击 | | close | [] | 对话框关闭 | | opened | [] | 对话框打开后触发 | | closed | [] | 对话框关闭后触发 |

🎨 主题定制

自定义主题示例

<template>
  <ConfigurableDialog
    v-model:visible="showDialog"
    title="自定义主题"
    :theme="customTheme"
  />
</template>

<script setup>
const customTheme = {
  primaryButtonBg: '#10b981',
  primaryButtonText: '#ffffff',
  primaryButtonHoverBg: '#059669',
  overlayOpacity: 0.6,
  backgroundColor: '#f8fafc',
};
</script>

自定义尺寸

<ConfigurableDialog
  v-model:visible="showDialog"
  title="大尺寸对话框"
  size="large"
/>

自定义动画

<ConfigurableDialog
  v-model:visible="showDialog"
  title="缩放动画"
  :animation="{ type: 'zoom', duration: '0.4s' }"
/>

📖 更多示例

不同尺寸

<!-- 小尺寸 -->
<ConfigurableDialog size="small" />

<!-- 中等尺寸（默认） -->
<ConfigurableDialog size="medium" />

<!-- 大尺寸 -->
<ConfigurableDialog size="large" />

<!-- 全屏 -->
<ConfigurableDialog size="fullscreen" />

不同位置

<!-- 居中（默认） -->
<ConfigurableDialog position="center" />

<!-- 顶部 -->
<ConfigurableDialog position="top" />

<!-- 底部 -->
<ConfigurableDialog position="bottom" />

禁用点击遮罩关闭

<ConfigurableDialog
  v-model:visible="showDialog"
  :close-on-overlay="false"
/>

🛠️ 开发

# 克隆项目
git clone https://github.com/skillharbor/vue-configurable-dialog.git

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build:lib

# 类型检查
npm run type-check

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

🔗 链接

• GitHub
• npm

Made with ❤️ by SkillHarbor