開源一個基於es6的dialog控件

在項目開發的過程中，團隊擁有一個自己的組件庫是很必要的。無論是UI組件還是其他的一些功能組件，積累越豐富，更新越活躍，對快速開發的幫助越大。在團隊早期的項目開發中，由於前端組成立的較晚，各種積累也是不夠，只能慢慢積累。比如本文介紹的easy-dialog,早期的dialog組件也是每開發一個項目就各種面向搜索引擎編程，爲了實現ui的效果，各種第三方的組件庫也是用的心很累，於是組件開發開始走自力更生的道路，也就是造輪子的不歸路。

這個項目並非完全原創，參考了很多或大或小的開源項目，現在開源出來，也算給大家一個參考和選擇。個人能力問題，有些寫法可能還不夠規範，也歡迎大家提寶貴意見。

github倉庫：easy-dialog

簡單介紹

使用es6開發，提供了6種功能彈窗,接下來會對每一個的使用具體分析。

基本使用

可以直接通過標籤引入，也可以使用npm，支持import。

npm i easy-dialog
import easyDialog from 'easy-dialog'

或者
<script src="../lib/index.js"></script>

declare

一些使用幫助或者使用許可的顯示

easyDialog.declare({bar: "使用許可", content: txt}, [{'yes': '確認'}], function (type, input, c) {
    if (type == 'yes') {
        easyDialog.toast('完成', 3000, function () {
            console.log(c)
        })
        this.hide();
    }
})

imgad

用於進入首頁的彈窗圖片信息顯示，輸入一個圖片靜態資源的路徑。

easyDialog.imgad('http://oankigr4l.bkt.clouddn.com/201804301921_288.png', function () {
    this.hide();
})

prompt

一個彈窗輸入框,也可以擴展成登錄框，添加了輸入信息的驗證，可以擴展參數輸入匹配的正則表達式。

easyDialog.prompt({bar: "請輸入小組名", content: '深圳分組'}, null, function (type, input, c) {
    if (type == 'yes') {
        easyDialog.toast(input, 3000, function () {
            console.log(c)
        })
        this.hide();
    } 
})

toast

最普通的toast，樣式很簡單，輸入毫秒時間。

easyDialog.toast('我是不好看的彈窗', 3000, function () {
    console.log('toast隱藏')
})

alert

用戶提醒，只有一個按鈕。

easyDialog.alert('你確定？', true, function () {
    console.log('確定了')
})

confirm

用戶確認框，有兩個按鈕，按鈕上顯示的文字可以自定義傳入。

easyDialog.confirm('你可以不確定的！', null, function (type) {
    easyDialog.toast('您點擊了' + type, 2000);
    this.hide();
})

總結

組件在主要針對手機端，pc端未進行兼容。

最後的慣例，貼上我的博客，歡迎關注