VUE实现弹出框 点击空白页弹框消失

VUE实现弹出框 点击空白页弹框消失

可以在Vue中实现弹出框然后通过点击空白页面来让弹窗隐藏。具体实现如下:

  1. 创建弹出框组件

在Vue中创建一个弹出框组件,用来呈现弹出框的内容和样式。该组件应该接受两个 props,一个是 show,表示弹出框是否显示,另一个是 onClose,表示弹出框的关闭函数。




  1. 创建父组件

在父组件中使用上述弹出框组件,同时在空白区域给document绑定点击事件,在点击非弹出框区域时关闭弹出框。




在父组件中,我们使用 v-if 指令来判断弹出框是否显示。同时,我们在 created 钩子函数中给 document 绑定了一个点击事件,用来监听页面的点击事件。在 onClickOutside 方法中,如果当前弹出框显示,并且点击的元素不是弹出框内的元素,则关闭弹出框。在 closeModal 方法中,我们将 showModal 设置为 false,用来隐藏弹出框组件。

  1. 添加样式

最后,我们为弹出框和父组件添加一些简单的样式。


以上是Vue实现弹出框点击空白页弹框消失的全部代码实现。

你可能感兴趣的:(vue.js,javascript,前端)