Vue封装一个弹窗组件

在Vue中，可以通过创建一个组件来封装弹窗功能。以下是一个简单的弹窗组件示例：

<template>
  <div class="modal" v-if="isVisible">
    <div class="modal-content">
      <header class="modal-header">
        <slot name="header">默认标题</slot>
      </header>
      <main class="modal-body">
        <slot>默认内容</slot>
      </main>
      <footer class="modal-footer">
        <button @click="closeModal">关闭</button>
      </footer>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isVisible: false,
    };
  },
  methods: {
    openModal() {
      this.isVisible = true;
    },
    closeModal() {
      this.isVisible = false;
    },
  },
};
</script>
 
<style scoped>
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  min-width: 300px;
}
 
.modal-header, .modal-footer {
  padding: 10px 0;
  text-align: right;
}
 
.modal-body {
  padding: 20px 0;
}
</style>

使用该组件时，可以通过以下方式调用：

<template>
  <div id="app">
    <button @click="showModal">打开弹窗</button>
    <modal-component ref="modal">
      <!-- 自定义标题 -->
      <template slot="header">自定义标题</template>
      <!-- 自定义内容 -->
      <p>这是一个自定义内容的弹窗。</p>
    </modal-component>
  </div>
</template>
 
<script>
import ModalComponent from './components/ModalComponent.vue';
 
export default {
  components: {
    ModalComponent
  },
  methods: {
    showModal() {
      this.$refs.modal.openModal();
    }
  }
};
</script>

在这个例子中，ModalComponent是一个封装了弹窗逻辑的组件，它有打开和关闭弹窗的方法。父组件通过ref属性引用弹窗组件，并通过openModal方法打开弹窗。通过插槽，可以方便地在弹窗中插入自定义的标题和内容。