q-dialog

一个精致的移动端vue弹窗组件

更新日志

Demo

Demo演示

下载

• npm

npm install q-dialog

• cnpm

cnpm install q-dialog

• yarn

yarn add q-dialog

引用

import QDialog from "q-dialog";
import "q-dialog/dist/q-dialog.css";
Vue.use(QDialog);
Vue.prototype.$dialog = QDialog;

引用后就可以通过两种方式唤醒弹窗

一种是组件q-dialog

一种是this实例调用this.$dialog.show()和this.$dialog.close()

如果更改调用实例的方式可以手动指定

import QDialog from "q-dialog";
import "q-dialog/dist/q-dialog.css";
Vue.use(QDialog);
Vue.prototype.$dialog = QDialog.show
Vue.prototype.$dialog.close = QDialog.close

更改后的方法便是this.$dialog()和this.$dialog.close()

Props

组件下的 props

| props | Type | Required | Default | Description | | ---------------- | :------: | :------: | :-----------------: | ----------------------: | | v-model | Boolean | true | false | 是否显示双向绑定值 | | title | String | false | '' | 标题 | | details | String | false | '' | 详情 | | richText | String | false | '' | 富文本详情 | | type | String | false | alert | 类型 alert 或者 confirm | | cancelText | String | false | 取消 | 取消按钮文案 | | cancelTextColor | String | false | #999999 | 取消按钮文案颜色 | | confirmText | String | false | 确认 | 确认按钮文案 | | confirmTextColor | String | false | #40a1ff | 确认按钮文案颜色 | | btns | String | false | [] | 按钮数组 | | closeIcon | Boolean | false | false | 是否展示关闭按钮 | | lock | Boolean | false | false | 是否点击背景可关闭 | | beforeClose | Function | false | (type,done) => {} | 关闭前的回调 |

实例下的 options

展示组件

实例通过 this.$dialog.show(options)调用,options是一个对象 有如下属性

| props | Type | Required | Default | Description | | ---------------- | :------: | :------: | :-----------------: | ----------------------: | | title | String | false | '' | 标题 | | details | String | false | '' | 详情 | | richText | String | false | '' | 富文本详情 | | type | String | false | alert | 类型 alert 或者 confirm | | cancelText | String | false | 取消 | 取消按钮文案 | | cancelTextColor | String | false | #999999 | 取消按钮文案颜色 | | confirmText | String | false | 确认 | 确认按钮文案 | | confirmTextColor | String | false | #40a1ff | 确认按钮文案颜色 | | btns | String | false | [] | 按钮数组 | | closeIcon | Boolean | false | false | 是否展示关闭按钮 | | lock | Boolean | false | false | 是否点击背景可关闭 | | beforeClose | Function | false | (type,done) => {} | 关闭前的回调 |

和组件的 props 相比属性完全一样 只是少了一个 v-model

this.$dialog.show 在没有beforeClose方法下,返回为一个promise

this.$dialog
  .show({})
  .then(() => {})
  .catch(() => {});

再点击确认按钮的情况下在promise的then回调执行

再点击取消按钮的情况下在promise的catch回调执行

如果有beforeClose方法会优先调用 beforeClose this.$dialog.show 不会返回 promise

关闭组件

this.$dalog.close()

props 解析

btns 解析

btns的优先级高于其他设置按钮的props

• btns
  • value 按钮文案
  • color 按钮颜色

弹窗分两种 一种是提醒弹窗 只有一个确认按钮 一种是确认弹窗 有取消和确认两个按钮 如果仅改动按钮的部分内容 比如 只改变确认按钮文案可以使用 confirmText

但如果在高度自定义按钮的情况下,取消确认按钮的文案和颜色都需要更改,可以使用 btns,btns 是一个长度最大为 2 的数组,value 则代表按钮文案,color 代表按钮颜色

beforeClose 解析

默认情况下点击确认和取消这两个按钮 或者 背景 和 取消的 icon 弹窗会直接关闭,但如果在特定情况下点击以上 4 个内容不关闭弹窗可以使用beforeClose

这个函数有两个参数

第一个参数是type

• confirm 点击确认按钮
• cancel 点击取消按钮
• icon 点击关闭 icon
• background 点击背景

第二个参数是done

调用 done 方法后done()弹窗关闭,且在点击取消或者确认按钮的时候这两个按钮会出现一个loading加载的图案

slots

details

详情插槽

confirm

确认按钮插槽 确认按钮插槽优先级高于 props btns 和 props confirmBtn

cancel

取消按钮插槽 取消按钮插槽优先级高于 props btns 和 props cancelBtn

events

confirm

点击确认按钮触发

cancel

点击取消按钮触发

close

弹窗关闭触发

open

弹窗打开触发