【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 !

相关推荐
一头小鹿1 分钟前
Vue 和 React中的状态管理机制
vue.js·react.js
jqq6662 分钟前
Vue3脚手架实现(七、渲染eslint配置)
前端·javascript·vue.js
Mintopia3 分钟前
BVH:光线追踪里的空间管家
前端·javascript·计算机图形学
Mintopia9 分钟前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学
掘金安东尼28 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~30 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务33 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛33 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑36 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭43 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite