Vue自定义弹窗

DYHLJ

已于 2024-04-20 13:40:18 修改

阅读量121

点赞数 2

文章标签： vue.js javascript 前端

于 2024-04-20 13:24:32 首次发布

本文链接：https://blog.csdn.net/DYHLJ/article/details/137997072

版权

本文介绍了如何使用Vue的createApp函数，在#app元素后动态插入自定义的PromptModal弹窗组件，并提供关闭事件处理和弹窗打开的方法，如dialogOpen和openRemarkDialog，用于显示备注信息。

摘要由CSDN通过智能技术生成

import { createApp } from 'vue';
import PromptModal from './../../views/modals/prompt-modal/prompt-modal.vue'; // 自定义组件
import { h } from 'vue';

// 在#app最后一个元素后添加一个弹窗元素（自定义组件）
// options：弹窗组件的参数 component：弹窗组件 boxClassName弹窗最外层样式名称
export function insertElement(options = {}, component: any, boxClassName: string) {
  return new Promise((resolve) => {
    const container = document.createElement('div')
    container.classList.add(boxClassName);
    const appRoot = document.querySelector('#app')
    if (appRoot != null) {
      const lastChild = appRoot.lastElementChild;
      const modalApp = createApp({
        render: () => h(component, {
          ...options,
          // 关闭弹窗
            ['onCloseEmit']: (result: any) => {
              resolve(result);
              modalApp.unmount();
              container.remove();
            },
        }),
      });

      // 将组件挂载到 container 元素上
      modalApp.mount(container);
      if (lastChild) {
        appRoot.insertBefore(container, lastChild.nextSibling);
      } else {
        appRoot.appendChild(container);
      }
    }
  })
}

// 弹窗
export function dialogOpen({ options = {} }) {
  return insertElement(options, PromptModal, 'pop-up-box');
}

// 备注弹窗
export function openRemarkDialog(remark: string) {
   return dialogOpen({ options: { second: 10,title: '备注信息', remark: remark }})
}