整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
lement Plus 的 Dialog 組件默認情況下，點擊遮罩層（即背景蒙版）會關閉對話框。然而，你可以通過修改組件的 close-on-click-modal 屬性來改變這個行為。
如果你想要實現點擊遮罩層不關閉 Dialog，你需要將 close-on-click-modal 屬性設置為 false。這可以在組件的局部設置中進行，也可以全局配置。
在 Dialog 組件的模板中，直接添加 :close-on-click-modal="false"：
<el-dialog
:visible.sync="dialogVisible"
:close-on-click-modal="false"
width="50%">
<!-- 對話框內容 -->
</el-dialog>如果你希望所有 Dialog 組件都默認擁有這個行為，你可以通過全局配置來實現。在 Vue 應用的入口文件（通常是 main.js 或 main.ts）中，配置 Element Plus 并修改 ElDialog 組件的默認屬性：
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 組件，使得點擊遮罩層不關閉彈窗
app.config.globalProperties.$ELEMENT = {
size: 'small', // 其他全局配置...
zIndex: 3000 // 其他全局配置...
};
// 修改 ElDialog 組件的 closeOnClickModal 屬性的默認值
app._context.components.ElDialog.props.closeOnClickModal.default = false;
app.mount('#app');請注意，直接修改 app._context.components.ElDialog.props.closeOnClickModal.default 并不是官方推薦的做法，因為這涉及到對 Vue 內部狀態的直接操作，未來 Vue 或 Element Plus 的更新可能會導致此方法失效。不過，在 Element Plus 的當前版本中，這是一個可行的方法。
更好的方式是使用 Element Plus 的自定義主題功能或者等待 Element Plus 官方提供更為正式的全局配置 API。同時，也要關注 Element Plus 的更新日志，以便及時調整你的代碼。
如果你發現你的 Dialog 組件在設置了 close-on-click-modal="false" 后仍然會在點擊遮罩層時關閉，可能是因為你的項目中存在其他代碼或插件影響了這個行為。這時，你需要檢查你的項目代碼，確保沒有其他地方在修改這個屬性，或者查看是否有其他事件監聽器在監聽遮罩層的點擊事件并觸發了關閉操作。
文由掘金@天行天忌授權發布，前端晚間課對其內容進行微改。
HTML，超文本標記語言，是一種用于創建網頁的標準標記語言。自從引入 HTML 以來，它就一直用于構建互聯網。與 JavaScript 和 CSS 一起，HTML 構成前端開發的三劍客。
盡管許多新技術使網站創建過程變得更簡單、更高效，但 HTML 始終是核心。隨著 HTML5 的普及，在 2014 年，這種標記語言發生了很多變化，變得更加友好，瀏覽器對新標準的支持熱度也越來越高。而HTML并不止于此，還在不斷發生變化，并且可能會獲得一些特性來證明對 HTML6 的命名更改是合理的。
該元素<dialog> 將隨 HTML6 一起提供。它被認為等同于用 JavaScript 開發的模態，并且已經標準化，但只有少數瀏覽器完全支持。但這種現象會改變，很快它將在所有瀏覽器中得到支持。
這個元素在其默認格式下，只會將光標顯示在它所在的位置上，但可以使用 JavaScript 打開模式。
<dialog>
<form method="dialog">
<input type="submit" value="確定" />
<input type="submit" value="取消" />
</form>
</dialog>在默認形式下，該元素創建一個灰色背景，其下方是非交互式內容。
可以在 <dialog> 其中的表單上使用一種方法，該方法將發送值并將其傳遞回自身 <dialog>。
總的來說，這個標簽在用戶交互和改進的界面中變得有益。
可以通過更改 <dialog> 標簽的 open 屬性以控制打開和關閉。
<dialog open>
<p>組件內容</p>
</dialog>FutureClaw 雜志主編 Bobby Mozumder 建議：
將錨元素鏈接到 JSON/XML、API 端點，讓瀏覽器在內部將數據加載到新的數據結構中，然后瀏覽器將 DOM 元素替換為根據需要加載的任何數據。初始數據（以及標準錯誤響應）可以放在標題裝置中，如果需要，可以稍后替換。
據他介紹，這是單頁應用程序網頁設計模式，可以提高響應速度和加載時間，因為不需要加載 JavaScript。
這個是一個比較有意思的提案，就有點類似我們以前沒有做前后端分離之前的混合編程的模式，HTML變成模板語言，通過JSON API請求數據，不一樣的是變成瀏覽器來默認解析，瀏覽器內部加載數據到新的數據結構中，然后瀏覽器將按需加載到的數據替換成 DOM 元素。
大家可以看一下InfoQ上的這篇文章《針對非正式 HTML6 提案“無需 JavaScript 的單頁應用”引發的論戰》，了解更多！
https://www.infoq.cn/article/2015/03/html6-without-javascript
HTML6 愛好者相信即將到來的更新將允許瀏覽器調整圖像大小以獲得更好的觀看體驗。
每個瀏覽器都難以呈現相對于設備和屏幕尺寸的最佳圖像尺寸，不幸的是，src 標簽 img 在處理這個問題時不是很有效。
這個問題可以通過一個新標簽 <srcset> 來解決，它使瀏覽器在多個圖像之間進行選擇的工作變得更加容易。
將可用庫引入 HTML6 絕對是提高開發效率的重要一步。
很多時候，需要在互聯網上定義一般信息，而這些一般信息可以是任何公開的信息，例如電話號碼、姓名、地址等。微格式是能夠定義一般數據的標準。微格式可以增強設計者的能力，并可以減少搜索引擎推斷公共信息所需的努力。
盡管標簽<ul>、<ol>非常有用，但在某些情況下仍有一些不足之處。可以處理交互元素的標簽將是一個不錯的選擇。
這就是創建標簽 <menu> 的驅動力，它可以處理按鈕驅動的列表元素。
<menu type="toolbar">
<li><button>個人信息</button></li>
<li><button>系統設置</button></li>
<li><button>賬號注銷</button></li>
</menu>因此 <menu>，除了能夠像普通列表一樣運行之外，還可以增強 HTML 列表的功能。
雖然HTML5在安全性方面還不錯，瀏覽器和網絡技術也提供了合理的保護。毫無疑問，在身份驗證和安全領域還有很多事情可以做。如密鑰可以異地存儲；這將防止不受歡迎的人訪問并支持身份驗證。使用嵌入式密鑰而不是 cookie，使數字簽名更好等。
HTML6 允許以更好的方式使用設備上的相機和媒體。將能夠控制相機、它的效果、模式、全景圖像、HDR 和其他屬性。
沒有什么是完美的，HTML 也不是完美的，所以 HTML 規范可以做很多事情來使它更好。應該對一些有用的規范進行標準化，以增強 HTML 的能力。小的變化已經開始推出。如增強藍牙支持、p2p 文件傳輸、惡意軟件保護、云存儲集成，下一個 HTML 版本可以考慮一下。
彈出模態框，常用于消息提示、消息確認，或在當前頁面內完成特定的交互操作。
彈出框組件支持函數調用和組件調用兩種方式。
Dialog 是一個函數，調用后會直接在頁面中彈出相應的模態框。
import { Dialog } from 'vant';
Dialog({ message: '提示' });
通過組件調用 Dialog 時，可以通過下面的方式進行注冊：
import Vue from 'vue';
import { Dialog } from 'vant';
// 全局注冊
Vue.use(Dialog);
// 局部注冊
export default {
components: {
[Dialog.Component.name]: Dialog.Component,
},
};
用于提示一些消息，只包含一個確認按鈕。
Dialog.alert({
title: '標題',
message: '彈窗內容',
}).then(() => {
// on close
});
Dialog.alert({
message: '彈窗內容',
}).then(() => {
// on close
});
用于確認消息，包含取消和確認按鈕。
Dialog.confirm({
title: '標題',
message: '彈窗內容',
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
通過 beforeClose 屬性可以傳入一個回調函數，在彈窗關閉前進行特定操作。
function beforeClose(action, done) {
if (action === 'confirm') {
setTimeout(done, 1000);
} else {
done();
}
}
Dialog.confirm({
title: '標題',
message: '彈窗內容',
beforeClose,
});
引入 Dialog 組件后，會自動在 Vue 的 prototype 上掛載 $dialog 方法，在所有組件內部都可以直接調用此方法。
export default {
mounted() {
this.$dialog.alert({
message: '彈窗內容',
});
},
};
如果需要在彈窗內嵌入組件或其他自定義內容，可以使用組件調用的方式。
<van-dialog v-model="show" title="標題" show-cancel-button>
<img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
</van-dialog>
export default {
data() {
return {
show: false,
};
},
};
方法名說明參數返回值Dialog展示彈窗optionsPromiseDialog.alert展示消息提示彈窗optionsPromiseDialog.confirm展示消息確認彈窗optionsPromiseDialog.setDefaultOptions修改默認配置，對所有 Dialog 生效optionsvoidDialog.resetDefaultOptions重置默認配置，對所有 Dialog 生效-voidDialog.close關閉彈窗-void
通過函數調用 Dialog 時，支持傳入以下選項：
參數說明類型默認值title標題string-width v2.2.7彈窗寬度，默認單位為pxnumber | string320pxmessage文本內容，支持通過\n換行string-messageAlign內容對齊方式，可選值為left rightstringcenterclassName自定義類名any-showConfirmButton是否展示確認按鈕booleantrueshowCancelButton是否展示取消按鈕booleanfalseconfirmButtonText確認按鈕文案string確認confirmButtonColor確認按鈕顏色string#1989facancelButtonText取消按鈕文案string取消cancelButtonColor取消按鈕顏色stringblackoverlay是否展示遮罩層booleantrueoverlayClass v2.2.7自定義遮罩層類名string-overlayStyle v2.2.7自定義遮罩層樣式object-closeOnPopstate v2.0.5是否在頁面回退時自動關閉booleanfalsecloseOnClickOverlay是否在點擊遮罩層后關閉彈窗booleanfalselockScroll是否鎖定背景滾動booleantrueallowHtml v2.8.7是否允許 message 內容中渲染 HTMLbooleantruebeforeClose關閉前的回調函數，
調用 done() 后關閉彈窗，
調用 done(false) 阻止彈窗關閉(action, done) => void-transition v2.2.6動畫類名，等價于 transtion 的name屬性string-getContainer指定掛載的節點，用法示例string | () => Elementbody
通過組件調用 Dialog 時，支持以下 Props：
參數說明類型默認值v-model是否顯示彈窗boolean-title標題string-width v2.2.7彈窗寬度，默認單位為pxnumber | string320pxmessage文本內容，支持通過\n換行string-message-align內容對齊方式，可選值為left rightstringcentershow-confirm-button是否展示確認按鈕booleantrueshow-cancel-button是否展示取消按鈕booleanfalseconfirm-button-text確認按鈕文案string確認confirm-button-color確認按鈕顏色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是否在頁面回退時自動關閉booleanfalseclose-on-click-overlay是否在點擊遮罩層后關閉彈窗booleanfalselazy-render是否在顯示彈層時才渲染節點booleantruelock-scroll是否鎖定背景滾動booleantrueallow-html v2.8.7是否允許 message 內容中渲染 HTMLbooleantruebefore-close關閉前的回調函數，
調用 done() 后關閉彈窗，
調用 done(false) 阻止彈窗關閉(action, done) => void-transition v2.2.6動畫類名，等價于 transtion 的name屬性string-get-container指定掛載的節點，用法示例string | () => Element-
通過組件調用 Dialog 時，支持以下事件：
事件說明回調參數confirm點擊確認按鈕時觸發-cancel點擊取消按鈕時觸發-open打開彈窗時觸發-close關閉彈窗時觸發-opened打開彈窗且動畫結束后觸發-closed關閉彈窗且動畫結束后觸發-
通過組件調用 Dialog 時，支持以下插槽：
名稱說明default自定義內容title自定義標題
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
