Vue3手撸全局弹窗方案

主要实现思路

Teleport 实现弹窗组件在body渲染

provide + inject 实现全局可调用

实现步骤

第一步

先封装一个弹窗提示的组件，然后把打开和关闭的方法暴露出去

// notify.vue
<template>
<!-- 用瞬移组件挂载到body -->
  <Teleport to="body">
    <transition name="notify-fade">
      <div class="tips" v-if="visible">
        <!-- 弹窗内容 -->
        </div>
      </div>
    </transition>
  </Teleport>
</template>
<script setup lang="ts">
// 这里可以根据个人所需写一些配置，title，content，按钮点击的callback函数之类的

let visible: any = ref(false);

const close = function(): void {
  visible.value = false;
};

const open = (opt: Option): void => {
  option.value = {
    ...option.value,
    ...opt
  };
  visible.value = true;
};

defineExpose({
  open,
  close
});
</script>

第二步

App.vue上引入并使用notify组件，用provide注入notify的方法

<notify ref="n" />

<script setup lang="ts">

const n: Ref<any> = ref(null);

provide('confirm', () => {
  n.value.open({ title: '提示', msg: 'hello'});
});
</script>

第三步

页面上调用，用inject接收注入到App.vue上的confirm

import { inject } from 'vue';
const confirm = inject('confirm');
confirm();

效果