diff --git a/src/components/ContextMenu/index.ts b/src/components/ContextMenu/index.ts index fb08e6405c8d43489bfa49ec0e8dbaaedc8304e1..97009158bc0e66108bf9473baa4f56e82105d71e 100644 --- a/src/components/ContextMenu/index.ts +++ b/src/components/ContextMenu/index.ts @@ -1,7 +1,7 @@ import contextMenuVue from './src/index'; import { isClient } from '/@/utils/is'; import { Options, Props } from './src/types'; -import { createApp } from 'vue'; +import { createVNode, render } from 'vue'; const menuManager: { doms: Element[]; resolve: Fn; @@ -19,7 +19,7 @@ export const createContextMenu = function (options: Options) { if (!isClient) return; return new Promise((resolve) => { - const wrapDom = document.createElement('div'); + const container = document.createElement('div'); const propsData: Partial = {}; if (options.styles !== undefined) propsData.styles = options.styles; if (options.items !== undefined) propsData.items = options.items; @@ -27,12 +27,12 @@ export const createContextMenu = function (options: Options) { propsData.customEvent = event; propsData.axis = { x: event.clientX, y: event.clientY }; } - createApp(contextMenuVue, propsData).mount(wrapDom); + const vm = createVNode(contextMenuVue, propsData); + render(vm, container); const bodyClick = function () { menuManager.resolve(''); }; - const contextMenuDom = wrapDom.children[0]; - menuManager.doms.push(contextMenuDom); + menuManager.doms.push(container); const remove = function () { menuManager.doms.forEach((dom: Element) => { try { @@ -41,16 +41,13 @@ export const createContextMenu = function (options: Options) { }); document.body.removeEventListener('click', bodyClick); document.body.removeEventListener('scroll', bodyClick); - try { - (wrapDom as any) = null; - } catch (error) {} }; menuManager.resolve = function (...arg: any) { resolve(arg[0]); remove(); }; remove(); - document.body.appendChild(contextMenuDom); + document.body.appendChild(container); document.body.addEventListener('click', bodyClick); document.body.addEventListener('scroll', bodyClick); }); diff --git a/src/components/Preview/src/functional.ts b/src/components/Preview/src/functional.ts index b37153aefe97e447f1625d17e5acc7b023202eee..0f9eba0a834110df5d3614c04cdb3f69d1ffd0ca 100644 --- a/src/components/Preview/src/functional.ts +++ b/src/components/Preview/src/functional.ts @@ -3,19 +3,20 @@ import { isClient } from '/@/utils/is'; import type { Options, Props } from './types'; -import { createApp } from 'vue'; +import { createVNode, render } from 'vue'; +let instance: any = null; export function createImgPreview(options: Options) { if (!isClient) return; const { imageList, show = true, index = 0 } = options; const propsData: Partial = {}; - const wrapDom = document.createElement('div'); + const container = document.createElement('div'); propsData.imageList = imageList; propsData.show = show; propsData.index = index; - const imgDom = createApp(ImgPreview, propsData); - imgDom.mount(wrapDom); - const imgPreviewDom = wrapDom.children[0]; - document.body.appendChild(imgPreviewDom); + + instance = createVNode(ImgPreview, propsData); + render(instance, container); + document.body.appendChild(container); }