vue弹框咋写啊

在 Vue.js 中使用弹出框，你可以使用第三方库或者手写一个弹出框组件。

下面是使用第三方库的方法：

1. 安装第三方库，例如 vue-js-modal：

npminstall vue-js-modal

2. 在你的 Vue 组件中引入第三方库并注册：

import VModal from 'vue-js-modal'

export default {
  name: 'MyComponent',
  // ...
  components: {
    'modal': VModal
  },
  // ...
}

3. 在你的模板中使用第三方库提供的组件：

<template>
  <div>
    <modal name="my-modal" ref="myModal">
      <p>This is the modal content</p>
    </modal>
  </div>
</template>

4. 在你的组件中使用第三方库提供的方法来控制弹出框的显示与隐藏：

export default {
  name: 'MyComponent',
  // ...
  methods: {
    openModal() {
      this.$refs.myModal.show()
    },
    closeModal() {
      this.$refs.myModal.hide()
    }
  }
  // ...
}

下面是手写一个弹出框组件的方法：

1. 创建一个 Vue 组件，并在模板中使用一个遮罩层和一个弹出框的容器元素：

<template>
  <div class="modal-overlay" v-if="visible">
    <div class="modal-container">
      <slot></slot>
    </div>
  </div>
</template>

2. 在组件的数据中声明一个变量用来控制遮罩层和弹出框容器的显示与隐藏：

``` export default { name: 'Modal', // ... data() { return {