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

你可以使用Vue.js的组件和样式来实现这个效果。首先，你需要创建一个登录组件和一个蒙版组件。蒙版组件是用来覆盖整个页面并使其变暗的。然后在你的主页面中使用这两个组件来实现点击后弹出登录页面，背景变暗的效果。

下面是一个简单的示例代码：

<!-- App.vue -->
<template>
  <div>
    <button @click="showLogin = true">登录</button>
    <login v-if="showLogin" @close="showLogin = false"></login>
    <overlay v-if="showLogin" @click="showLogin = false"></overlay>
  </div>
</template>

<script>
import Login from './components/Login.vue'
import Overlay from './components/Overlay.vue'

export default {
  components: { Login, Overlay },
  data() {
    return {
      showLogin: false
    }
  }
}
</script>

<!-- Login.vue -->
<template>
  <div class="login">
    <h2>登录</h2>
    <!-- login form -->
    <button @click="$emit('close')">关闭</button>
  </div>
</template>

<script>
export default {
  name: 'Login'
}
</script>

<style>
.login {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: white;
  padding: 20px;
}
</style>

<!-- Overlay.vue -->
<template>
  <div class="overlay"></div>
</template>

<style>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}
</style>

以上代码中，`App.vue`是主页面，包含一个按钮和两个组件：`Login.vue`和`Overlay.vue`。当按钮被点击时，`showLogin`变量将被设置为`true`，并显示`Login.vue`和`Overlay.vue`组件。`Login.vue`是登录组件，包含一个登录表单和一个关闭按钮。`Overlay.vue`是蒙版组件，用于覆盖整个页面并使其变暗。你可以使用CSS样式来调整组件的布局和样式。

希望这可以帮助到你！