引言

因?yàn)轫?xiàng)目搬磚需要，筆者從 2019 年 11 月份開(kāi)始學(xué)習(xí) Vue.js，在完整地敲了一遍 vue-admin 框架中的用戶(hù)管理 Demo 、斷點(diǎn)跟蹤前端調(diào)用流程、并摸清楚了 Vue.js 的開(kāi)發(fā)套路后，總算可以出師了。

寫(xiě)作本文有兩個(gè)原因，一是對(duì)這段時(shí)間學(xué)習(xí) Vue.js 的過(guò)程做一個(gè)總結(jié)；另外就是完成自己 2019 下半年在 GitChat 的寫(xiě)作目標(biāo)，8 月份曾在一個(gè)知識(shí)星球公布了下半年寫(xiě)兩篇 Chat 的目標(biāo)，遲遲沒(méi)有完成。

以上就是本文產(chǎn)生的背景了，再說(shuō)回到 Vue.js。筆者年初也弄了一陣兒 Angular.js，雖然都是前端框架，感覺(jué) Vue.js 入門(mén)更簡(jiǎn)單一些，其數(shù)據(jù)驅(qū)動(dòng)的設(shè)計(jì)理念跟 Java 面向?qū)ο缶幊痰乃季S模式相似，所以學(xué)起來(lái)更輕松。

之所以選擇彈框組件這個(gè)話(huà)題，是因?yàn)楣P者參與的新產(chǎn)品中，很多地方都涉及到彈出頁(yè)面，所以仔細(xì)研究了一下彈框組件的封裝原理，解決了彈出頁(yè)面封裝的技術(shù)問(wèn)題后，筆者這半路前端也能夠應(yīng)付一陣子開(kāi)發(fā)工作了！

環(huán)境準(zhǔn)備

Vue 開(kāi)發(fā)相關(guān)的工具及其關(guān)系回顧，這里先回憶一下跟 Vue 項(xiàng)目開(kāi)發(fā)有關(guān)的概念：

名詞

解釋

作用

Vue.js

一個(gè)前端框架

用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架

*.vue 文件

一種文件類(lèi)型

以類(lèi) HTML 語(yǔ)法描述一個(gè) Vue 組件

vue-cli

Vue 官方腳手架

對(duì)單個(gè) *.vue 文件進(jìn)行快速原型開(kāi)發(fā)

eslint

前端代碼檢查工具

編寫(xiě)高質(zhì)量前端代碼的利器，類(lèi)似 findbugs

webpack

模塊打包器

類(lèi)似 maven，將前端項(xiàng)目打包成靜態(tài)資源文件

IDEA Vue.js 插件

IDEA 插件

使 IDEA 能夠支持 Vue 項(xiàng)目開(kāi)發(fā)

我們?cè)谑褂?IDEA 開(kāi)發(fā) Vue 項(xiàng)目時(shí)，只需要安裝 Vue.js 插件就可以了，不需要使用 vue-cli 腳手架；引入 ESLint 是為了編寫(xiě)高質(zhì)量的前端代碼，也可以不用，而且 IDEA 的快速修正功能很強(qiáng)大，不需要完全了解 ESLint 規(guī)范；至于打包工具 webpack，初學(xué)完全可以先忽略它。

GitHub 上有一個(gè) Vue 的半成品項(xiàng)目 vueAdmin-template，可以基于它來(lái)學(xué)習(xí)或者二次開(kāi)發(fā)，本文也是在它基礎(chǔ)上完成一個(gè)彈框組件學(xué)習(xí)案例的。這里使用 IDEA 作為開(kāi)發(fā)工具，相關(guān)準(zhǔn)備工作如下：

IDEA 安裝 Vue.js 插件；

IDEA 安裝 eslint 插件；

IDEA 添加 .vue 文件模板；

IDEA 導(dǎo)入 vueAdmin-template，項(xiàng)目地址。

常見(jiàn)的幾種彈出框類(lèi)型

Web 開(kāi)發(fā)過(guò)程中常用的彈框，歸納起來(lái)，主要有三類(lèi)：

消息提示框，即 alert，不需要進(jìn)行操作；

操作確認(rèn)框，即 confirm，包含“確定”和“取消”按鈕；

頁(yè)面彈出框，即 openwindow，彈出一個(gè)完整的頁(yè)面，用戶(hù)輸入信息后，通過(guò)“確定”或“取消”提交信息。

第一、二類(lèi)彈出框，ElementUI 都有封裝，拿來(lái)用即可；第三類(lèi)彈出框，可以結(jié)合 el-dialog 組件完成。 在筆者參與的項(xiàng)目中，彈出頁(yè)面的特點(diǎn)在于，父組件彈出子組件后，用戶(hù)需要在彈出頁(yè)面配置信息、點(diǎn)擊“確定”按鈕提交。