vue点击空白处弹出框取消

对于这个问题，我可以提供以下代码示例作为参考：

首先，在 HTML 中，我们需要添加一个覆盖整个页面的半透明遮罩层和一个弹出框：

<div class="mask" v-if="showModal" @click="hideModal"></div>
<div class="modal" v-if="showModal">
  <h2>确认弹出框</h2>
  <p>是否要取消？</p>
  <button @click="hideModal">取消</button>
  <button @click="confirm">确定</button>
</div>

其中，`showModal` 是一个布尔值，表示弹出框是否显示。当点击空白处或取消按钮时，我们需要将 `showModal` 设为 `false`，即隐藏弹出框。当点击确定按钮时，执行 `confirm` 方法。

接下来，在 Vue 的实例中定义相关的数据和方法：

data: {
  showModal: false,
},
methods: {
  showModal() {
    this.showModal = true;
  },
  hideModal() {
    this.showModal = false;
  },
  confirm() {
    // 在这里执行确认操作
    this.hideModal();
  },
},

在 `showModal` 方法中，我们将 `showModal` 设为 `true`，即显示弹出框。在 `hideModal` 方法中，将 `showModal` 设为 `false`，即隐藏弹出框。在 `confirm` 方法中，可以执行确认操作，并在操作完成后调用 `hideModal` 方法，隐藏弹出框。

最后，在 CSS 文件中添加样式，实现半透明遮罩层和弹出框的样式：

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  z-index: 1000;
}

这样，就完成了一个简单的 Vue 点击空白处弹出框取消的实现。