前言
最近研究了用vue編寫彈出框的元件，發現其實這裡面的門道還是有很多的。這篇文完全是用來記錄總結下最近的學習成果，同時也希望能夠幫得上正在學習糾結的你~ps:本文假設你已經了解vue2.0相關框架，因此適合有一定vue2.0基礎的同學閱讀。
設計元件的思考
其實單純的編寫乙個彈出框元件並不難，寫乙個模板，然後用v-if或者v-show指令還控制項的出現與消失。真正困擾我的是，這個元件的呼叫方式，這個問題糾結了我好久。
調研了下資料，有些人建議，直接把元件標籤插進模板中，然後通過直接控制項的顯示隱藏來控制項。這樣寫有好處，就是結構清晰，一目了然，人家一看你的**就知道你這個頁面可能會有彈出框，並且編寫的元件就更容易，只需關注內部方法就好了，也不存在事件呼叫的困擾，維護起來也特別容易。但是缺點也很明顯，如果有多個彈窗，並且不知道會有幾個彈窗的情況下，感覺就不太好做，並且這種提前寫模板的形式，難免會在不彈窗的時候要**一些js檔案，有可能會造成效能浪費。
也有些人建議，在寫好的彈出框元件之外再做一層封裝，通過動態呼叫的方式來控制彈出框的顯示與隱藏。這樣寫的好處是不用事先在模板裡面寫好該元件的標籤，只需要在想呼叫的地方呼叫下該元件，就實現了按需使用的目的，符合之前傳統前端框架的編碼習慣。缺點就是感覺**寫起來比較複雜，層層巢狀，並且感覺這個與mvvm模式的狀態驅動介面的思想相違背。
於是我天秤座的糾結病犯了，在選擇哪種技術方案的問題上，思考了很久。但是網上搜了很多，發現還是後一種實現方法用的人比較多。後來我又研究了了elementui和iview的彈出框元件，他們也是沿用的後一種方法，想了一下後一種方法雖然**易讀性不強，但是它真正模擬了瀏覽器預設的alert事件，在使用者需要的地方來呼叫，一方面節省了**量，另一方程式設計客棧面也很容易解決多個彈窗的情況。最後還是決定用這種模式寫乙個簡單的彈出框元件。主要是體會這其中的機理。廢話不多說，來上乾貨了。有啥不對的地方還請大家多多指教。(ps:對於天秤座的我，雖然選擇了後一種方法，但是內心還是鍾愛第一種方法，並且後一種方法並沒有足夠的理由說服我呀，不知道哪位有識之士能夠幫忙點醒一下我，晚輩感激不盡)。
alert元件設計
單獨的設計alert彈出框的邏輯是很簡單的，我就直接上**了：
}
}
自製彈出框元件
目錄沒有使用vue popover外掛程式，因為功能不需要太多，只需要上下左右彈出 ww 視口寬 elm.offsetleft 這div的左側偏移量，不算margin 也沒margin elm.clientwidth 這div的寬，不包括border和margin 是用按鈕撐開寬 this.widt...
vue 封裝彈出框
dialog.vue dialog v show showmask click.self closemask dialog container dialog title div content 彈窗內容 slot div btns type confirm class default btn cli...
vue模態框元件封裝
示例 一般彈框 提示文字樣式 單個按鈕 多個按鈕 圓角按鈕 按鈕顏色 遮罩不可點 自定義彈窗內容 我是自定內容 常用大按鈕 export default modal4 false,button4 modal5 false,modal6 false,button6 modal7 false,modal...