vue項目實踐2——封裝彈框模塊

前言

本文承接前一篇文章vue項目實踐1——構建項目，在構建項目的基礎上進行彈框組件的封裝。彈框組件強調js動態調用、異步處理用戶交互事件。

另外，關於彈框模塊實現上基礎的網上有不少講解，進階的封裝借鑑了C#的語法和Qt的彈窗，封裝後使用方便，但封裝的思想和實現不太好講清楚。有興趣的能夠去看個人github：https://github.com/sunhuili/v...。

開發前配置

基於當前構建的項目，咱們須要再進行一些配置，以便更便捷溫馨的開發體驗。當前項目目錄結構以下：

配置資源文件路徑別名

以下圖所示：

配置

在webpack的配置文件webpack.base.conf.js中加入scss、assets、static三個文件的路徑別名便可（重啓項目後生效）。

使用

• 一、scss文件的引用

  <style lang="scss" scoped="">
      @import '~scss/_variable.scss';
  </style>

• 二、圖片的引用

  <img src="~static/images/loading.gif">

• 三、動態圖片引用

  data() {
    return {
      loadingSrc: require('static/images/loading.gif'),
    }
  },

原理

• 一、static與assets的區別
  assets：項目編譯的過程當中會被webpack處理解析爲模塊依賴，只支持相對路徑的形式，編譯後文件名會加上版本hash做爲後綴。
  static：不會被webpack處理、解析，會被直接複製到最終的打包目錄（默認是dist/static）下。必須使用絕對路徑引用這些文件，這是經過config.js文件中的build.assetsPublicPath和build.assetsSubDirectory連接來肯定的。任何放在static中的文件都須要以絕對路徑的形式引用「/static/[filename]」。

  綜上：根據webpack的特性，總的來講就是static放不會變更的第三方文件，assets放可能會變更的文件。

• 二、動態加載和靜態加載的區別
  靜態加載：直接在template標籤內引用，直接按路徑來就能夠了。
  動態綁定：script標籤內的引用，由於webpack中圖片資源是做爲模塊引入的，因此不能直接用路徑。
• 三、配路徑別名的重要性
  更溫馨的編程體驗：使用別名後能夠直接用絕對路徑，不用一直../向上查找相對路徑。
  便於模塊化處理：使用別名後便於遷移，不會由於換個路徑就報一堆錯。
  能夠配合基路由的配置：這個是最重要一點，前端項目編譯後不必定有專門的前端服務器，極可能是前套在後端服務器的文件路徑中，如http://192.168.3.10/qianduan/... ,其中‘qianduan’就是咱們的基路由，這時候由於static文件夾下文件用絕對路徑引用，就會致使開發和線上路徑不一致，從而致使各類問題。而設置了路徑別名後就不須要擔憂開發和線上路徑不一致的問題了。

基礎樣式配置

如圖所示，定義好基色調、經常使用樣式（這裏多用flex佈局）。

配套路由和測試頁面

測試頁面一覽

封裝彈框組件

如圖所示目錄，彈框組件放在‘src/plugin/dialog’目錄下。

dialog文件夾下各文件介紹

• 一、dialog/index.js是給外部調用的文件；
• 二、dialog.scss是彈框的樣式（這裏省事的全部彈框用了同一套）；
• 三、alert、confirm等文件夾裏是具體彈框的實現。

具體彈框實現，以alert爲例

alert文件夾下包含兩個文件：alert.vue、index.js

• 一、alert.vue：alert彈框組件（同通常的vue組件），實現alert的界面顯示。
• 二、index.js：alert調用方法，封裝使咱們能夠經過js語法動態調用alert彈框，包括js彈出窗口、js關閉窗口、異步獲取用戶點擊事件。
  實現以下圖：

使用方式

• 一、直接引用

• 二、綁定爲Vue的屬性

結語

github上vue項目持續更新https://github.com/sunhuili/v... ，主要是項目中積累的公用模塊和實用配置，歡迎你們一塊兒交流技術。