github_mirrors/gf-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/gf-vben-admin.git synced 2025-01-24 04:10:20 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: optimize preview and ContextMenu functions

Browse Source
This commit is contained in:
nebv 2020-10-13 21:53:16 +08:00
parent a7c097034a
commit bbfb06f0ad
2 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/ContextMenu/index.ts
View File

@ -1,7 +1,7 @@
import contextMenuVue from './src/index'; import contextMenuVue from './src/index';
import { isClient } from '/@/utils/is'; import { isClient } from '/@/utils/is';
import { Options, Props } from './src/types'; import { Options, Props } from './src/types';
import { createApp } from 'vue'; import { createVNode, render } from 'vue';
const menuManager: { const menuManager: {
doms: Element[]; doms: Element[];
resolve: Fn; resolve: Fn;
@ -19,7 +19,7 @@ export const createContextMenu = function (options: Options) {
if (!isClient) return; if (!isClient) return;
return new Promise((resolve) => { return new Promise((resolve) => {
const wrapDom = document.createElement('div'); const container = document.createElement('div');
const propsData: Partial<Props> = {}; const propsData: Partial<Props> = {};
if (options.styles !== undefined) propsData.styles = options.styles; if (options.styles !== undefined) propsData.styles = options.styles;
if (options.items !== undefined) propsData.items = options.items; if (options.items !== undefined) propsData.items = options.items;
@ -27,12 +27,12 @@ export const createContextMenu = function (options: Options) {
propsData.customEvent = event; propsData.customEvent = event;
propsData.axis = { x: event.clientX, y: event.clientY }; propsData.axis = { x: event.clientX, y: event.clientY };
} }
createApp(contextMenuVue, propsData).mount(wrapDom); const vm = createVNode(contextMenuVue, propsData);
render(vm, container);
const bodyClick = function () { const bodyClick = function () {
menuManager.resolve(''); menuManager.resolve('');
}; };
const contextMenuDom = wrapDom.children[0]; menuManager.doms.push(container);
menuManager.doms.push(contextMenuDom);
const remove = function () { const remove = function () {
menuManager.doms.forEach((dom: Element) => { menuManager.doms.forEach((dom: Element) => {
try { try {
@ -41,16 +41,13 @@ export const createContextMenu = function (options: Options) {
}); });
document.body.removeEventListener('click', bodyClick); document.body.removeEventListener('click', bodyClick);
document.body.removeEventListener('scroll', bodyClick); document.body.removeEventListener('scroll', bodyClick);
try {
(wrapDom as any) = null;
} catch (error) {}
}; };
menuManager.resolve = function (...arg: any) { menuManager.resolve = function (...arg: any) {
resolve(arg[0]); resolve(arg[0]);
remove(); remove();
}; };
remove(); remove();
document.body.appendChild(contextMenuDom); document.body.appendChild(container);
document.body.addEventListener('click', bodyClick); document.body.addEventListener('click', bodyClick);
document.body.addEventListener('scroll', bodyClick); document.body.addEventListener('scroll', bodyClick);
}); });

13
src/components/Preview/src/functional.ts
View File

@ -3,19 +3,20 @@ import { isClient } from '/@/utils/is';
import type { Options, Props } from './types'; import type { Options, Props } from './types';
import { createApp } from 'vue'; import { createVNode, render } from 'vue';
let instance: any = null;
export function createImgPreview(options: Options) { export function createImgPreview(options: Options) {
if (!isClient) return; if (!isClient) return;
const { imageList, show = true, index = 0 } = options; const { imageList, show = true, index = 0 } = options;
const propsData: Partial<Props> = {}; const propsData: Partial<Props> = {};
const wrapDom = document.createElement('div'); const container = document.createElement('div');
propsData.imageList = imageList; propsData.imageList = imageList;
propsData.show = show; propsData.show = show;
propsData.index = index; propsData.index = index;
const imgDom = createApp(ImgPreview, propsData);
imgDom.mount(wrapDom); instance = createVNode(ImgPreview, propsData);
const imgPreviewDom = wrapDom.children[0]; render(instance, container);
document.body.appendChild(imgPreviewDom); document.body.appendChild(container);
} }