Vuejs通過瀏覽器導(dǎo)航關(guān)閉模態(tài)框，實(shí)現(xiàn)增強(qiáng)的用戶體驗(yàn)

Vuejs項(xiàng)目中，我們想實(shí)現(xiàn)這樣一個(gè)功能，當(dāng)有模態(tài)框處于顯示狀態(tài)，按下瀏覽器的后退按鈕或者后退快捷鍵，不離開當(dāng)前頁面，而是關(guān)閉最頂層的模態(tài)框，這是增強(qiáng)用戶體驗(yàn)的一種設(shè)計(jì)，那么該如何實(shí)現(xiàn)呢？

在這里，我們以Vue3中的element-plus UI庫講解，眾所周知，常用的模態(tài)框有3種，分別是：自定義對(duì)話框，消息提示框，抽屜；我們的實(shí)現(xiàn)原理是，當(dāng)路由導(dǎo)航之前，查找頁面中的模態(tài)框DOM元素，調(diào)用關(guān)閉按鈕的單擊方法來關(guān)閉模態(tài)框；原理是不是很簡單？

接下來，我們看代碼實(shí)現(xiàn)。首先，我們創(chuàng)建一個(gè)模塊文件modal.js，文件名大家可以隨便起。

然后，我們定義getAllModals函數(shù)，通過審查元素，我們得知對(duì)話框和抽屜的容器元素都有el-overlay類，我們就通過這個(gè)類進(jìn)行查找，刪選出可見的模態(tài)框容器元素。數(shù)組的構(gòu)造函數(shù)方法from用于將迭代器或類數(shù)組對(duì)象轉(zhuǎn)化為真正的數(shù)組。

/** @returns {HTMLDivElement[]} 所有可見的模態(tài)框容器元素 */
const getAllModals = () => {
  return Array.from(document.body.querySelectorAll('.el-overlay'))
    .filter(_ => window.getComputedStyle(_, null).display !== 'none')
}

接下來，我們定義closeModal函數(shù)，用于關(guān)閉模態(tài)框，返回true，表示成功關(guān)閉了一個(gè)模態(tài)框。后面，我們會(huì)使用這個(gè)返回值來決定導(dǎo)航的邏輯。

/** @param {HTMLDivElement} el */
const closeModal = el => {
  if (el) {
    /** @type {HTMLButtonElement} */
    const btnClose = el.querySelector('.el-dialog__close, .el-drawer__close')
    if (btnClose) {
      btnClose.click()
      return true
    }
  }
}

接下來，我們定義closeTopModal函數(shù)，用于關(guān)閉處于頂層的模態(tài)框，我們通過zIndex判斷模態(tài)框的層疊次序。

export const closeTopModal = () => {
  return closeModal(
    getAllModals()
      .reduce((t, _) => t ? +t.style.zIndex > +_.style.zIndex ? t : _ : _, null)
  )
}

接下來，我們定義closeAllModals函數(shù)，用于關(guān)閉所有模態(tài)框，用戶登錄狀態(tài)發(fā)生變化的時(shí)候會(huì)用到。

export const closeAllModals = () => getAllModals().forEach(closeModal)

接下來，我們定義closeMsgBox函數(shù)，用于關(guān)閉消息提示框，返回true，表示成功關(guān)閉了一個(gè)消息提示框。后面，我們會(huì)使用這個(gè)返回值來決定導(dǎo)航的邏輯。

export const closeMsgBox = () => {
  const el = document.body.querySelector('.el-overlay.is-message-box')
  if (el) {
    const visible = window.getComputedStyle(el, null).display !== 'none'
    if (visible) {
      /** @type {HTMLButtonElement} */
      const btnClose = el.querySelector('.el-message-box__headerbtn')
      if (btnClose) {
        btnClose.click()
        return true
      }
    }
  }
}

該模塊文件的最后，我們定義closeMsgBoxAndModalAll函數(shù)，用于關(guān)閉所有打開的消息提示框和模態(tài)框。

export const closeMsgBoxAndModalAll = () => {
  closeMsgBox()
  closeAllModals()
}

現(xiàn)在，我們可以轉(zhuǎn)向路由模塊文件了，我們對(duì)router的beforeEach導(dǎo)航守衛(wèi)進(jìn)行攔截，如果成功關(guān)閉了一個(gè)任意類型的模態(tài)框，那么阻止頁面跳轉(zhuǎn)。

router.beforeEach((to, from, next) => {
 if (closeMsgBox() || closeTopModal()) {
    return next(false)
  }
  next()
})

實(shí)現(xiàn)起來就是這么簡單，不是嗎？我以后有時(shí)間會(huì)分享更多的Web開發(fā)技術(shù)內(nèi)容，歡迎大家閱讀，學(xué)習(xí)！若大家有更好的解決方案，也歡迎分享出來，共同進(jìn)步，謝謝！

篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：

輸入類控件
菜單類控件

輸入類組件 —— input

此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：

type 值	含義
text	文字字段
password	密碼域，用戶看不到明文，以*代替
radio	單選按鈕
checkbox	多選按鈕
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖像域，用圖像作為背景的提交按鈕
hidden	隱藏域，不可見的輸入框
file	文本域，用于上傳文件等非文本數(shù)據(jù)

文本輸入框和密碼框

除了顯示形式不一樣，其它屬性一樣，有以下屬性：

name —— 定義文字字段名稱，用于和其它控件區(qū)別，不能包含特殊字符，也不可使用html 標(biāo)簽名稱
maxlength —— 定義文本框可輸入字符最大長度
size —— 定義文本框在頁面中顯示的長度
vaule —— 定義文本框中默認(rèn)的值

如下是文本輸入框和密碼框制作一個(gè)登錄表單

html代碼：

<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用戶名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密碼:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

顯示效果：

HTML5 輸入類型

除了以上幾種類型，HTML5 還增加了多個(gè)新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  數(shù)字類型（1 到 5 之間）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 選擇顏色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  時(shí)間：
  <input type="time" name="usr_time"><br>
  一定范圍
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能夠在被提交時(shí)自動(dòng)對(duì)電子郵件地址進(jìn)行驗(yàn)證<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  電話：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 類型。<br>
  url：
  <input type="url" name="url">
  提交時(shí)能夠自動(dòng)驗(yàn)證 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

單選和多選按鈕

使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個(gè) checked屬性定義默認(rèn)選擇的項(xiàng)，checked = “true”指選中那個(gè)選項(xiàng)，表單會(huì)將 checked = “true” 的選型值傳遞給后臺(tái)。

如下實(shí)例：

<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form> 
</body>
</html>

顯示效果：

單選和多選傳遞給后臺(tái)的數(shù)據(jù)是不一樣的，如下會(huì)看到地址欄中的數(shù)據(jù)，多選會(huì)發(fā)送多個(gè)值，后臺(tái)將會(huì)獲取一個(gè)數(shù)組形式的數(shù)據(jù)。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按鈕、提交按鈕、重置按鈕

普通按鈕：type = “button”，一般配合腳本使用，語法如下：

<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />

value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時(shí)所進(jìn)行的處理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按鈕">
<input type="button" value="打開窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

單擊您好按鈕

提交按鈕：type = “submit”，用于提交表單內(nèi)容，是一種特殊按鈕。

如剛才的登錄表單，提交后會(huì)返回結(jié)果：

重置按鈕：type="reset"，用于清除表單數(shù)據(jù)，也是一種特殊按鈕。

輸入數(shù)據(jù)

點(diǎn)擊重置按鈕后，表單數(shù)據(jù)清空

重置清空數(shù)據(jù)

HTML5 按鈕

除了使用input定義按鈕，還可以使用 html5 新增的<button> 標(biāo)簽定義按鈕，button 使用語法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form>

其它輸入類控件

隱藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隱藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

顯示效果

可以看到，隱藏域在頁面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會(huì)以非文本方式傳送到后臺(tái)的，常用來實(shí)現(xiàn)文件上傳功能。

文本域 —— textarea

除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區(qū)別就是可以輸入多行文字，input 文本輸入框是單行的無法輸入多行文字。

如下示例：

<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 屬性定義文本域的高度是幾行，cols 定義文本域?qū)挾日紟琢?，比如上面定義了高10行寬30列的文本域。

下拉菜單和多選列表

下拉菜單作用和單選按鈕類似，只不過它更加節(jié)省空間，當(dāng)要選擇的選型很多時(shí)，就不適合使用radio空間，所以當(dāng)選項(xiàng)很多的時(shí)候，使用下拉菜單，語法如下：

<select name="名稱">
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>

多選列表和多選按鈕類似，一樣為了節(jié)省空間，當(dāng)數(shù)據(jù)選項(xiàng)比較多時(shí)，使用多選列表，語法如下：

<select name="名稱" size="可看見的列表項(xiàng)數(shù)" multiple>
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>

多選比下拉菜單不同之處是多了一個(gè)multiple屬性，定義多選的，且表現(xiàn)形式也不一樣，不是下拉而是一個(gè)列表。

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

顯示效果：

這里需要注意的是，多選列表多選時(shí)需要按住ctrl鍵同時(shí)鼠標(biāo)單擊選擇才能多選，效果如下：

到這里，已介紹了大部分的表單控件，現(xiàn)在你可以使用他們制作自己的表單，表單通常在動(dòng)態(tài)網(wǎng)站中使用，這為以后制作動(dòng)態(tài)網(wǎng)站打下基礎(chǔ)。

還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網(wǎng)站學(xué)習(xí)，感謝關(guān)注，學(xué)習(xí)愉快！

上篇：前端入門——html 表單

下篇：前端入門 —— 網(wǎng)頁中使用窗口框架

法1：使用onclick事件

<input type="button" value="按鈕"
onclick="javascrtpt:window.location. />

或者直接使用button標(biāo)簽

<button onclick="window.location.>百度</button>

方法2：在button標(biāo)簽外套一個(gè)a標(biāo)簽

<a >
 <button>百度</button>
</a>

或使用

<a ><input type="button" value='百度'></a>

方法3：使用JavaScript函數(shù)

在線咨詢

上一篇：Js基礎(chǔ)3：節(jié)點(diǎn)創(chuàng)建
下一篇：「簡潔瀏覽器導(dǎo)航」簡潔瀏覽器導(dǎo)航網(wǎng)頁分享

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Vuejs通過瀏覽器導(dǎo)航關(guān)閉模態(tài)框，實(shí)現(xiàn)增強(qiáng)的用戶體驗(yàn)

輸入類組件 —— input

文本域 —— textarea

下拉菜單和多選列表

您的項(xiàng)目需求

Vuejs通過瀏覽器導(dǎo)航關(guān)閉模態(tài)框，實(shí)現(xiàn)增強(qiáng)的用戶體驗(yàn)