前言
在平常的uniapp跨端开发中,我们可能不会引入ui框架,如果手写一个弹框,则需要每次设置css样式,比较麻烦。本文带大家了解下,原生dialog对话框的使用。
1. 原生dialog元素介绍
原生dialog元素表示一个对话框或其他交互式组件,例如一个可关闭警告、检查器或者窗口。
1.1 属性
除了常规属性,还有一个自身的特殊属性:
-
open
:对话框默认打开方式,设置了open则是显示。当没有设置open
属性时,对话框不应该 显示给用户。推荐使用.show()
或.showModal()
方法来渲染对话框,而不是使用open
属性。 -
returnValue:
close
方法还支持接收一个参数,这个参数被赋值给 dialog.returnValue。
javascript
<button onclick="dialog.close('ok')">关闭</button>
dialogRef.addEventListener('close',function(){
console.log('close', dialogRef.returnValue); // ok
})
1.2 方法
- close: 关闭对话框
- show/showModal 打开对话框/模态框
show
和 showModal
的区别是,show 只是 dialog 让元素可见(相当于设置 open=true
),showModal 则会让 dialog 呈现模态效果,需要将模态框关闭之后才能和页面上其他元素交互。
具体实现上,当点击 showModal
时,浏览器会在 dialog
内部增加 ::backdrop
伪元素。
1.3 事件
cancel
:在模态框展示时按下Esc
按键,那么模态框将自动关闭,并触发cancel
和close
事件close
:则是在每次dialog
元素由open=true
变为open=false
时触发,即调用close方法时触发
1.4 dialog 样式
当使用showModal
方法被调用时,dialog 内会插入伪元素 backdrop
,并且应用 position: fixed
。而 dialog
元素本身的样式则是通过另一个伪类选择器 :modal
。
- dialog 元素自身的样式:可以控制
dialog
的背景颜色、边框、位置等。 - dialog::backdrop,当
dialog
激活并且显示遮罩层的时候,控制遮罩层的样式。
注意:模态框拥有最高层级,不是使用z-index进行控制的
2. dialog使用
2.1 基本使用
xml
<style>
dialog:modal{
border: 1px solid pink;
}
dialog:modal::backdrop{
background-color: #333;
}
</style>
<button onclick="dialog.show()">打开</button>
<button onclick="dialog.showModal()">打开模态框</button>
<button onclick="dialog.close('ok')">关闭</button>
<!-- 系统级别弹框 -->
<dialog id="dialog">
这是一个弹框
<button onclick="dialog.close()">关闭</button>
</dialog>
const dialogRef = document.getElementById('dialog')
dialogRef.addEventListener('cancel',function(){
console.log('cancel');
})
dialogRef.addEventListener('close',function(){
console.log('close', dialogRef.returnValue);
})
2.2 支持 maskClosable
css
dialog:modal{
padding: 0;
border: 1px solid pink;
}
.content {
padding: 1rem;
}
<dialog id="dialog">
<div class="content">
这是一个弹框
<button onclick="dialog.close()">关闭</button>
</div>
</dialog>
可以像框架一样,定义一个closable属性
ini
document.querySelectorAll("dialog[closable]").forEach(dialog => {
dialog.onclick = function(event) {
if(event.target.tagName.toLowerCase() == "dialog") this.close();
}
});
2.3 添加弹框动画
以添加动画为例:
css
#dialog {
animation: slideDown 0.2s ease;
}
@keyframes slideDown {
from {
transform: translateY(-100px);
}
to {
transform: translateY(0);
}
}
这样就为弹框添加了一个动画效果。
3. 兼容性问题
dialog兼容性问题不大,如果不兼容,可以使用polyfill进行兼容。官方的dialog-polyfill
总结
最后总结一下:
在开发中,引入原生dialog对话框可以简化弹框的实现,减少CSS设置的麻烦。原生dialog具有open
属性、close
和show/showModal
方法,以及cancel
和close
事件。使用showModal
方法可以生成模态效果,并插入backdrop
伪元素。对话框样式和遮罩层样式可以通过伪类选择器控制。通过自定义属性和动画,增强对话框的功能和视觉效果。如果遇到兼容性问题,可以使用官方的dialog-polyfill解决。
如有错误,请指正O^O!