diff --git a/packages/settings/events/src/components/BindEvents.vue b/packages/settings/events/src/components/BindEvents.vue index aa8550f251..49ac919048 100644 --- a/packages/settings/events/src/components/BindEvents.vue +++ b/packages/settings/events/src/components/BindEvents.vue @@ -28,12 +28,12 @@ @@ -43,7 +43,7 @@
- {{ action.eventName }}{{ state.componentEvents[action.eventName].label.zh_CN }} + {{ action.eventName }}{{ renderEventList[action.eventName]?.label?.[locale] }}
{{ action.linkedEventName }}
{{ action.ref }} @@ -78,7 +78,7 @@ @@ -88,6 +88,7 @@ import { computed, reactive, watchEffect } from 'vue' import { Popover, Button } from '@opentiny/vue' import { useCanvas, useModal, useLayout, useBlock, useResource } from '@opentiny/tiny-engine-controller' +import i18n from '@opentiny/tiny-engine-controller/js/i18n' import { BlockLinkEvent, SvgButton } from '@opentiny/tiny-engine-common' import { iconHelpQuery, iconChevronDown } from '@opentiny/vue-icon' import BindEventsDialog, { open as openDialog } from './BindEventsDialog.vue' @@ -112,6 +113,7 @@ export default { const { getBlockEvents, getCurrentBlock, removeEventLink } = useBlock() const { getMaterial } = useResource() const { confirm } = useModal() + const locale = i18n.global.locale.value const { highlightMethod } = getPluginApi(PLUGIN_NAME.PageController) @@ -119,25 +121,25 @@ export default { eventName: '', // 事件名称 eventBinding: null, // 事件绑定的处理方法对象 componentEvent: {}, - componentEvents: commonEvents, + customEvents: commonEvents, bindActions: {}, showBindEventDialog: false }) const isBlock = computed(() => Boolean(pageState.isBlock)) const isEmpty = computed(() => Object.keys(state.bindActions).length === 0) + const renderEventList = computed(() => ({ ...state.componentEvent, ...state.customEvents })) watchEffect(() => { const componentName = pageState?.currentSchema?.componentName const componentSchema = getMaterial(componentName) state.componentEvent = componentSchema?.content?.schema?.events || componentSchema?.schema?.events || {} - Object.assign(state.componentEvents, state.componentEvent) const props = pageState?.currentSchema?.props || {} const keys = Object.keys(props) state.bindActions = {} // 遍历组件事件元数据 - Object.entries(state.componentEvents).forEach(([eventName, componentEvent]) => { + Object.entries(renderEventList.value).forEach(([eventName, componentEvent]) => { // 查找组件已添加的事件 if (keys.indexOf(eventName) > -1) { const event = props[eventName] @@ -225,7 +227,7 @@ export default { const handleAddEvent = (params) => { const { eventName, eventDescription } = params - Object.assign(state.componentEvents, { + Object.assign(state.customEvents, { [eventName]: { label: { zh_CN: eventDescription @@ -253,7 +255,9 @@ export default { openCodePanel, openActionDialog, handleAddEvent, - handleToggleAddEventDialog + handleToggleAddEventDialog, + renderEventList, + locale } } }