1.1.5 • Published 4 years ago
stupid-dialog v1.1.5
stupid-dialog
一个简单的vue弹窗组件
组件: stupid-dialog
版本: 1.1.5
使用方法
- 通过NPM下载安装
npm install stupid-dialog --save通过import或者require在 main.js 中导入组件,在需要使用弹窗的页面调用方法
- main.js
import Dialog from 'stupid-dialog';
Vue.prototype.$dialog = Dialog;- 某vue文件
this.$dialog('这是一个简单的小弹窗'); // 只传字符串时，默认弹窗类型为toast或
this.$dialog({
type: 'toast',
message: '这是一个简单的小弹窗'
});配置参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 弹窗类型(可选：toast/alert/confirm) | String | 'toast' |
| message | 弹窗内容(必传值) | String | - |
| title | 弹窗的标题(type=alert/confirm) | String | - |
| position | 弹窗位置 | String/Number | 'center' |
| duration | toast持续时间 | Number | 1500 |
| mask | 是否有背景蒙板 | Boolean | true |
| dark | 暗黑配色 | Boolean | false |
| closeOnMask | 是否可点击蒙板关闭弹窗(type=alert/confirm) | Boolean | true |
| preventScroll | 弹窗出现时是否阻止背景滑动 | Boolean | true |
| dialogClass | 自定义class | String | - |
| confirmText | 确定按钮文本 | String | '确定' |
| cancelText | 取消按钮文本 | String | '取消' |
| confirmFn | 点击’确定‘后回调(type=alert/confirm) | Function | - |
| cancelFn | 点击’取消‘后回调(type=confirm) | Function | - |
| beforeClose | 弹窗关闭前的回调(all types) | Function | - |
注：1、position值为String时可选值：top/center/bottom，为Number时可能值n：n>=0时距离顶部npx,n<0时距离底部-npx
组件样式粗糙，没有样式配置，有样式需求请根据class覆盖样式
| class | 说明 |
|---|---|
| dialog-content-mask | 蒙板 |
| dialog-confirm | alert/confirm |
| dialog-title | 标题 |
| dialog-message | 内容 |
| dialog-action | 操作 |
| action-cancel | 取消按钮 |
| action-confirm | 确定按钮 |
| dialog-toast | toast |