vue2点击后弹出页面，背景变暗

这个效果可以通过 Vue.js 结合 CSS 实现。你可以在点击事件中添加一个类，使背景颜色变暗，并弹出一个新的页面或模态框。

首先，你可以在 HTML 中添加一个遮罩层，用来遮挡整个页面，并设置其初始状态为隐藏：

<div class="mask" :class="{active: showMask}" @click="closeMask"></div>

其中，`:class="{active: showMask}"` 表示根据 `showMask` 变量动态设置 `mask` 的 `active` 类是否生效。`@click="closeMask"` 表示当用户点击遮罩层时，执行关闭遮罩层的方法。

接着，在 `data` 中定义 `showMask` 变量，并在点击事件中将其设置为 `true`，表示显示遮罩层：

data() {
  return {
    showMask: false
  }
},
methods: {
  openMask() {
    this.showMask = true;
    // 弹出页面或模态框的代码
  },
  closeMask() {
    this.showMask = false;
    // 关闭页面或模态框的代码
  }
}

最后，在 CSS 中定义 `mask` 类和 `active` 类，实现背景变暗的效果：

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mask.active {
  opacity: 1;
  visibility: visible;
}

这样，当用户点击需要弹出页面或模态框的元素时，就会触发 `openMask` 方法，显示遮罩层并弹出新页面或模态框。而当用户点击遮罩层时，就会触发 `closeMask` 方法，关闭页面或模态框并隐藏遮罩层。