vue实现点击一个按钮出现弹框，点击弹框外关闭弹框

#vue实现点击一个按钮出现弹框，点击弹框外关闭弹框| 来源: 网络整理| 查看: 265

View层：

点击出现弹框点击出现弹框

数据层：

export default { data() { return { showModal: false }; } };

样式层：

.mask { background-color: #000; opacity: 0.3; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1 } .pop { background-color: #fff; position: fixed; top: 100px; left: 300px; width: calc(100% - 600px); height:calc(100% - 200px); z-index: 2 } .btn { background-color: #fff; border-radius: 4px; border: 1px solid blue; padding: 4px 12px; }

关键点：mask层的层级（z-index）要比弹出的pop的层级低。

完整代码：

点击出现弹框点击出现弹框 export default { data() { return { showModal: false }; } }; .mask { background-color: #000; opacity: 0.3; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1 } .pop { background-color: #fff; position: fixed; top: 100px; left: 300px; width: calc(100% - 600px); height:calc(100% - 200px); z-index: 2 } .btn { background-color: #fff; border-radius: 4px; border: 1px solid blue; padding: 4px 12px; }

扩展：按钮在父组件，弹框是一个子组件，会涉及到父子组件之间的传值。

【本文地址】

公司简介

联系我们