poohou-open-modal-vue

一个方便使用的 Vue 3 弹窗构建方法，支持拖拽、缩放、全屏等功能。

特性

• 🚀 简单易用的 API 设计
• 🎨 支持自定义内容和样式
• 📦 支持拖拽和缩放
• 🔒 支持遮罩层和 ESC 键关闭
• 🎯 支持多弹窗管理
• 💪 完整的 TypeScript 支持
• ⚡️ 基于 Vue 3 Composition API

安装

# npm
npm install poohou-open-modal-vue

# pnpm
pnpm add poohou-open-modal-vue

# yarn
yarn add poohou-open-modal-vue

基础使用

import { openModal } from 'poohou-open-modal-vue'
import { h } from 'vue'
import YourComponent from './YourComponent.vue'

// 方式1: 使用渲染函数
const modal = openModal({
  title: '弹窗标题',
  content: (h) => h(YourComponent, {
    // 传递给组件的 props
    someProp: 'value'
  }),
  width: 600,
  height: 400,
  onOk: async () => {
    // 确认按钮回调
    console.log('确认')
  },
  onCancel: async () => {
    // 取消按钮回调
    console.log('取消')
  }
})

// 方式2: 直接传递 VNode
const modal2 = openModal({
  title: '弹窗标题',
  content: h(YourComponent, { someProp: 'value' }),
  width: 600,
  height: 400
})

// 方式3: 传递字符串或数字
const modal3 = openModal({
  title: '提示',
  content: '这是弹窗内容',
  width: 400,
  height: 200
})

// 手动关闭弹窗
modal.close()

// 动态更新弹窗属性
modal.setProps({
  title: '新标题'
})

API

openModal(props)

打开一个弹窗，返回弹窗实例。

Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | title | 弹窗标题 | string \| VNode \| (h) => VNode | '标题' | | content | 弹窗内容 | string \| number \| VNode \| (h) => VNode | - | | mode | 弹窗类型 | 'modal' \| 'drawer' | 'modal' | | width | 弹窗宽度 | number \| string | 300 | | height | 弹窗高度 | number \| string | 300 | | mask | 是否显示遮罩层 | boolean | true | | escClose | 是否支持 ESC 键关闭 | boolean | true | | isResize | 是否支持缩放 | boolean | true | | isFullScreen | 打开时默认全屏 | boolean | false | | zIndex | 弹窗层级 | number | 999 | | loading | 面板界面加载状态 | boolean | false | | placement | 抽屉位置（仅 drawer 模式） | 'top' \| 'right' \| 'bottom' \| 'left' | - | | footer | 底部按钮配置 | FooterConfig | 见下方 | | resizeOptions | 拖动窗口大小选项 | IResizeElementOptions | 见下方 | | onOk | 确认按钮回调 | () => void \| Promise<void> | - | | onCancel | 取消按钮回调 | () => void \| Promise<void> | - | | onOpenChange | 弹窗打开/关闭状态变化回调 | (open: boolean) => void | - | | getContainer | 指定弹窗挂载的 HTML 节点 | () => HTMLElement | () => document.body | | appContext | Vue App 实例上下文 | ComponentInternalInstance['appContext'] | - |

FooterConfig

{
  ok: {
    show: boolean,      // 是否显示确认按钮，默认 true
    text: string,       // 按钮文字，默认 '确认'
    loading: boolean    // 按钮加载状态
  },
  cancel: {
    show: boolean,      // 是否显示取消按钮，默认 true
    text: string,       // 按钮文字，默认 '取消'
    loading: boolean    // 按钮加载状态
  }
}

返回值

{
  close: (key?: string) => void,           // 关闭弹窗
  setProps: (props: OpenModalProps) => void // 更新弹窗属性
}

setOpenModalDefaultProps(props)

设置全局默认配置。

import { setOpenModalDefaultProps } from 'poohou-open-modal-vue'

setOpenModalDefaultProps({
  width: 800,
  height: 600,
  footer: {
    ok: {
      text: 'OK'
    },
    cancel: {
      text: 'Cancel'
    }
  }
})

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm run serve

# 构建库
pnpm run build

# 发布版本
pnpm run release-tag

技术栈

• Vue 3
• TypeScript
• Vite
• Less
• ESLint
• Husky

注意事项

项目使用了 Husky 进行 Git 提交验证，如果提交失败，请注意：

1. 提交描述格式：需要符合 Conventional Commits 规范

   • 示例：feat: 新增拖拽功能（注意冒号后面有一个空格）
   • 类型：feat、fix、docs、style、refactor、test、build、chore 等

2. ESLint 验证：确保代码通过 ESLint 检查，可以运行 eslint --fix 自动修复

License

ISC

仓库

https://github.com/cdxxiaomao/open-modal-vue