Vue.js遮罩层和弹窗同时显示的实现方法

<p>想要让遮罩层和弹窗一起出现，可以将它们放在同一个父容器中，并使用条件渲染来控制它们的显示与隐藏。</p>
<pre><code>
<template>
  <div>
    <div :class="!show ? 'back back-common' : 'back-common'">
      <!-- 遮罩层内容 -->
    </div>
    <div v-if="showPopup" class="popup">
      <!-- 弹窗内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false, // 控制遮罩层的显示与隐藏
      showPopup: false, // 控制弹窗的显示与隐藏
    };
  },
  methods: {
    closePopup() {
      // 关闭弹窗
      this.showPopup = false;
    },
  },
};
</script>
<p></code></pre></p>
<p>在上面的代码中，遮罩层和弹窗都被包裹在同一个父容器 `<div>` 中。通过给遮罩层和弹窗的外层 `<div>` 添加相同的类名，可以保证它们一起出现。使用条件渲染（`v-if`）来控制弹窗的显示与隐藏，在点击确定按钮时调用 `closePopup` 方法来关闭弹窗。</p>