From 889839f685e5d2e7b86954e7e781802c3c247c69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BD=98=E6=BD=98?= <97274247@qq.com> Date: Tue, 11 Oct 2022 18:31:29 +0800 Subject: [PATCH 01/35] =?UTF-8?q?feat:=20=E7=BB=84=E4=BB=B6=E7=94=9F?= =?UTF-8?q?=E5=91=BD=E5=91=A8=E6=9C=9F=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Pages/ChartItemSetting/EventSetting.vue | 26 ++ .../Pages/ChartItemSetting/index.ts | 4 +- src/hooks/index.ts | 3 +- src/hooks/useLifeHandler.hook.ts | 48 ++++ src/packages/index.d.ts | 11 +- src/packages/public/publicConfig.ts | 3 + .../ChartEventMonacoEditor/index.ts | 3 + .../ChartEventMonacoEditor/index.vue | 240 ++++++++++++++++++ .../chart/ContentConfigurations/index.d.ts | 1 + .../chart/ContentConfigurations/index.vue | 9 +- .../components/PreviewRenderGroup/index.vue | 3 +- .../components/PreviewRenderList/index.vue | 3 +- 12 files changed, 348 insertions(+), 6 deletions(-) create mode 100644 src/components/Pages/ChartItemSetting/EventSetting.vue create mode 100644 src/hooks/useLifeHandler.hook.ts create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.ts create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.vue diff --git a/src/components/Pages/ChartItemSetting/EventSetting.vue b/src/components/Pages/ChartItemSetting/EventSetting.vue new file mode 100644 index 00000000..f44645ff --- /dev/null +++ b/src/components/Pages/ChartItemSetting/EventSetting.vue @@ -0,0 +1,26 @@ + + + + \ No newline at end of file diff --git a/src/components/Pages/ChartItemSetting/index.ts b/src/components/Pages/ChartItemSetting/index.ts index 676766e4..8745402a 100644 --- a/src/components/Pages/ChartItemSetting/index.ts +++ b/src/components/Pages/ChartItemSetting/index.ts @@ -16,5 +16,7 @@ import PositionSetting from './PositionSetting.vue' import SizeSetting from './SizeSetting.vue' // 样式 import StylesSetting from './StylesSetting.vue' +// 事件配置 +import EventSetting from './EventSetting.vue' -export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, GlobalSettingPosition, NameSetting, PositionSetting, SizeSetting, StylesSetting } +export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, GlobalSettingPosition, NameSetting, PositionSetting, SizeSetting, StylesSetting, EventSetting } diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 16b0bb69..bc9825fb 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,4 +1,5 @@ export * from '@/hooks/useTheme.hook' export * from '@/hooks/usePreviewScale.hook' export * from '@/hooks/useCode.hook' -export * from '@/hooks/useChartDataFetch.hook' \ No newline at end of file +export * from '@/hooks/useChartDataFetch.hook' +export * from '@/hooks/useLifeHandler.hook' \ No newline at end of file diff --git a/src/hooks/useLifeHandler.hook.ts b/src/hooks/useLifeHandler.hook.ts new file mode 100644 index 00000000..cadb4c94 --- /dev/null +++ b/src/hooks/useLifeHandler.hook.ts @@ -0,0 +1,48 @@ +import { CreateComponentType, EventLife } from '@/packages/index.d' +import * as echarts from 'echarts' + +// 所有图表组件集合对象 +const components: {[K in string]?: any} = {}; + +// 项目提供的npm 包变量 +export const npmPkgs = { echarts } + +export const useLifeHandler = (chartConfig: CreateComponentType) => { + const events = chartConfig.events || {} + // 生成生命周期事件 + const lifeEvents = { + [EventLife.BEFORE_MOUNT] (e:any) { + // 存储组件 + components[chartConfig.id] = e.component + const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim() + generateFunc(fnStr, e) + }, + [EventLife.MOUNTED] (e:any){ + const fnStr = (events[EventLife.MOUNTED] || '').trim() + generateFunc(fnStr, e) + }, + } + return lifeEvents +} + +/** + * + * @param fnStr 用户方法体代码 + * @param e 执行生命周期的动态组件实例 + */ + function generateFunc(fnStr: string, e: any){ + try { + Function(` + "use strict"; + return ( + async function(e, components, node_modules){ + const {${Object.keys(npmPkgs).join()}} = node_modules; + ${fnStr} + } + )`)().bind(e?.component) + // 便于拷贝echarts示例时设置option 的formatter等相关内容 + (e, components, npmPkgs); + } catch (error) { + console.error(error) + } +} \ No newline at end of file diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 1f95d50f..3ac1d711 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -116,12 +116,21 @@ export interface PublicConfigType { filter?: string status: StatusType setPosition: Function + events?: { + [K in EventLife]?: string + } +} + +// vue3 生命周期事件 +export enum EventLife { + BEFORE_MOUNT = 'vnodeBeforeMount', + MOUNTED = 'vnodeMounted' } export interface CreateComponentType extends PublicConfigType, requestConfig { key: string chartConfig: ConfigType - option: GlobalThemeJsonType + option: GlobalThemeJsonType, } // 组件成组实例类 diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 7bf4ae75..31584702 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -87,6 +87,9 @@ export class PublicConfigClass implements PublicConfigType { this.attr.x = x this.attr.y = y } + + // 事件 + public events = undefined } // 多选成组类 diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.ts b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.ts new file mode 100644 index 00000000..b6d23e30 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.ts @@ -0,0 +1,3 @@ +import ChartEventMonacoEditor from './index.vue' + +export { ChartEventMonacoEditor } diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.vue new file mode 100644 index 00000000..8d68ccbe --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.vue @@ -0,0 +1,240 @@ + + + + + diff --git a/src/views/chart/ContentConfigurations/index.d.ts b/src/views/chart/ContentConfigurations/index.d.ts index d17818aa..59ca5bcf 100644 --- a/src/views/chart/ContentConfigurations/index.d.ts +++ b/src/views/chart/ContentConfigurations/index.d.ts @@ -3,4 +3,5 @@ export enum TabsEnum { CHART_SETTING = 'chartSetting', CHART_ANIMATION = 'chartAnimation', CHART_DATA = 'chartData', + CHART_EVENT = 'chartEvent' } diff --git a/src/views/chart/ContentConfigurations/index.vue b/src/views/chart/ContentConfigurations/index.vue index c1b11b20..5e5d8cd1 100644 --- a/src/views/chart/ContentConfigurations/index.vue +++ b/src/views/chart/ContentConfigurations/index.vue @@ -75,12 +75,13 @@ const { getDetails } = toRefs(useChartLayoutStore()) const { setItem } = useChartLayoutStore() const chartEditStore = useChartEditStore() -const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon } = icon.ionicons5 +const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, CodeSlashIcon } = icon.ionicons5 const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue')) const CanvasPage = loadAsyncComponent(() => import('./components/CanvasPage/index.vue')) const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue')) const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue')) +const ChartEvent = loadAsyncComponent(() => import('@/components/Pages/ChartItemSetting/EventSetting.vue')) const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue')) const collapsed = ref(getDetails.value) @@ -148,6 +149,12 @@ const chartsTabList = [ title: '数据', icon: FlashIcon, render: ChartData + }, + { + key: TabsEnum.CHART_EVENT, + title: '事件', + icon: CodeSlashIcon, + render: ChartEvent } ] diff --git a/src/views/preview/components/PreviewRenderGroup/index.vue b/src/views/preview/components/PreviewRenderGroup/index.vue index 81790f63..422fd441 100644 --- a/src/views/preview/components/PreviewRenderGroup/index.vue +++ b/src/views/preview/components/PreviewRenderGroup/index.vue @@ -18,6 +18,7 @@ :themeSetting="themeSetting" :themeColor="themeColor" :style="{ ...getSizeStyle(item.attr) }" + v-on="useLifeHandler(item)" > @@ -27,7 +28,7 @@ import { PropType } from 'vue' import { CreateComponentGroupType } from '@/packages/index.d' import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils' import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils' - +import { useLifeHandler } from '@/hooks' const props = defineProps({ groupData: { type: Object as PropType, diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue index 4335ab96..af55e9c1 100644 --- a/src/views/preview/components/PreviewRenderList/index.vue +++ b/src/views/preview/components/PreviewRenderList/index.vue @@ -29,6 +29,7 @@ :themeSetting="themeSetting" :themeColor="themeColor" :style="{ ...getSizeStyle(item.attr) }" + v-on="useLifeHandler(item)" > @@ -41,7 +42,7 @@ import { CreateComponentGroupType } from '@/packages/index.d' import { chartColors } from '@/settings/chartThemes/index' import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils' import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils' - +import { useLifeHandler } from '@/hooks' const props = defineProps({ localStorageInfo: { type: Object as PropType, From 3ac7b574c48bb639bfbb22318d5ded113da943c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sun, 16 Oct 2022 10:29:01 +0800 Subject: [PATCH 02/35] =?UTF-8?q?fix:=20=E5=8E=BB=E9=99=A4=20setPosition?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/index.d.ts | 1 - src/packages/public/publicConfig.ts | 7 ------- 2 files changed, 8 deletions(-) diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 3ac1d711..8bce57fb 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -115,7 +115,6 @@ export interface PublicConfigType { } filter?: string status: StatusType - setPosition: Function events?: { [K in EventLife]?: string } diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 31584702..ca20e464 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -81,13 +81,6 @@ export class PublicConfigClass implements PublicConfigType { public request = cloneDeep(requestConfig) // 数据过滤 public filter = undefined - - // 设置坐标 - public setPosition(x: number, y: number): void { - this.attr.x = x - this.attr.y = y - } - // 事件 public events = undefined } From f8674167abf883dfd86c38b84ad4841122b60b87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sun, 16 Oct 2022 10:41:12 +0800 Subject: [PATCH 03/35] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E6=96=87=E4=BB=B6=E4=BD=8D=E7=BD=AE=EF=BC=8C=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Pages/ChartItemSetting/index.ts | 4 +- src/hooks/useLifeHandler.hook.ts | 64 +++++++++---------- src/packages/index.d.ts | 12 ++-- src/settings/animations/index.ts | 1 - .../ChartEventMonacoEditor/index.ts | 0 .../ChartEventMonacoEditor/index.vue | 0 .../components/ChartEvent/index.vue} | 19 +++--- .../chart/ContentConfigurations/index.vue | 6 +- 8 files changed, 53 insertions(+), 53 deletions(-) rename src/views/chart/ContentConfigurations/components/{ChartData => ChartEvent}/components/ChartEventMonacoEditor/index.ts (100%) rename src/views/chart/ContentConfigurations/components/{ChartData => ChartEvent}/components/ChartEventMonacoEditor/index.vue (100%) rename src/{components/Pages/ChartItemSetting/EventSetting.vue => views/chart/ContentConfigurations/components/ChartEvent/index.vue} (55%) diff --git a/src/components/Pages/ChartItemSetting/index.ts b/src/components/Pages/ChartItemSetting/index.ts index 8745402a..676766e4 100644 --- a/src/components/Pages/ChartItemSetting/index.ts +++ b/src/components/Pages/ChartItemSetting/index.ts @@ -16,7 +16,5 @@ import PositionSetting from './PositionSetting.vue' import SizeSetting from './SizeSetting.vue' // 样式 import StylesSetting from './StylesSetting.vue' -// 事件配置 -import EventSetting from './EventSetting.vue' -export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, GlobalSettingPosition, NameSetting, PositionSetting, SizeSetting, StylesSetting, EventSetting } +export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, GlobalSettingPosition, NameSetting, PositionSetting, SizeSetting, StylesSetting } diff --git a/src/hooks/useLifeHandler.hook.ts b/src/hooks/useLifeHandler.hook.ts index cadb4c94..cd7ef9a9 100644 --- a/src/hooks/useLifeHandler.hook.ts +++ b/src/hooks/useLifeHandler.hook.ts @@ -2,47 +2,47 @@ import { CreateComponentType, EventLife } from '@/packages/index.d' import * as echarts from 'echarts' // 所有图表组件集合对象 -const components: {[K in string]?: any} = {}; +const components: { [K in string]?: any } = {} // 项目提供的npm 包变量 export const npmPkgs = { echarts } export const useLifeHandler = (chartConfig: CreateComponentType) => { - const events = chartConfig.events || {} - // 生成生命周期事件 - const lifeEvents = { - [EventLife.BEFORE_MOUNT] (e:any) { - // 存储组件 - components[chartConfig.id] = e.component - const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim() - generateFunc(fnStr, e) - }, - [EventLife.MOUNTED] (e:any){ - const fnStr = (events[EventLife.MOUNTED] || '').trim() - generateFunc(fnStr, e) - }, + const events = chartConfig.events || {} + // 生成生命周期事件 + const lifeEvents = { + [EventLife.BEFORE_MOUNT](e: any) { + // 存储组件 + components[chartConfig.id] = e.component + const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim() + generateFunc(fnStr, e) + }, + [EventLife.MOUNTED](e: any) { + const fnStr = (events[EventLife.MOUNTED] || '').trim() + generateFunc(fnStr, e) } - return lifeEvents + } + return lifeEvents } /** - * + * * @param fnStr 用户方法体代码 * @param e 执行生命周期的动态组件实例 */ - function generateFunc(fnStr: string, e: any){ - try { - Function(` - "use strict"; - return ( - async function(e, components, node_modules){ - const {${Object.keys(npmPkgs).join()}} = node_modules; - ${fnStr} - } - )`)().bind(e?.component) - // 便于拷贝echarts示例时设置option 的formatter等相关内容 - (e, components, npmPkgs); - } catch (error) { - console.error(error) - } -} \ No newline at end of file +function generateFunc(fnStr: string, e: any) { + try { + Function(` + "use strict"; + return ( + async function(e, components, node_modules){ + const {${Object.keys(npmPkgs).join()}} = node_modules; + ${fnStr} + } + )`)().bind(e?.component) + // 便于拷贝echarts示例时设置option 的formatter等相关内容 + e, components, npmPkgs + } catch (error) { + console.error(error) + } +} diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 8bce57fb..35fc0cbf 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -90,6 +90,12 @@ export const BlendModeEnumList = [ { label: '亮度', value: 'luminosity' } ] +// vue3 生命周期事件 +export enum EventLife { + BEFORE_MOUNT = 'vnodeBeforeMount', + MOUNTED = 'vnodeMounted' +} + // 组件实例类 export interface PublicConfigType { id: string @@ -120,12 +126,6 @@ export interface PublicConfigType { } } -// vue3 生命周期事件 -export enum EventLife { - BEFORE_MOUNT = 'vnodeBeforeMount', - MOUNTED = 'vnodeMounted' -} - export interface CreateComponentType extends PublicConfigType, requestConfig { key: string chartConfig: ConfigType diff --git a/src/settings/animations/index.ts b/src/settings/animations/index.ts index 5d588fc6..65106a74 100644 --- a/src/settings/animations/index.ts +++ b/src/settings/animations/index.ts @@ -11,7 +11,6 @@ export const animations = [ { label: '放大晃动缩小', value: 'tada' }, { label: '扇形摇摆', value: 'wobble' }, { label: '左右上下晃动', value: 'jello' }, - { label: 'Y轴旋转', value: 'flip' } ] }, { diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts similarity index 100% rename from src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.ts rename to src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue similarity index 100% rename from src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.vue rename to src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue diff --git a/src/components/Pages/ChartItemSetting/EventSetting.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue similarity index 55% rename from src/components/Pages/ChartItemSetting/EventSetting.vue rename to src/views/chart/ContentConfigurations/components/ChartEvent/index.vue index f44645ff..887f9e12 100644 --- a/src/components/Pages/ChartItemSetting/EventSetting.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue @@ -1,26 +1,29 @@ + \ No newline at end of file + diff --git a/src/views/chart/ContentConfigurations/index.vue b/src/views/chart/ContentConfigurations/index.vue index 5e5d8cd1..0f8a8609 100644 --- a/src/views/chart/ContentConfigurations/index.vue +++ b/src/views/chart/ContentConfigurations/index.vue @@ -75,13 +75,13 @@ const { getDetails } = toRefs(useChartLayoutStore()) const { setItem } = useChartLayoutStore() const chartEditStore = useChartEditStore() -const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, CodeSlashIcon } = icon.ionicons5 +const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5 const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue')) const CanvasPage = loadAsyncComponent(() => import('./components/CanvasPage/index.vue')) const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue')) const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue')) -const ChartEvent = loadAsyncComponent(() => import('@/components/Pages/ChartItemSetting/EventSetting.vue')) +const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue')) const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue')) const collapsed = ref(getDetails.value) @@ -153,7 +153,7 @@ const chartsTabList = [ { key: TabsEnum.CHART_EVENT, title: '事件', - icon: CodeSlashIcon, + icon: RocketIcon, render: ChartEvent } ] From 07d8cdc930aa1ca652eda2b194c0053a9c3fbaa3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sun, 16 Oct 2022 16:27:15 +0800 Subject: [PATCH 04/35] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useLifeHandler.hook.ts | 5 +- src/packages/index.d.ts | 4 +- .../ChartEventMonacoEditor/index.vue | 216 +++++++++++------- 3 files changed, 137 insertions(+), 88 deletions(-) diff --git a/src/hooks/useLifeHandler.hook.ts b/src/hooks/useLifeHandler.hook.ts index cd7ef9a9..aa0d557b 100644 --- a/src/hooks/useLifeHandler.hook.ts +++ b/src/hooks/useLifeHandler.hook.ts @@ -32,6 +32,7 @@ export const useLifeHandler = (chartConfig: CreateComponentType) => { */ function generateFunc(fnStr: string, e: any) { try { + // npmPkgs 便于拷贝 echarts 示例时设置option 的formatter等相关内容 Function(` "use strict"; return ( @@ -39,9 +40,7 @@ function generateFunc(fnStr: string, e: any) { const {${Object.keys(npmPkgs).join()}} = node_modules; ${fnStr} } - )`)().bind(e?.component) - // 便于拷贝echarts示例时设置option 的formatter等相关内容 - e, components, npmPkgs + )`)().bind(e?.component)(e, components, npmPkgs) } catch (error) { console.error(error) } diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 35fc0cbf..94e90c91 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -92,8 +92,10 @@ export const BlendModeEnumList = [ // vue3 生命周期事件 export enum EventLife { + // 渲染之后 + MOUNTED = 'vnodeMounted', + // 渲染之前 BEFORE_MOUNT = 'vnodeBeforeMount', - MOUNTED = 'vnodeMounted' } // 组件实例类 diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue index 8d68ccbe..c422fc20 100644 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue @@ -2,7 +2,9 @@
-

async {{eventName}} (e) {

+

+ async {{ eventName }} (e, components, echarts, node_modules) { +

},

@@ -25,84 +27,109 @@ - - -
-
-
- - - -

},

-
-
-
- - - - - - - - - - - - 以下变量均可在代码块中使用 - - - 触发对应生命周期事件时接收的参数 - - - 图表组件实例
- {{ prop }}... - - - 当前大屏内所有组件的集合id 图表组件中的配置id，可以获取其他图表组件进行控制 - - - - 以下是内置在代码环境中可用的包变量 - {{ pkg }} - - - - - - - - - - - + + + + + + + +

+ async function    + {{ eventName }}(e, components, echarts, node_modules)  { +

+ + + +

}

+ + + + + + + + + + + + + + + + + + 触发对应生命周期事件时接收的参数 + + + 图表组件实例 +
+ {{ + prop + }} + + + 当前大屏内所有组件的集合id 图表组件中的配置id，可以获取其他图表组件进行控制 + + + + 以下是内置在代码环境中可用的包变量 +
+ {{ pkg }} + + + + + + + +
+ 浏览器是否兼容 「importmap」: + + {{ hTMLScriptElement.supports('importmap') ? '√' : '×' }} + + +
+ + + + +