门户设计器添加新组件

本文档介绍如何在门户设计器中自定义新组件。

1. 如何自定义新组件

在 src/views/super/eoa/portalapp/components/components 目录下，新建与组件同名的文件夹名与 .vue 文件名，系统将自动按名称注册为组件。

示例：

src/views/super/eoa/portalapp/components/components/JAppCarousel/JAppCarousel.vue

其中，JAppCarousel 组件的文件夹名与 .vue 文件名须保持一致。

2. 如何自定义组件配置文件

在 src/views/super/eoa/portalapp/components/components/组件名 目录下新建 Option.vue，作为该组件的配置文件（配置面板）。
在 Option.vue 中通过 defineOptions 指定组件名，命名规范为「组件名 + Option」。

示例：

defineOptions({ name: 'JAppCarouselOption' });

在 src/views/super/eoa/portalapp/components/ProperyPanel/ProperyPanel.vue 的 getCompOptionByName 函数中，将上述 Option 组件名称加入 compList，以确保属性面板能够正确加载该配置 UI。
在 src/views/super/eoa/portalapp/components/components/useConmon.ts 中，定义该组件在设计器中的静态演示数据（设计时一般使用静态数据，预览时再通过接口获取真实 API 数据）。

3. 设计时组件网页端与移动端组件业务数据如何共享

默认情况下，网页端与移动端各维护一份独立的 JSON 配置：网页端读取网页端JSON配置，移动端读取移动端JSON配置。两端配置可以不同，但两端所依赖的业务数据需保持一致。（如在设计器中网页端给轮播组件新增图片、名称等信息时，移动端的 JSON 中也需要同步该数据）

以 JAppCarousel 为例，需要在两端JSON中同步 list：

在 src/views/super/eoa/portalapp/components/components/JAppCarousel/Option.vue 中，监听字段变化并触发同步：

import { isNeedSyncData } from '../../utils';

const compConfig: any = inject('compConfig');
const currentComp: any = inject('currentComp');
const webCompList: any = inject('webCompList');
const appCompList: any = inject('appCompList');
const headerActiveKey: any = inject('headerActiveKey');

watch(
  () => [compConfig.list],
  () => {
    isNeedSyncData(
      // 组件id
      currentComp.value.i,
      // 当前端
      headerActiveKey,
      // 网页端JSON数据
      webCompList,
      // 移动端JSON数据
      appCompList,
    );
  },
  { deep: true },
);

如需在两端同步部分字段，可在 src/views/super/eoa/portalapp/components/utils.ts 的 syncComponentData 函数中登记需要同步的字段。

export const syncComponentData = (componentName, sourceComponent, targetComponent) => {
  if (isObject(targetComponent.defaultProps) && isObject(sourceComponent.defaultProps)) {
    if (['JAppCarousel'].includes(componentName)) {
      copyAttribute(sourceComponent.defaultProps, targetComponent.defaultProps, ['list']);
    } 
  }
};

4.预览时滚动条美化

只有在预览时需要滚动的组件要用到在组件文件中

// 滚动区域容器绑定ref
<div class="main-content" ref="scrollRef">
</div>

import { useScrollbar } from '../useConmon';

const props = defineProps({
 ...commonProps(),
});

// 滚动条美化核心代码
const { scrollRef, updateScrollbar } = useScrollbar({ platform: props.platform, isView: props.isView });


const init = () => {
  const res = await defHttp.get({
  url: api.getList,
  params: { pageNo: 1, pageSize, userId: id, status: '0' },
  });
  dataSource.value = res.records ?? [];
  setTimeout(() => {
  // 数据更新后需要更新下滚动条
  updateScrollbar();
  }, 0);
}