vue封装一个弹窗组件

好的，下面是一个基本的弹窗组件封装代码。代码中使用的是Element UI库中的Dialog组件，你可以根据自己的需求进行修改和定制。

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :modal="modal"
    :width="width"
    :fullscreen="fullscreen"
    :lock-scroll="lockScroll"
    :custom-class="customClass"
    :show-close="showClose"
    :before-close="beforeClose"
  >
    <slot></slot>
  </el-dialog>
</template>

<script>
  export default {
    name: 'MyDialog',
    props: {
      title: {  // 弹窗标题
        type: String,
        default: ''
      },
      visible: {  // 是否显示弹窗
        type: Boolean,
        default: false
      },
      modal: {  // 是否为模态弹窗
        type: Boolean,
        default: true
      },
      width: {  // 弹窗宽度
        type: String,
        default: '50%'
      },
      fullscreen: {  // 是否全屏显示
        type: Boolean,
        default: false
      },
      lockScroll: {  // 是否锁定滚动条
        type: Boolean,
        default: true
      },
      customClass: {  // 自定义类名
        type: String,
        default: ''
      },
      showClose: {  // 是否显示关闭按钮
        type: Boolean,
        default: true
      },
      beforeClose: {  // 关闭前的回调函数
        type: Function,
        default: () => {}
      }
    }
  }
</script>

这是一个非常基础的弹窗组件，你可以根据自己的需求进行扩展和修改。在使用时，你需要在父组件中引入该组件，并使用v-model绑定visible属性来控制弹窗的显示和隐藏状态。

<template>
  <div>
    <el-button @click="visible = true">打开弹窗</el-button>
    <my-dialog v-model="visible" title="弹窗标题">
      <p>这是弹窗内容</p>
    </my-dialog>
  </div>
</template>

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

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