ZanLayer

一个功能完整的 Vue 3 弹层组件库，基于 layui-vue layer 架构开发。

✨ 特性

• 🎯 7种弹窗类型 - Dialog、Page、Iframe、Loading、Drawer、Photos、Notify、Prompt
• 🎨 6种动画效果 - 缩放、掉落、飞入、旋转、渐显、抖动
• 🖱️ 拖拽和调整 - 支持拖拽移动和右下角拉伸调整大小
• 📐 最大化/最小化 - 完整的窗口控制功能
• 🎭 图标系统 - 7种内置图标（成功、失败、警告、信息等）
• 🔔 通知消息 - 4个位置（右上、右下、左上、左下）
• 🖼️ 图片预览 - 支持单图和相册模式
• ⌨️ 输入层 - 支持文本、密码、文本域输入
• 🎛️ 完整API - open、close、msg、confirm、load、drawer、notify、photos、prompt

📦 安装

npm install @zan-ui/layer

🚀 快速开始

全局注册

import { createApp } from 'vue'
import ZanLayer from '@zan-ui/layer'
import '@zan-ui/layer/dist/style.css'

const app = createApp(App)
app.use(ZanLayer)
app.mount('#app')

基础使用

import { zanLayer } from '@zan-ui/layer'

// 消息提示
zanLayer.msg('操作成功', { icon: 1, time: 2000 })

// 确认框
zanLayer.confirm('确定要删除吗？', {
  yes: (id) => {
    console.log('确认')
    zanLayer.close(id)
  }
})

// 加载动画
const loadId = zanLayer.load(0, { time: 3000 })

// 打开弹层
zanLayer.open({
  type: 1,
  title: '标题',
  content: '内容',
  area: ['500px', '400px']
})

// 抽屉
zanLayer.drawer({
  title: '抽屉',
  content: '内容',
  offset: 'r' // 右侧
})

// 通知
zanLayer.notify({
  title: '通知标题',
  content: '通知内容',
  icon: 1,
  offset: 'rt' // 右上角
})

// 图片预览
zanLayer.photos({
  imgList: [
    { src: 'image1.jpg', alt: '图片1' },
    { src: 'image2.jpg', alt: '图片2' }
  ]
})

// 输入层
zanLayer.prompt({
  title: '请输入',
  formType: 'text',
  yes: (id, value) => {
    console.log('输入值：', value)
    zanLayer.close(id)
  }
})

📖 API

基础方法

| 方法 | 说明 | 参数 | |------|------|------| | open(options) | 打开弹层 | LayerProps | | close(id) | 关闭指定弹层 | string | | closeAll() | 关闭所有弹层 | - | | msg(message, options) | 消息提示 | string, LayerProps | | confirm(message, options) | 确认框 | string, LayerProps | | load(type, options) | 加载动画 | number, LayerProps | | drawer(options) | 抽屉 | LayerProps | | notify(options) | 通知 | LayerProps | | photos(options) | 图片预览 | LayerProps | | prompt(options) | 输入层 | LayerProps |

控制方法

| 方法 | 说明 | 参数 | |------|------|------| | reset(id) | 重置位置 | string | | min(id) | 最小化 | string | | full(id) | 最大化 | string | | revert(id) | 复原 | string |

LayerProps

| 属性 | 说明 | 类型 | 默认值 | |------|------|------|--------| | type | 弹层类型 | 0-7 / 'dialog' / 'page' / 'iframe' / 'loading' / 'drawer' / 'photos' / 'notify' / 'prompt' | 1 | | title | 标题 | string / VNode / boolean | '标题' | | content | 内容 | string / VNode | - | | area | 宽高 | string / string[] | 'auto' | | offset | 位置 | string / string[] | 'auto' | | shade | 显示遮罩 | boolean | true | | shadeClose | 点击遮罩关闭 | boolean | true | | shadeOpacity | 遮罩透明度 | string | '0.1' | | move | 允许拖拽 | boolean | true | | resize | 允许调整大小 | boolean | false | | maxmin | 显示最大化/最小化按钮 | boolean | false | | closeBtn | 显示关闭按钮 | boolean / string | '1' | | btn | 自定义按钮 | BtnType[] | - | | btnAlign | 按钮对齐 | 'l' / 'c' / 'r' | 'r' | | anim | 动画类型 | 0-6 | 0 | | icon | 图标 | number / string | - | | time | 自动关闭时间(ms) | number | 0 | | zIndex | 层级 | number | - |

🎨 弹层类型

• 0 (dialog) - 对话框
• 1 (page) - 页面层
• 2 (iframe) - iframe层
• 3 (loading) - 加载层
• 4 (drawer) - 抽屉
• 5 (photos) - 图片层
• 6 (notify) - 通知
• 7 (prompt) - 输入层

🎭 图标类型

• 1 - 成功 ✓
• 2 - 失败 ✕
• 3 - 疑问 ?
• 4 - 信息 ℹ
• 5 - 哭脸 ☹
• 6 - 笑脸 ☺
• 7 - 警告 !

🎬 动画效果

• 0 - 默认缩放
• 1 - 从上掉落
• 2 - 从下飞入
• 3 - 从左飞入
• 4 - 旋转飞入
• 5 - 渐显
• 6 - 抖动

📝 开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建
npm run build

📄 License

MIT

🙏 致谢

本项目基于 layui-vue 的 layer 组件架构开发。