vue-popup-plus 1.3.4 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +86 -0
- package/dist/vue-popup-plus.d.ts +590 -162
- package/dist/vue-popup-plus.js +647 -251
- package/dist/vue-popup-plus.umd.cjs +2 -2
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# Vue Popup Plus 🚀
|
|
2
|
+
|
|
3
|
+
一个功能强大、灵活易用的 Vue 3 弹窗组件库，让弹窗管理变得简单而优雅。
|
|
4
|
+
|
|
5
|
+
[](https://vuejs.org/)
|
|
6
|
+
[](https://www.typescriptlang.org/)
|
|
7
|
+
[](https://opensource.org/licenses/MIT)
|
|
8
|
+
[](https://github.com/yourusername/vue-popup-plus)
|
|
9
|
+
|
|
10
|
+
## ✨ 特性
|
|
11
|
+
|
|
12
|
+
- 🎯 **简单易用** - 简洁的 API，快速集成到您的项目中
|
|
13
|
+
- 🔌 **可扩展** - 自定义弹窗内容和样式，满足各种场景需求
|
|
14
|
+
- 🎭 **动画支持** - 内置多种动画效果，让弹窗展示更生动
|
|
15
|
+
- 📱 **响应式设计** - 完美适配各种屏幕尺寸
|
|
16
|
+
- 🧩 **TypeScript 支持** - 完整的类型定义，提供良好的开发体验
|
|
17
|
+
|
|
18
|
+
## 📦 安装
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
# 使用 npm
|
|
22
|
+
npm install vue-popup-plus
|
|
23
|
+
|
|
24
|
+
# 使用 yarn
|
|
25
|
+
yarn add vue-popup-plus
|
|
26
|
+
|
|
27
|
+
# 使用 pnpm
|
|
28
|
+
pnpm add vue-popup-plus
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## 📚 文档
|
|
32
|
+
|
|
33
|
+
查看我们的[在线文档](http://vue-popup-plus.styzy.cn)获取更多详细信息和高级用法。
|
|
34
|
+
|
|
35
|
+
## 🚀 快速开始
|
|
36
|
+
|
|
37
|
+
### 全局注册
|
|
38
|
+
|
|
39
|
+
```js
|
|
40
|
+
import { createApp } from 'vue'
|
|
41
|
+
import { createPopup } from 'vue-popup-plus'
|
|
42
|
+
import App from './App.vue'
|
|
43
|
+
|
|
44
|
+
const app = createApp(App)
|
|
45
|
+
const popup = createPopup()
|
|
46
|
+
|
|
47
|
+
app.use(popup)
|
|
48
|
+
|
|
49
|
+
app.mount('#app')
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### 基本使用
|
|
53
|
+
|
|
54
|
+
```vue
|
|
55
|
+
<template>
|
|
56
|
+
<button @click="showPopup">显示弹窗</button>
|
|
57
|
+
</template>
|
|
58
|
+
|
|
59
|
+
<script setup>
|
|
60
|
+
import { usePopup } from 'vue-popup-plus'
|
|
61
|
+
|
|
62
|
+
const popup = usePopup()
|
|
63
|
+
|
|
64
|
+
const showPopup = () => {
|
|
65
|
+
popup.render({
|
|
66
|
+
// 组件
|
|
67
|
+
component: () => import('./components/Demo.vue'),
|
|
68
|
+
// 组件属性
|
|
69
|
+
componentProps: {
|
|
70
|
+
// 根据你的组件属性传入
|
|
71
|
+
},
|
|
72
|
+
width: 400,
|
|
73
|
+
maxHeight: 600,
|
|
74
|
+
mask: false,
|
|
75
|
+
})
|
|
76
|
+
}
|
|
77
|
+
</script>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## 🤝 贡献
|
|
81
|
+
|
|
82
|
+
欢迎贡献代码、报告问题或提出新功能建议！请查看[贡献指南](CONTRIBUTING.md)了解更多信息。
|
|
83
|
+
|
|
84
|
+
## 📄 许可证
|
|
85
|
+
|
|
86
|
+
[MIT](LICENSE) © Your Name
|