Vue实现弹出框点击空白页弹框消失效果
VUE实现弹出框 点击空白页弹框消失
可以在Vue中实现弹出框然后通过点击空白页面来让弹窗隐藏。具体实现如下:
创建弹出框组件
在Vue中创建一个弹出框组件,用来呈现弹出框的内容和样式。该组件应该接受两个 props,一个是 show,表示弹出框是否显示,另一个是 onClose,表示弹出框的关闭函数。
<template> <div v-if="show" class="modal"> <div class="modal-body"> <slot></slot> <button @click="onClose">关闭</button> </div> </div> </template> <script> export default { props: ['show', 'onClose'] } </script>
创建父组件
在父组件中使用上述弹出框组件,同时在空白区域给document绑定点击事件,在点击非弹出框区域时关闭弹出框。
<template> <div class="page"> <button @click="showModal = true">弹出框</button> <modal :show="showModal" :onClose="closeModal"> <p>这是弹出框的内容</p> </modal> </div> </template> <script> import Modal from './Modal.vue' export default { components: { Modal }, data() { return { showModal: false } }, created() { document.addEventListener('click', this.onClickOutside); }, beforeDestroy() { document.removeEventListener('click', this.onClickOutside); }, methods: { onClickOutside(event) { if (this.showModal && !this.$el.contains(event.target)) { this.closeModal(); } }, closeModal() { this.showModal = false } } } </script>
在父组件中,我们使用 v-if 指令来判断弹出框是否显示。同时,我们在 created 钩子函数中给 document 绑定了一个点击事件,用来监听页面的点击事件。在 onClickOutside 方法中,如果当前弹出框显示,并且点击的元素不是弹出框内的元素,则关闭弹出框。在 closeModal 方法中,我们将 showModal 设置为 false,用来隐藏弹出框组件。
添加样式
最后,我们为弹出框和父组件添加一些简单的样式。
<style> .page { height: 100vh; display: flex; justify-content: center; align-items: center; } .modal { position: absolute; top: 0; left: 0; z-index: 1000; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); } .modal-body { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; } </style>
以上是Vue实现弹出框点击空白页弹框消失的全部代码实现。
到此这篇关于VUE实现弹出框 点击空白页弹框消失的文章就介绍到这了,更多相关vue弹出框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue + element实现动态显示后台数据到options的操作方法
最近遇到一个需求需要实现selector选择器中选项值options 数据的动态显示,而非写死的数据,本文通过实例代码给大家分享实现方法,感兴趣的朋友一起看看吧2021-07-07使用vue/cli出现defineConfig is not function错误解决办法
这篇文章主要给大家介绍了关于使用vue/cli出现defineConfig is not function错误的解决办法,当我们在做打包配置的时候,出现了这个错误,需要的朋友可以参考下2023-11-11
最新评论