笔者经常会接到一些非常轻量的移动端H5需求。这些需求非常简单，没有什么特别复杂的业务。但是需要一些基本的弹窗提示。由于系统级的alert，confirm会暴露网址信息。又不希望引入组件库。且Github上许多Dialog库UI比较落伍。遂打算开发一款UI风格基于iOS，功能较为丰富的弹窗

github 地址 https://github.com/a62527776a/vue-dialog-x
demo 演示 https://a62527776a.github.io/vue-dialog-x/

VueDialogX是一个iOS风格的弹窗对话框
基于Vue.js + Typescript开发
支持Promise，函数式的调用方式
支持异步关闭
支持umd以及window的引入方式
cover绝大部分应用场景

基本功能

除了支持基础的alert、confirm、prompt外 还扩展了

• 多选项卡

  
  8.gif

• 异步关闭

  
  异步关闭confirm.gif

异步关闭actions.gif

wait参数的详细文档 https://github.com/a62527776a/vue-dialog-x#wait

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')

详细文档

https://github.com/a62527776a/vue-dialog-x#api

demo 演示

https://a62527776a.github.io/vue-dialog-x/