vue中超简单的方法实现点击一个按钮出现弹框，点击弹框外关闭弹框

在Vue中实现点击按钮弹出弹框的方法很简单，可以使用Vue中的v-if指令来控制弹框的显示和隐藏。具体实现步骤如下：

1.在data中定义一个变量来控制弹框的显示和隐藏：

data() {
  return {
    isShowDialog: false
  }
}

2.在模板中添加一个按钮，用于控制弹框的显示和隐藏：

<button @click="isShowDialog = true">点击弹出弹框</button>

3.在模板中添加一个弹框组件，并使用v-if指令根据isShowDialog的值来控制弹框的显示和隐藏：

<template>
  <div>
    <button @click="isShowDialog = true">点击弹出弹框</button>
    <div v-if="isShowDialog" class="dialog">
      <div class="dialog-content">
        弹框内容
      </div>
      <div class="dialog-mask" @click="isShowDialog = false"></div>
    </div>
  </div>
</template>

4.添加一个点击弹框外部关闭弹框的遮罩层，当遮罩层被点击时，将isShowDialog设置为false，从而关闭弹框。

<template>
  <div>
    <button @click="isShowDialog = true">点击弹出弹框</button>
    <div v-if="isShowDialog" class="dialog">
      <div class="dialog-content">
        弹框内容
      </div>
      <div class="dialog-mask" @click="isShowDialog = false"></div>
    </div>
  </div>
</template>

<style>
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  background-color: #fff;
  padding: 20px;
}

.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>

这样，就可以实现点击按钮弹出弹框，并且点击弹框外部可以关闭弹框的功能了。