Vue项目封装函数式弹窗类组件

Vue2实现步骤

步骤1：创建弹窗组件

首先，创建一个名为 GlobalModal.vue 的组件。这个组件将包含弹窗的模板、样式和逻辑。

步骤2：创建全局弹窗管理器

接下来，你需要一个全局管理器来控制弹窗的显示和隐藏。这可以通过创建一个Vue插件或直接在Vue实例上挂载一个对象来实现。

// src/plugins/globalModal.js
import GlobalModal from '@/components/GlobalModal.vue';

const GlobalModalManager = {
  install(Vue, options = {}) {
    // 创建一个Vue实例来挂载GlobalModal组件
    const ModalConstructor = Vue.extend(GlobalModal);
    const instance = new ModalConstructor();
    instance.$mount();
    document.body.appendChild(instance.$el);

    // 将实例挂载到Vue原型上，以便全局访问
    Vue.prototype.$globalModal = {
      show(props = {}) {
        instance.open(props);
      },
      hide() {
        instance.close();
      },
    };
  },
};

export default GlobalModalManager;

步骤3：在Vue实例中使用全局弹窗管理器

在你的Vue项目入口文件（通常是 main.js 或 main.ts）中，安装这个插件。

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import GlobalModalManager from './plugins/globalModal';

Vue.config.productionTip = false;

Vue.use(GlobalModalManager);

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

Vue3实现步骤

在Vue 3中，实现全局弹窗的方式与Vue 2有所不同，因为Vue 3引入了Composition API和全局API的变更。以下是一个Vue 3中实现全局弹窗的示例。

步骤1：创建弹窗组件

首先，创建一个名为GlobalModal.vue的组件，这个组件将包含弹窗的模板、样式和逻辑。与Vue 2类似，但可能会使用Composition API。

步骤2：创建全局弹窗管理器

1. 创建一个单例模式的管理器类来管理弹窗实例。
2. 在Vue应用创建时，将这个管理器实例设置为全局属性。

// src/utils/globalModalManager.js
import { reactive, onMounted, onBeforeUnmount } from 'vue';
import GlobalModal from '@/components/GlobalModal.vue';

class GlobalModalManager {
  constructor() {
    this.state = reactive({
      visible: false,
      props: {},
    });
    this.modalInstance = null;
  }

  install(app) {
    // 创建一个Vue实例来挂载GlobalModal组件
    const ModalConstructor = app.component('GlobalModal', GlobalModal);
    this.modalInstance = new ModalConstructor();
    this.modalInstance.$mount();
    document.body.appendChild(this.modalInstance.$el);
    
    // 将实例挂载到Vue全局属性上，以便全局访问
    app.config.globalProperties.$globalModal = this;

    onMounted(() => {
      // 可以在这里添加其他挂载时的逻辑
    });

    onBeforeUnmount(() => {
      // 清理逻辑，比如移除事件监听器等
      document.body.removeChild(this.modalInstance.$el);
      this.modalInstance.$destroy();
    });
  }

  show(props = {}) {
    this.state.visible = true;
    this.state.props = props;
    // 更新弹窗内容（这里需要一些额外的逻辑来将props传递给弹窗组件）
    // 注意：由于我们直接挂载了GlobalModal组件，这里没有直接将props传递给它。
    // 在实际应用中，你可能需要创建一个更复杂的系统来传递这些props。
    // 一个简单的方法是使用Vuex或Pinia等状态管理库，或者通过事件总线来传递数据。
    // 在这个示例中，我们假设GlobalModal组件内部会处理这些props（尽管在代码中并没有体现）。
  }

  hide() {
    this.state.visible = false;
  }
}

export const globalModalManager = new GlobalModalManager();