canrd-outside / order-erp-front · Commits

Commit bbfb06f0ad1e345b0e716da730acaf7c0a778e4b

Authored by nebv
1 parent a7c09703

perf: optimize preview and ContextMenu functions

Inline Side-by-side
Showing 2 changed files with 13 additions and 15 deletions
src/components/ContextMenu/index.ts
  View file @bbfb06f
1 1 import contextMenuVue from './src/index';
2 2 import { isClient } from '/@/utils/is';
3 3 import { Options, Props } from './src/types';
4   -import { createApp } from 'vue';
  4 +import { createVNode, render } from 'vue';
5 5 const menuManager: {
6 6 doms: Element[];
7 7 resolve: Fn;
... ... @@ -19,7 +19,7 @@ export const createContextMenu = function (options: Options) {
19 19  
20 20 if (!isClient) return;
21 21 return new Promise((resolve) => {
22   - const wrapDom = document.createElement('div');
  22 + const container = document.createElement('div');
23 23 const propsData: Partial<Props> = {};
24 24 if (options.styles !== undefined) propsData.styles = options.styles;
25 25 if (options.items !== undefined) propsData.items = options.items;
... ... @@ -27,12 +27,12 @@ export const createContextMenu = function (options: Options) {
27 27 propsData.customEvent = event;
28 28 propsData.axis = { x: event.clientX, y: event.clientY };
29 29 }
30   - createApp(contextMenuVue, propsData).mount(wrapDom);
  30 + const vm = createVNode(contextMenuVue, propsData);
  31 + render(vm, container);
31 32 const bodyClick = function () {
32 33 menuManager.resolve('');
33 34 };
34   - const contextMenuDom = wrapDom.children[0];
35   - menuManager.doms.push(contextMenuDom);
  35 + menuManager.doms.push(container);
36 36 const remove = function () {
37 37 menuManager.doms.forEach((dom: Element) => {
38 38 try {
... ... @@ -41,16 +41,13 @@ export const createContextMenu = function (options: Options) {
41 41 });
42 42 document.body.removeEventListener('click', bodyClick);
43 43 document.body.removeEventListener('scroll', bodyClick);
44   - try {
45   - (wrapDom as any) = null;
46   - } catch (error) {}
47 44 };
48 45 menuManager.resolve = function (...arg: any) {
49 46 resolve(arg[0]);
50 47 remove();
51 48 };
52 49 remove();
53   - document.body.appendChild(contextMenuDom);
  50 + document.body.appendChild(container);
54 51 document.body.addEventListener('click', bodyClick);
55 52 document.body.addEventListener('scroll', bodyClick);
56 53 });
... ...
src/components/Preview/src/functional.ts
  View file @bbfb06f
... ... @@ -3,19 +3,20 @@ import { isClient } from &#39;/@/utils/is&#39;;
3 3  
4 4 import type { Options, Props } from './types';
5 5  
6   -import { createApp } from 'vue';
  6 +import { createVNode, render } from 'vue';
7 7  
  8 +let instance: any = null;
8 9 export function createImgPreview(options: Options) {
9 10 if (!isClient) return;
10 11 const { imageList, show = true, index = 0 } = options;
11 12  
12 13 const propsData: Partial<Props> = {};
13   - const wrapDom = document.createElement('div');
  14 + const container = document.createElement('div');
14 15 propsData.imageList = imageList;
15 16 propsData.show = show;
16 17 propsData.index = index;
17   - const imgDom = createApp(ImgPreview, propsData);
18   - imgDom.mount(wrapDom);
19   - const imgPreviewDom = wrapDom.children[0];
20   - document.body.appendChild(imgPreviewDom);
  18 +
  19 + instance = createVNode(ImgPreview, propsData);
  20 + render(instance, container);
  21 + document.body.appendChild(container);
21 22 }
... ...