VueDialogX的孵化是由于作者在工作性質(zhì)決定的。 作者在日常的工作中，經(jīng)常接到各種各樣簡單的H5頁面需求，活動頁需求
這些需求有著共同的一點(diǎn)，就是業(yè)務(wù)不算復(fù)雜，對于組件庫中大量的組件無需用到
僅對Dialog、Toast有著高頻需求。所以在開發(fā)時，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以外 我們還橫向擴(kuò)展了選項(xiàng)組的actions，以及自定義填充圖片或者內(nèi)容的dialog。

滿足了基本需求外，我們還縱向擴(kuò)展了點(diǎn)擊彈窗時的異步載入能力，使其滿足需要點(diǎn)擊后加載數(shù)據(jù)，加載完成才能關(guān)閉彈窗的場景。

對于prompt，我們還提供了輕量可擴(kuò)展的文本域校驗(yàn)以及錯誤提示。

由于該組件面向小型項(xiàng)目以及非工程化的項(xiàng)目，我們提供了umd打包的版本以及window打包的版本，以滿足所有零碎項(xiàng)目的需求。

面向開發(fā)者，我們提供了完善的類型推導(dǎo)文件(d.ts)。使其在開發(fā)過程中擁有能夠更好的體驗(yàn)。由于是基于Typescript開發(fā)的，我們的組件對Typescript項(xiàng)目擁有完全的親和力。

Features

• 豐富的彈窗類型

• 完善的類型推導(dǎo)

• 基于Promise

• 優(yōu)雅的異步關(guān)閉

• 經(jīng)典的iOS設(shè)計(jì)風(fēng)格

• 支持渲染html

• 支持script標(biāo)簽引入

基本功能

除了支持基礎(chǔ)的alert、confirm、prompt外 還擴(kuò)展了

• 多選項(xiàng)卡

  
  
  8.gif

• 異步關(guān)閉

  
  
  異步關(guān)閉confirm.gif

異步關(guān)閉actions.gif

methods: {
  // 演示異步關(guān)閉
  async fetchData () {
    this.$dialog.actions({ // 可以是actions alert prompt confirm
      message: '點(diǎn)擊確認(rèn)將獲取數(shù)據(jù)',
      next: async (next, result)=> { // 其他異步彈窗使用方式相同
        await fetch('http://www.baidu.com', {  // 開始進(jìn)入loading狀態(tài)
          data: result  // result 對于prompt result是輸入框里的內(nèi)容， 對于actions result是用戶點(diǎn)擊按鈕的下標(biāo)
        })
        next() // 結(jié)束loading狀態(tài) 關(guān)閉彈窗
      }
    })
  }
}

• 自定義彈窗組件

  
  
  彈窗圖示

此外 支持html模板渲染，自定義prompt文本域檢查等功能 滿足絕大部分彈窗場景

使用方面

對于非工程化項(xiàng)目
VueDialogX支持script標(biāo)簽引入

// 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>

對于工程化項(xiàng)目，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: '確認(rèn)',
  cancelText: '取消'
}

// 使用這種方法，將會再Vue原型鏈上
// 掛載一個$dialog的實(shí)例
// 業(yè)務(wù)內(nèi)調(diào)用this.$dialog.xxx即可吊起彈窗
// globalOpt全局配置項(xiàng)查看下表*
Vue.use(VueDialogX, globalOpt)

new Vue({
  render: h => h(App)
}).$mount('#app')

也可以引入VueDialogX來自行初始化實(shí)例

// main.js

import App from './App.vue'
import Vue from 'vue'
import { VueDialogX } from 'vue-dialog-x'

const globalOpt = {
  title: '提示',
  okText: '確認(rèn)',
  cancelText: '取消'
}

// 如果不希望在Vue原型鏈上掛載
// 則自行new一個Dialog實(shí)例
// 業(yè)務(wù)內(nèi)調(diào)用VueDialogX.xxx即可吊起彈窗
// globalOpt全局配置項(xiàng)查看下表*
const dialogX = new VueDialogX(Vue, globalOpt)

// 或者將這個實(shí)例掛載在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/