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

相关推荐
Rubin932 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子2 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598243 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug5 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo5 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢29 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机34 分钟前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler28137 分钟前
解决setTimeout/setInterval计时不准确问题的方案
前端
sophie旭1 小时前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读
蓝易云1 小时前
Qt框架中connect()方法的ConnectionType参数使用说明 点击改变文章字体大小
linux·前端·后端