Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zys8119/wp-alert
wp-alert 弹框插件
https://github.com/zys8119/wp-alert
Last synced: 10 days ago
JSON representation
wp-alert 弹框插件
- Host: GitHub
- URL: https://github.com/zys8119/wp-alert
- Owner: zys8119
- Created: 2022-11-22T04:31:36.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2022-12-26T03:07:43.000Z (almost 2 years ago)
- Last Synced: 2023-02-27T03:58:16.346Z (over 1 year ago)
- Language: Vue
- Size: 71.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# wp-alert
wp-alert 弹框插件
## 使用教程
`npm i wp-alert`
### pc方式
1、main.ts
```typescript
import alert from 'wp-alert'
app.use(alert)
```
### h5方式（以 vant 为例）
1、main.ts
```typescript
import alert, {AlertPlugConfig} from 'wp-alert'
import {Dialog, DialogOptions} from 'vant'
import 'vant/lib/index.css'
import {merge} from 'lodash'
declare module 'wp-alert' {
interface CustomAlertOptions extends DialogOptions{}
}
app.use(alert, {
// 默认取消按钮回调
onCancel(ev: MouseEvent): Promise | void {
window.$alert.close()
Dialog.close()
},
// 默认确定按钮回调
onConfirm(ev: MouseEvent): Promise | void {
window.$alert.close()
Dialog.close()
},
// 打开弹框之前覆盖配置
defineConfig:async(config) => {
return {
...config,
hiddenCancel:true,
hiddenConfirm:true,
}
},
// 可以更改弹框框架
defineComponent:async(config) => {
const content = await config.content
const vnode = h(content?.default, config.props)
return h(Dialog(merge( {
title:config.title,
message:content?.default ? (() => vnode) : content,
className:config.className || (config.alert ? null : 'van-popup--bottom'),
showConfirmButton:false,
closeOnClickOverlay:true
}, config)))
}
} as AlertPlugConfig)
```
### 全局组件导入:
CommonModalHeader
AlertFooter
AlertContent
AlertContentForm
vite.config.ts
```typescript
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { resolver as WpAlertResolver} from 'wp-alert/resolver'
export default defineConfig({
plugins:[
AutoImport({
resolvers: [
WpAlertResolver()
]
}),
Components({
resolvers: [
WpAlertResolver()
]
}),
]
})
```
## 内置组件介绍
### CommonModalHeader.vue
弹框公共头部
#### Props
| 名称 | 描述 |
|-------|----------|
| showClose | 是否显示关闭按钮 |
#### Slot
| 名称 | 描述 |
|-------|-----|
| title | 标题 |
### AlertContent.vue
弹框内容
#### Slot
| 名称 | 描述 |
|---------|------|
| default | 默认插槽 |
### AlertFooter.vue
弹框内容
#### Props
| 名称 | 描述 |
|---------|--------|
| hiddenCancel | 隐藏取消按钮 |
| hiddenConfirm | 隐藏确定按钮 |
| cancelText | 取消按钮文字 |
| confirmText | 确定按钮文字 |
| isH5 | 是否为h5 |
#### Slot
| 名称 | 描述 |
|---------|------|
| default | 默认插槽 |
#### Emits
| 名称 | 描述 | 参数 |
|---------|-----|----------------|
| cancel | 取消 | (evt:any)=>any |
| save | 保存 | (evt:any)=>any |
### AlertContentForm.vue
弹框内容
#### Props
| 名称 | 描述 | 参数 |
|---------|--------------------------|------------------------------------------------------------------------------|
| row | 编辑回显数据 | object |
| isView | 是否为编辑状态 | boolean |
| config | 表单配置：请参考示例 | object |
| successMessage | 成功回调提示语 | string |
| footerProps | 尾部参数， 请参考：AlertFooter.vue | any |
| initData | 初始数据 | object |
| format | 初始数据过滤器 | (value:any, row:any, key:string):any |
| getConfig | 保存之前获取配置，可拦截config | getConfig(config:FormDataMapType, formData:Record):FormDataMapType |
| hiddenFooter | 是否隐藏footer | boolean |
| isH5 | 是否为h5 | boolean |
#### Slot
| 名称 | 描述 |
|---------|----------|
| default | 表单内容默认插槽 |
| footer | footer插槽 |
#### Emits
| 名称 | 描述 | 参数 |
|-------|--|--------------------------|
| add | 保存 | (data:any)=>any |
| edit | 编辑 | (data:any, row:any)=>any |
| error | 错误回调 | (error:any)=>any |
#### 使用示例：
```vue
import {ref} from "vue"
const props = defineProps<{
row:any
isView:boolean
}>()
/**
* 表单配置
*/
const config = ref({
'name': '请输入姓名',
'phone': {
msg:'请输入联系方式',
check:(value:any) => !/1[0-9]{10}/.test(value) ? '手机号格式错误' : null
},
'sex': '请选择性别',
'area': '请选择所属地区',
'state': '请设置绑定状态',
})
/**
* 编辑数据
* @param data 表单数据
* @param row 当前数据
*/
const edit = (data:any, row:any) => {
// 调用修改数据接口
// window.api.***
}
/**
* 创建数据
* @param data 表单数据
*/
const add = (data:any) => {
// 调用创建数据接口
// window.api.***
}
```