【27-vue3】vue3版本的"指令式弹窗"逻辑函数createModal-bysking

背景

一般基于Element-plus的弹窗是声明式子,的需要写在template里面,不太方便,本次咱们直接实现一个指令式调用的弹窗函数

使用示例

js 复制代码
<script lang="ts" setup>
import { ref } from 'vue';

import { ElButton } from 'element-plus';

import { createModalApi } from './tool';

const counter = ref(0);

const openModal = () => {
  /** 创建并显示弹窗 */
  const { close, updateProps } = createModalApi(
    ElButton, // 弹窗组件
    {
      // 组件透传参数
      type: 'default',
      onClick: () => {
        close();
      },
    },
    {
      default: () => `关闭:${counter.value}`,
    },
  );

  // 模拟更新弹窗参数
  setTimeout(() => {
    updateProps({
      modelValue: false,
    });
  }, 3000);
};

const start = () => {
  setInterval(() => {
    counter.value++;
  }, 1000);
};
</script>

<template>
  <ElButton class="mb-4" type="primary" @click="openModal"> 打开弹窗 </ElButton>
  <ElButton class="mb-4" type="primary" @click="start">
    点击计数器: {{ counter }}
  </ElButton>
</template>
<style lang="scss" scoped></style>

函数代码参考

jsx 复制代码
import type { App, Component, Slot } from 'vue';

import { createApp, h, reactive } from 'vue';

import { ElDialog } from 'element-plus';

type InternalSlots = Record<string, Slot>;
/** 创建一个弹窗挂载点 */
const createMountRoot = () => {
  const el = document.createElement('span');
  const randomStr = `${Math.random()}`;
  el.setAttribute('id', randomStr);
  el.style.position = 'fixed';
  el.style.overflow = 'hidden';
  return el;
};

export const createModal = (
  component: Component,
  props: Record<string, any> = {},
  slots: InternalSlots = {},
) => {
  /** 弹窗实例 */
  let modalInstance = null;
  /** 弹窗容器vue实例 */
  let vueInstance: App<Element> | null = null;

  // 使用 reactive 包裹 props,使其具备响应性
  const modalProps = reactive({ modelValue: true });

  const onClose = () => {
    mountRoot?.remove();
    vueInstance?.unmount();
  };

  modalInstance = h(
    ElDialog,
    {
      lockScroll: false,
      ...modalProps,
      onClose: () => {
        onClose();
      },
    },
    [
      h(
        component,
        {
          ...props,
        },
        {
          ...slots,
        },
      ),
    ],
  );

  const mountRoot = createMountRoot();
  document.body.append(mountRoot);

  vueInstance = createApp({
    render: () => modalInstance,
  });

  vueInstance.mount(mountRoot);

  return {
    close: onClose,
    updateProps: (newProps: Record<string, any>) => {
      if (!modalInstance.component) {
        return;
      }
      Object.assign(modalInstance.component.props, newProps);
    },
  };
};

有帮助记得一键三连 thanks !

相关推荐
玲小珑2 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了3 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆9 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆15 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan18 分钟前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程27 分钟前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea8 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴10 小时前
Mix
前端·webgl