大道至简：封装一个简约实用的 Vue 公共弹窗组件

2024-02-13 12:08:58

在构建现代化的 web 应用时，弹窗组件是必不可少的 UI 元素之一。它们被广泛用于显示通知、确认信息、收集用户输入等等。如果每个弹窗都需要从头开始构建，那将是一项繁琐且容易出错的任务。因此，封装一个可复用、灵活的 Vue 公共弹窗组件就显得尤为重要。

我们先来分析一下一个理想的 Vue 公共弹窗组件应该具备哪些特性。首先，它应该易于使用，开发者只需要简单的几行代码就能调用弹窗，并传入必要的参数，例如弹窗的标题、内容、尺寸等等。其次，它应该具备高度的灵活性，可以根据不同的场景进行定制化，例如修改弹窗的样式、添加自定义按钮等等。最后，它应该与 Vue 的响应式系统完美结合，方便开发者进行数据绑定和事件处理。

为了实现以上目标，我们可以采用 Vue 的组件化开发模式，将弹窗组件拆分成多个独立的子组件，每个子组件负责不同的功能。例如，我们可以将弹窗的布局、样式、逻辑分别封装到不同的组件中，这样可以提高代码的可读性和可维护性。

下面，我们来一步步实现一个简单的 Vue 公共弹窗组件。

首先，我们创建一个名为 Modal.vue 的组件，用于展示弹窗的 UI：

<template>
  <div v-if="visible" class="modal-overlay">
    <div class="modal-content">
      <div class="modal-header">
        <slot name="header">
          <h3 class="modal-title">{{ title }}</h3>
        </slot>
        <button class="modal-close" @click="close">×</button>
      </div>
      <div class="modal-body">
        <slot />
      </div>
      <div class="modal-footer">
        <slot name="footer">
          <button class="modal-button" @click="close">关闭</button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '提示'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      this.$emit('close');
    }
  }
};
</script>

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

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.modal-title {
  margin: 0;
}

.modal-close {
  border: none;
  background-color: transparent;
  font-size: 20px;
  cursor: pointer;
}

.modal-footer {
  text-align: right;
}

.modal-button {
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}
</style>

这个组件接收两个 props：title 和 visible。title 用于设置弹窗的标题，visible 用于控制弹窗的显示和隐藏。组件内部使用了三个 slot：header、default 和 footer，分别用于自定义弹窗的头部、内容和底部。

接下来，我们创建一个名为 ModalService.js 的服务类，用于管理弹窗的显示和隐藏：

import Vue from 'vue';
import Modal from './Modal.vue';

const ModalConstructor = Vue.extend(Modal);

let instance = null;

const ModalService = {
  open(options) {
    if (instance) {
      instance.visible = false;
      instance.$destroy();
    }

    instance = new ModalConstructor({
      propsData: options
    });

    instance.$mount();
    document.body.appendChild(instance.$el);
    instance.visible = true;

    return instance;
  },
  close() {
    if (instance) {
      instance.visible = false;
      instance.$destroy();
      instance = null;
    }
  }
};

export default ModalService;

这个服务类使用 Vue.extend 创建了一个 Modal 组件的构造函数，然后通过 new 操作符创建了一个 Modal 组件的实例。最后，将实例挂载到 document.body 上，并设置 visible 属性为 true，从而显示弹窗。

现在，我们可以在任何组件中使用 ModalService 来打开弹窗了：

<template>
  <div>
    <button @click="openModal">打开弹窗</button>
  </div>
</template>

<script>
import ModalService from './ModalService.js';

export default {
  methods: {
    openModal() {
      ModalService.open({
        title: '自定义标题',
        // 使用 default slot 传递弹窗内容
        scopedSlots: {
          default: () => {
            return '这是弹窗的内容';
          }
        }
      });
    }
  }
};
</script>