這兩天在開發的時候遇到了一個問題,產品部的需求是如下這樣的:
點擊提交後會做判斷,如果滿足某個條件,則彈出如上彈窗。在彈窗中點擊關閉後,不再執行函數中其餘代碼;點擊仍要提交,執行其餘代碼。
js的confirm方法實現這個就比較容易了,該函數會彈出彈窗,當點擊彈窗按鈕後會返回點擊的是“確定”-true還是“取消”-false,可以根據這個狀態來判斷是直接返回還是繼續執行其他代碼。可是confirm的一個缺陷就是它的樣式啊什麼的包括按鈕的文字都是固定的,如果想使用其他的就需要對函數進行重寫(嘗試過,嫌麻煩就沒有繼續了)
放棄了重寫後,就開始想着使用其他的方式了,最先想到的是使用miniUI自帶的彈窗工具(我們的系統使用的miniUI作爲前端框架),使用它的mini.showMessageBox(options)其中option參數長這個樣
{ title: String, message: String, buttons: ["ok", "no", "cancel"], iconCls: "mini-messagebox-question", html: String, callback: function(action){ } }
。這個方法很棒,可是又有了新的問題,它的返回值是一個亂七八糟的messageId,貌似沒有一點用,不能判斷是該繼續執行還是終止其餘代碼。而且更可惡的是,程序在執行這個的同時,也把剩餘的代碼給執行了,也就是說彈出彈窗後不等用戶選擇直接執行其餘代碼。那麼自然是不行了。
後來就想着自己寫個彈窗,以爲會完美,可也是和這個一樣的問題。
再後來就跟產品部解釋了一番,取消使用“關閉”與“仍要提交”。使用confirm的“取消”和“確定”。
後來又嘗試了一下,發現miniUI的mini.confirm也不行,也是不會暫時停住程序的執行
歸根到底,還是自己是做後端的,所以在做前端的一些東西纔會卡住。