stupid-dialog

一个简单的vue弹窗组件

组件: stupid-dialog

版本: 1.1.5

English document

使用方法

• 通过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