lement Plus 的 Dialog 組件默認(rèn)情況下，點(diǎn)擊遮罩層（即背景蒙版）會關(guān)閉對話框。然而，你可以通過修改組件的 close-on-click-modal 屬性來改變這個行為。

如果你想要實(shí)現(xiàn)點(diǎn)擊遮罩層不關(guān)閉 Dialog，你需要將 close-on-click-modal 屬性設(shè)置為 false。這可以在組件的局部設(shè)置中進(jìn)行，也可以全局配置。

局部設(shè)置

在 Dialog 組件的模板中，直接添加 :close-on-click-modal="false"：

<el-dialog  
  :visible.sync="dialogVisible"  
  :close-on-click-modal="false"  
  width="50%">  
  <!-- 對話框內(nèi)容 -->  
</el-dialog>

全局配置

如果你希望所有 Dialog 組件都默認(rèn)擁有這個行為，你可以通過全局配置來實(shí)現(xiàn)。在 Vue 應(yīng)用的入口文件（通常是 main.js 或 main.ts）中，配置 Element Plus 并修改 ElDialog 組件的默認(rèn)屬性：

import { createApp } from 'vue';  
import ElementPlus from 'element-plus';  
import 'element-plus/lib/theme-chalk/index.css';  
import App from './App.vue';  
  
const app = createApp(App);  
  
app.use(ElementPlus);  
  
// 全局配置 Dialog 組件，使得點(diǎn)擊遮罩層不關(guān)閉彈窗  
app.config.globalProperties.$ELEMENT = {  
  size: 'small', // 其他全局配置...  
  zIndex: 3000 // 其他全局配置...  
};  
  
// 修改 ElDialog 組件的 closeOnClickModal 屬性的默認(rèn)值  
app._context.components.ElDialog.props.closeOnClickModal.default = false;  
  
app.mount('#app');

請注意，直接修改 app._context.components.ElDialog.props.closeOnClickModal.default 并不是官方推薦的做法，因?yàn)檫@涉及到對 Vue 內(nèi)部狀態(tài)的直接操作，未來 Vue 或 Element Plus 的更新可能會導(dǎo)致此方法失效。不過，在 Element Plus 的當(dāng)前版本中，這是一個可行的方法。

更好的方式是使用 Element Plus 的自定義主題功能或者等待 Element Plus 官方提供更為正式的全局配置 API。同時，也要關(guān)注 Element Plus 的更新日志，以便及時調(diào)整你的代碼。

如果你發(fā)現(xiàn)你的 Dialog 組件在設(shè)置了 close-on-click-modal="false" 后仍然會在點(diǎn)擊遮罩層時關(guān)閉，可能是因?yàn)槟愕捻?xiàng)目中存在其他代碼或插件影響了這個行為。這時，你需要檢查你的項(xiàng)目代碼，確保沒有其他地方在修改這個屬性，或者查看是否有其他事件監(jiān)聽器在監(jiān)聽遮罩層的點(diǎn)擊事件并觸發(fā)了關(guān)閉操作。

文由掘金@天行天忌授權(quán)發(fā)布，前端晚間課對其內(nèi)容進(jìn)行微改。

HTML，超文本標(biāo)記語言，是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。自從引入 HTML 以來，它就一直用于構(gòu)建互聯(lián)網(wǎng)。與 JavaScript 和 CSS 一起，HTML 構(gòu)成前端開發(fā)的三劍客。

盡管許多新技術(shù)使網(wǎng)站創(chuàng)建過程變得更簡單、更高效，但 HTML 始終是核心。隨著 HTML5 的普及，在 2014 年，這種標(biāo)記語言發(fā)生了很多變化，變得更加友好，瀏覽器對新標(biāo)準(zhǔn)的支持熱度也越來越高。而HTML并不止于此，還在不斷發(fā)生變化，并且可能會獲得一些特性來證明對 HTML6 的命名更改是合理的。

支持原生模式

該元素<dialog> 將隨 HTML6 一起提供。它被認(rèn)為等同于用 JavaScript 開發(fā)的模態(tài)，并且已經(jīng)標(biāo)準(zhǔn)化，但只有少數(shù)瀏覽器完全支持。但這種現(xiàn)象會改變，很快它將在所有瀏覽器中得到支持。

這個元素在其默認(rèn)格式下，只會將光標(biāo)顯示在它所在的位置上，但可以使用 JavaScript 打開模式。

<dialog>
  <form method="dialog">
    <input type="submit" value="確定" />
    <input type="submit" value="取消" />
  </form>
</dialog>

在默認(rèn)形式下，該元素創(chuàng)建一個灰色背景，其下方是非交互式內(nèi)容。

可以在 <dialog> 其中的表單上使用一種方法，該方法將發(fā)送值并將其傳遞回自身 <dialog>。

總的來說，這個標(biāo)簽在用戶交互和改進(jìn)的界面中變得有益。

可以通過更改 <dialog> 標(biāo)簽的 open 屬性以控制打開和關(guān)閉。

<dialog open>
  <p>組件內(nèi)容</p>
</dialog>

沒有 JavaScript 的單頁應(yīng)用程序

FutureClaw 雜志主編 Bobby Mozumder 建議：

將錨元素鏈接到 JSON/XML、API 端點(diǎn)，讓瀏覽器在內(nèi)部將數(shù)據(jù)加載到新的數(shù)據(jù)結(jié)構(gòu)中，然后瀏覽器將 DOM 元素替換為根據(jù)需要加載的任何數(shù)據(jù)。初始數(shù)據(jù)（以及標(biāo)準(zhǔn)錯誤響應(yīng)）可以放在標(biāo)題裝置中，如果需要，可以稍后替換。

據(jù)他介紹，這是單頁應(yīng)用程序網(wǎng)頁設(shè)計(jì)模式，可以提高響應(yīng)速度和加載時間，因?yàn)椴恍枰虞d JavaScript。

這個是一個比較有意思的提案，就有點(diǎn)類似我們以前沒有做前后端分離之前的混合編程的模式，HTML變成模板語言，通過JSON API請求數(shù)據(jù)，不一樣的是變成瀏覽器來默認(rèn)解析，瀏覽器內(nèi)部加載數(shù)據(jù)到新的數(shù)據(jù)結(jié)構(gòu)中，然后瀏覽器將按需加載到的數(shù)據(jù)替換成 DOM 元素。

大家可以看一下InfoQ上的這篇文章《針對非正式 HTML6 提案“無需 JavaScript 的單頁應(yīng)用”引發(fā)的論戰(zhàn)》，了解更多！

https://www.infoq.cn/article/2015/03/html6-without-javascript

自由調(diào)整圖像大小

HTML6 愛好者相信即將到來的更新將允許瀏覽器調(diào)整圖像大小以獲得更好的觀看體驗(yàn)。

每個瀏覽器都難以呈現(xiàn)相對于設(shè)備和屏幕尺寸的最佳圖像尺寸，不幸的是，src 標(biāo)簽 img 在處理這個問題時不是很有效。

這個問題可以通過一個新標(biāo)簽 <srcset> 來解決，它使瀏覽器在多個圖像之間進(jìn)行選擇的工作變得更加容易。

專用庫

將可用庫引入 HTML6 絕對是提高開發(fā)效率的重要一步。

微格式

很多時候，需要在互聯(lián)網(wǎng)上定義一般信息，而這些一般信息可以是任何公開的信息，例如電話號碼、姓名、地址等。微格式是能夠定義一般數(shù)據(jù)的標(biāo)準(zhǔn)。微格式可以增強(qiáng)設(shè)計(jì)者的能力，并可以減少搜索引擎推斷公共信息所需的努力。

自定義菜單

盡管標(biāo)簽<ul>、<ol>非常有用，但在某些情況下仍有一些不足之處。可以處理交互元素的標(biāo)簽將是一個不錯的選擇。

這就是創(chuàng)建標(biāo)簽 <menu> 的驅(qū)動力，它可以處理按鈕驅(qū)動的列表元素。

<menu type="toolbar">
  <li><button>個人信息</button></li>
  <li><button>系統(tǒng)設(shè)置</button></li>
  <li><button>賬號注銷</button></li>
</menu>

因此 <menu>，除了能夠像普通列表一樣運(yùn)行之外，還可以增強(qiáng) HTML 列表的功能。

增強(qiáng)身份驗(yàn)證

雖然HTML5在安全性方面還不錯，瀏覽器和網(wǎng)絡(luò)技術(shù)也提供了合理的保護(hù)。毫無疑問，在身份驗(yàn)證和安全領(lǐng)域還有很多事情可以做。如密鑰可以異地存儲；這將防止不受歡迎的人訪問并支持身份驗(yàn)證。使用嵌入式密鑰而不是 cookie，使數(shù)字簽名更好等。

集成攝像頭

HTML6 允許以更好的方式使用設(shè)備上的相機(jī)和媒體。將能夠控制相機(jī)、它的效果、模式、全景圖像、HDR 和其他屬性。

總結(jié)

沒有什么是完美的，HTML 也不是完美的，所以 HTML 規(guī)范可以做很多事情來使它更好。應(yīng)該對一些有用的規(guī)范進(jìn)行標(biāo)準(zhǔn)化，以增強(qiáng) HTML 的能力。小的變化已經(jīng)開始推出。如增強(qiáng)藍(lán)牙支持、p2p 文件傳輸、惡意軟件保護(hù)、云存儲集成，下一個 HTML 版本可以考慮一下。

紹

彈出模態(tài)框，常用于消息提示、消息確認(rèn)，或在當(dāng)前頁面內(nèi)完成特定的交互操作。

彈出框組件支持函數(shù)調(diào)用和組件調(diào)用兩種方式。

函數(shù)調(diào)用

Dialog 是一個函數(shù)，調(diào)用后會直接在頁面中彈出相應(yīng)的模態(tài)框。

import { Dialog } from 'vant';

Dialog({ message: '提示' });

組件調(diào)用

通過組件調(diào)用 Dialog 時，可以通過下面的方式進(jìn)行注冊：

import Vue from 'vue';
import { Dialog } from 'vant';

// 全局注冊
Vue.use(Dialog);

// 局部注冊
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
};

代碼演示

消息提示

用于提示一些消息，只包含一個確認(rèn)按鈕。

Dialog.alert({
  title: '標(biāo)題',
  message: '彈窗內(nèi)容',
}).then(() => {
  // on close
});

Dialog.alert({
  message: '彈窗內(nèi)容',
}).then(() => {
  // on close
});

消息確認(rèn)

用于確認(rèn)消息，包含取消和確認(rèn)按鈕。

Dialog.confirm({
  title: '標(biāo)題',
  message: '彈窗內(nèi)容',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

異步關(guān)閉

通過 beforeClose 屬性可以傳入一個回調(diào)函數(shù)，在彈窗關(guān)閉前進(jìn)行特定操作。

function beforeClose(action, done) {
  if (action === 'confirm') {
    setTimeout(done, 1000);
  } else {
    done();
  }
}

Dialog.confirm({
  title: '標(biāo)題',
  message: '彈窗內(nèi)容',
  beforeClose,
});

全局方法

引入 Dialog 組件后，會自動在 Vue 的 prototype 上掛載 $dialog 方法，在所有組件內(nèi)部都可以直接調(diào)用此方法。

export default {
  mounted() {
    this.$dialog.alert({
      message: '彈窗內(nèi)容',
    });
  },
};

組件調(diào)用

如果需要在彈窗內(nèi)嵌入組件或其他自定義內(nèi)容，可以使用組件調(diào)用的方式。

<van-dialog v-model="show" title="標(biāo)題" show-cancel-button>
  <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
</van-dialog>

export default {
  data() {
    return {
      show: false,
    };
  },
};

API

方法

方法名說明參數(shù)返回值Dialog展示彈窗optionsPromiseDialog.alert展示消息提示彈窗optionsPromiseDialog.confirm展示消息確認(rèn)彈窗optionsPromiseDialog.setDefaultOptions修改默認(rèn)配置，對所有 Dialog 生效optionsvoidDialog.resetDefaultOptions重置默認(rèn)配置，對所有 Dialog 生效-voidDialog.close關(guān)閉彈窗-void

Options

通過函數(shù)調(diào)用 Dialog 時，支持傳入以下選項(xiàng)：

參數(shù)說明類型默認(rèn)值title標(biāo)題string-width v2.2.7彈窗寬度，默認(rèn)單位為pxnumber | string320pxmessage文本內(nèi)容，支持通過\n換行string-messageAlign內(nèi)容對齊方式，可選值為left rightstringcenterclassName自定義類名any-showConfirmButton是否展示確認(rèn)按鈕booleantrueshowCancelButton是否展示取消按鈕booleanfalseconfirmButtonText確認(rèn)按鈕文案string確認(rèn)confirmButtonColor確認(rèn)按鈕顏色string#1989facancelButtonText取消按鈕文案string取消cancelButtonColor取消按鈕顏色stringblackoverlay是否展示遮罩層booleantrueoverlayClass v2.2.7自定義遮罩層類名string-overlayStyle v2.2.7自定義遮罩層樣式object-closeOnPopstate v2.0.5是否在頁面回退時自動關(guān)閉booleanfalsecloseOnClickOverlay是否在點(diǎn)擊遮罩層后關(guān)閉彈窗booleanfalselockScroll是否鎖定背景滾動booleantrueallowHtml v2.8.7是否允許 message 內(nèi)容中渲染 HTMLbooleantruebeforeClose關(guān)閉前的回調(diào)函數(shù)，
調(diào)用 done() 后關(guān)閉彈窗，
調(diào)用 done(false) 阻止彈窗關(guān)閉(action, done) => void-transition v2.2.6動畫類名，等價于 transtion 的name屬性string-getContainer指定掛載的節(jié)點(diǎn)，用法示例string | () => Elementbody

Props

通過組件調(diào)用 Dialog 時，支持以下 Props：

參數(shù)說明類型默認(rèn)值v-model是否顯示彈窗boolean-title標(biāo)題string-width v2.2.7彈窗寬度，默認(rèn)單位為pxnumber | string320pxmessage文本內(nèi)容，支持通過\n換行string-message-align內(nèi)容對齊方式，可選值為left rightstringcentershow-confirm-button是否展示確認(rèn)按鈕booleantrueshow-cancel-button是否展示取消按鈕booleanfalseconfirm-button-text確認(rèn)按鈕文案string確認(rèn)confirm-button-color確認(rèn)按鈕顏色string#1989facancel-button-text取消按鈕文案string取消cancel-button-color取消按鈕顏色stringblackoverlay是否展示遮罩層booleantrueoverlay-class v2.2.7自定義遮罩層類名string-overlay-style v2.2.7自定義遮罩層樣式object-close-on-popstate v2.0.5是否在頁面回退時自動關(guān)閉booleanfalseclose-on-click-overlay是否在點(diǎn)擊遮罩層后關(guān)閉彈窗booleanfalselazy-render是否在顯示彈層時才渲染節(jié)點(diǎn)booleantruelock-scroll是否鎖定背景滾動booleantrueallow-html v2.8.7是否允許 message 內(nèi)容中渲染 HTMLbooleantruebefore-close關(guān)閉前的回調(diào)函數(shù)，
調(diào)用 done() 后關(guān)閉彈窗，
調(diào)用 done(false) 阻止彈窗關(guān)閉(action, done) => void-transition v2.2.6動畫類名，等價于 transtion 的name屬性string-get-container指定掛載的節(jié)點(diǎn)，用法示例string | () => Element-

Events

通過組件調(diào)用 Dialog 時，支持以下事件：

事件說明回調(diào)參數(shù)confirm點(diǎn)擊確認(rèn)按鈕時觸發(fā)-cancel點(diǎn)擊取消按鈕時觸發(fā)-open打開彈窗時觸發(fā)-close關(guān)閉彈窗時觸發(fā)-opened打開彈窗且動畫結(jié)束后觸發(fā)-closed關(guān)閉彈窗且動畫結(jié)束后觸發(fā)-

Slots

通過組件調(diào)用 Dialog 時，支持以下插槽：

名稱說明default自定義內(nèi)容title自定義標(biāo)題