Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

stupid-dialog

zhangwujian27ISC1.1.5

A simple plugin for dialog with Vue

vue-dialog, vue, dialog, toast, alert, confirm, stupid

readme

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