今天写了几个弹窗组建,因为ui样式原因没有用 组件库 自己手写了几个弹窗
自带遮罩层(防止出现多个弹窗和误触)
实现代码
<template>
<div class='mask'>
弹窗内容
</div>
</template>
<style>
.mask{
width: 100%;
height: 100%;
position: fixed;
bottom: 0;
left: 0;
//这个可加可不加,看情况
//z-index: 998;
}
</style>
按下esc退出弹窗 (想着组件库有我也想要有)
- onkeydown 键盘按下时发生
- onkeypress 键盘按键被按下并释放一个键时发生
- onkeyup 键盘弹起时发生
mounted() {
var that = this
// 监听键盘事件 按下esc键退出弹窗 27就是esc键的键值
document.onkeydown = function(e) {
console.log(e.which)
if(e.which === 27){
//关闭弹窗方法
that.close()
}
};
},