Vue.js + Typescript实现的轻量级Dialog组件

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

异步关闭actions.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')