vue弹窗单独提出来

如果你想将Vue弹窗组件单独提出来，可以按照以下步骤进行操作：

1. 创建弹窗组件

首先，你需要创建一个Vue弹窗组件，可以参考以下代码：

<template>
  <div class="modal">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  mounted() {
    document.body.classList.add('modal-open');
  },
  beforeDestroy() {
    document.body.classList.remove('modal-open');
  }
}
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

2. 在 main.js 中注册弹窗组件

然后，在 main.js 文件中注册弹窗组件，可以参考以下代码：

import Vue from 'vue'
import App from './App.vue'
import Modal from './components/Modal.vue'

Vue.component('Modal', Modal)

new Vue({
  render: h => h(App),
}).$mount('#app')

3. 在需要使用弹窗的组件中使用 Modal 组件

最后，在需要使用弹窗的组件中使用 Modal 组件，可以参考以下代码：

<template>
  <div>
    <button @click="showModal = true">显示弹窗</button>
    <Modal v-if="showModal">
      <h2>弹窗标题</h2>
      <p>弹窗内容</p>
      <button @click="showModal = false">关闭弹窗</button>
    </Modal>
  </div>
</template>

<script>
import Modal from './Modal.vue'

export default {
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    }
  }
}
</script>

这样，你就可以将Vue弹窗组件单独提出来，并在需要使用弹窗的组件中使用它了。