VueDialogX的孵化是由于作者在工作性质决定的。 作者在日常的工作中，经常接到各种各样简单的H5页面需求，活动页需求
这些需求有着共同的一点，就是业务不算复杂，对于组件库中大量的组件无需用到
仅对Dialog、Toast有着高频需求。所以在开发时，pass掉组件库。希望有一个好用，美观，且满足需求的弹窗库。VueDialogX便孵化出来了。
Github仓库 https://github.com/a62527776a/vue-dialog-x
Live demo http://vue-dialog-x.dscsdoj.top/
Homepage http://dscsdoj.top/
它能做什么
除了基本的alert、comfirm、prompt以外 我们还横向扩展了选项组的actions，以及自定义填充图片或者内容的dialog。
满足了基本需求外，我们还纵向扩展了点击弹窗时的异步载入能力，使其满足需要点击后加载数据，加载完成才能关闭弹窗的场景。
对于prompt，我们还提供了轻量可扩展的文本域校验以及错误提示。
由于该组件面向小型项目以及非工程化的项目，我们提供了umd打包的版本以及window打包的版本，以满足所有零碎项目的需求。
面向开发者，我们提供了完善的类型推导文件(d.ts)。使其在开发过程中拥有能够更好的体验。由于是基于Typescript开发的，我们的组件对Typescript项目拥有完全的亲和力。
Features
丰富的弹窗类型
完善的类型推导
基于Promise
优雅的异步关闭
经典的iOS设计风格
支持渲染html
支持script标签引入
基本功能
除了支持基础的alert、confirm、prompt外 还扩展了
-
多选项卡
8.gif -
异步关闭
异步关闭confirm.gif
methods: {
// 演示异步关闭
async fetchData () {
this.$dialog.actions({ // 可以是actions alert prompt confirm
message: '点击确认将获取数据',
next: async (next, result)=> { // 其他异步弹窗使用方式相同
await fetch('http://www.baidu.com', { // 开始进入loading状态
data: result // result 对于prompt result是输入框里的内容， 对于actions result是用户点击按钮的下标
})
next() // 结束loading状态 关闭弹窗
}
})
}
}
-
自定义弹窗组件
弹窗图示
此外 支持html模板渲染，自定义prompt文本域检查等功能 满足绝大部分弹窗场景
使用方面
对于非工程化项目
VueDialogX支持script标签引入
// index.html
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> // 必须先引入vuejs
<script src="https://unpkg.com/vue-dialog-x/dist/vue-dialog-x.window.js" /> // 推荐指定版本号
<script>
var Dialog = new window.VueDialogX(window.Vue)
Dialog.alert({
title: '提示',
message: '测试'
}).then(() => {
console.log('sss')
})
</script>
对于工程化项目，VueDialogX提供umd方式引入
$ yarn add vue-dialog-x
or
$ npm install vue-dialog-x
VueDialogX 提供两种挂载方式
一种使用Vue.use的方式挂载
// main.js
import App from './App.vue'
import Vue from 'vue'
import VueDialogX from 'vue-dialog-x'
const globalOpt = {
title: '提示',
okText: '确认',
cancelText: '取消'
}
// 使用这种方法，将会再Vue原型链上
// 挂载一个$dialog的实例
// 业务内调用this.$dialog.xxx即可吊起弹窗
// globalOpt全局配置项查看下表*
Vue.use(VueDialogX, globalOpt)
new Vue({
render: h => h(App)
}).$mount('#app')
也可以引入VueDialogX来自行初始化实例
// main.js
import App from './App.vue'
import Vue from 'vue'
import { VueDialogX } from 'vue-dialog-x'
const globalOpt = {
title: '提示',
okText: '确认',
cancelText: '取消'
}
// 如果不希望在Vue原型链上挂载
// 则自行new一个Dialog实例
// 业务内调用VueDialogX.xxx即可吊起弹窗
// globalOpt全局配置项查看下表*
const dialogX = new VueDialogX(Vue, globalOpt)
// 或者将这个实例挂载在Vue原型链上
// 则和Vue.use相同的效果
Vue.prototype.$dialog = dialogX
new Vue({
render: h => h(App)
}).$mount('#app')
Github仓库 https://github.com/a62527776a/vue-dialog-x
Live demo http://vue-dialog-x.dscsdoj.top/
Homepage http://dscsdoj.top/
