1. Oinone社区Home
  2. 前端

【界面设计器】自定义字段组件基础

数式-海波 • • 前端 • 3067 views

阅读之前

本文档属于高阶实战文档，已假定你了解了所有必读文档中的全部内容，并了解过界面设计器的一些基本操作。

如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录

概述

平台提供的字段组件（以下简称组件）是通过SPI机制进行查找并最终渲染在页面中。虽然平台内置了众多组件，但无法避免的是，对于业务场景复杂多变的实际情况下，我们无法完全提供所有组件。

面对这样的困境，我们提供了外部注册组件的方式。在之前文章中，我们了解到组件注册后需要应用到页面中，需要配合DSL才能实现。其实，在平台中还提供了一种SAAS化的组件注册方式，配合界面设计器的设计能力，可以将组件在设计器页面中引入，从而更近一步的满足不同的业务场景。

通过界面设计器可以创建自定义组件，并为组件添加对应的元件。

界面设计器可以为元件设计其在指定视图下的属性面板，在页面设计时，可以使用该属性面板为元件设置相关属性。

在界面设计器的设计页面中拖入的组件，将通过SPI机制获取到一个唯一的元件，并渲染在页面中，提供给业务使用。

界面设计器-组件管理

名词解释

  • 页面设计：使用界面设计器设计页面的页面。
  • 属性面板设计：使用界面设计器设计属性面板的页面。
  • 设计页面：页面设计和属性面板设计的统称。
  • 组件库：展示在设计页面左侧的全部可拖拽组件。
  • 组件：在组件库中可拖拽的最小单元。
  • 元件：一个组件中的具体实现，是组件的最小单元。
  • 属性面板：展示在设计页面右侧的元件属性。
页面设计

image.png

属性面板设计

image.png

组件管理入口

进入界面设计器后，可通过上方标签页切换至【组件】管理页面。

image.png

创建第一个组件

点击【添加组件】，在弹窗中输入组件名称【文本输入框】后，点击【确定】。

image.png

image.png

创建第一个元件

点击【组件卡片】或点击【管理元件】按钮进入【元件】管理页面。

image.png

点击【添加元件】，可以看到如下【创建元件】弹窗。

image.png

表单字段解释
  • 元件名称：显示名称，仅在管理页面做展示使用。
  • API名称：SPI中的widget属性。
  • 支持字段业务类型：SPI中的ttype属性。
  • 支持多值：SPI中的multi属性。
  • 支持视图类型：SPI中的viewType属性。
  • 元件描述：元件功能描述内容，仅在管理页面做展示使用。

填入以下内容，并点击【确定】。

image.png

image.png

设计元件属性面板

点击【元件卡片】或点击【设计元件属性】按钮进入【属性面板设计】页面。

image.png

从【模型】中搜索【标题】，将【标题】和【隐藏标题】拖放至设计区域。如果想实现的相对美观，可以额外添加【分组】组件拖放至设计区域，并修改标题为【基础】，如下图所示。

image.png

点击【发布】按钮进行页面的发布。

至此，我们设计了第一个元件属性面板，接下来，我们需要在页面设计中使用这个组件。

在页面中使用【文本输入框】

由于我们之前选择的支持的视图类型是【表单】，因此我们在【表单】页面进行接下来的操作，此处略去创建视图的过程。

从【模型】中将【名称】拖放至设计区域。并通过点击【切换】按钮切换至我们的组件【文本输入框】，并且将标题改为【这是文本输入框组件】查看其展示效果。

image.png

image.png

属性变化

在组件切换后，属性面板发生了变化，原有属性会根据当前属性面板中现有字段进行【裁剪】，相同属性名称（字段）的值会被保留，其他属性值会被丢弃。

由于我们并没有在当前属性面板添加【宽度】属性，因此原有属性的宽度被丢弃，组件会自动变成默认【宽度】，默认宽度为1。

组件变化

由于我们并没有在【低无一体】中上传对应元件的代码实现，因此展示了默认的【单行文本】组件，目前组件的展示效果不会发生变化。

组件可切换规则

只有【组件】中包含与【当前选中字段】匹配的【元件】，才会将对应【组件】的名称展示在【可切换列表】中。

【当前选中字段】中包含了如下三个属性，这三个属性和【创建元件】时设置的属性一一对应。

（右侧属性面板切换至字段后，可查看当前选中字段的相关元数据信息。）

  • 所在视图类型：根据字段在视图中的位置进行推断，当前所在位置为【表单】。当【支持视图类型】包含【表单】时条件成立。
  • 字段业务类型：文本。当【支持字段业务类型】包含【文本】时条件成立。
  • 是否多值：否。当【支持多值】相同时条件成立。

使用低无一体为组件上传代码实现

进入【组件】管理页面，点击【低无一体】，打开【低无一体】弹窗。

image.png

image.png

按照步骤，在【生成SDK】后，可以【下载模板工程】。在本地进行npm相关操作后，会在packages/kunlun-plugin目录下生成dist目录。在dist目录中，会有对应的kunlun-sdk.umd.js文件，使用【上传JS文件】进行上传。如果工程中包含了css，使用【上传CSS文件】进行上传。上传完成后点击【确定】进行保存。

PS：在模板工程中，我们提供了最简化的Hello World示例，即使不添加任何代码也可以看到组件的具体效果，为了方便演示，我们暂时不介绍代码实现的相关内容，仅需直接上传对应js文件，看到效果即可。如果遇到相关问题，请点击查看【前端】低无一体部署常见问题。

image.png

image.png

结语

至此，我们已经完整体验了从【创建组件】到【属性面板设计】再到【使用组件】以及【实现组件】的全部流程。

通过这一流程我们不难发现，【自定义组件】并非仅仅用于【页面设计】，在【属性面板设计】时，我们同样可以使用【自定义组件】来设计【自定义组件】的属性面板。这样便形成了一个完整的设计闭环，使得开发者可以更大程度的发挥自身创造力，开发出符合业务需求的【自定义组件】。

Oinone社区 作者：数式-海波原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/53.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
数式-海波's avatar数式-海波数式管理员
0 0
Previous 2023年6月20日 pm4:07
Next 2023年11月2日 pm1:58

相关推荐

  • 前端自定义左树右表中的树 前端

    前端自定义左树右表中的树

    在 oinone 平台中，提供了默认的左树右表的视图，用户可以通过界面设计器配置，默认的树视图不一定满足所有需求，尤其当需要自定义功能或复杂的交互时，我们可以通过自定义视图来实现更灵活的展现。 本文将带你一步步了解如何自定义左树右表视图中的树组件。 自定义树视图 1. 使用界面设计器配置视图 首先，我们需要通过界面设计器生成基础的左树右表视图。界面设计器允许用户根据不同需求进行拖拽配置，快速创建可视化界面。 配置完视图之后，我们可以重写左侧的树组件。Oinone 的默认树组件是 TableSearchTreeWidget，通过自定义的方式，我们可以实现更高级的功能。 2. 重写 TableSearchTreeWidget import { BaseElementWidget, SPI, TableSearchTreeWidget, ViewType } from '@kunlun/dependencies'; import CustomTableSearchTree from './CustomTableSearchTree.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: [ViewType.Table, ViewType.Form], widget: 'tree', model: 'resource.k2.Model0000000100' // 改成自己的模型 }) ) export class CustomTableSearchTreeWidget extends TableSearchTreeWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomTableSearchTree); return this; } } 3. 定义 Vue 树组件 接下来，我们来实现 CustomTableSearchTree.vue 组件。这个组件将处理树的数据加载、节点选中等逻辑。你可以根据项目的需要修改其中的交互逻辑或 UI 设计。 <template> <a-tree :load-data="onLoadData" :tree-data="treeData" @select="onSelected" /> </template> <script lang="ts"> import { OioTreeNode, TreeUtils } from '@kunlun/dependencies'; import { computed, defineComponent } from 'vue'; export default defineComponent({ props: { rootNode: { type: Object }, loadData: { type: Function, required: true }, onSelected: { type: Function, required: true } }, setup(props) { // // 计算树的数据源，使用 TreeUtils 处理 const treeData = computed(() => { return TreeUtils.fillLoadMoreAction([…(props.rootNode?.children || [])]); }); // 异步加载子节点 const onLoadData = async (node) => { return await props.loadData(node.dataRef); }; // 处理节点选中事件 const onSelected = ( selectedKeys: string[], e: { nativeEvent: PointerEvent; node: { dataRef: OioTreeNode }; selected: boolean } ) => { props.onSelected?.(e.node.dataRef, e.selected); }; return { treeData, onLoadData, onSelected }; } }); </script> 4. 自定义…

    汤乾华's avatar 汤乾华
    2024年10月21日
    3.5K00
  • 【前端】项目开发前端知识要点地图 代码实践

    【前端】项目开发前端知识要点地图

    概述 下面整理了目前现有的所有文章，并提供了基本的学习路径。所有使用*标记的文章属于推荐必读文章。 目录 基础篇 【路由】浏览器地址栏url参数介绍 母版-布局-DSL 渲染基础（v4）* 组件SPI机制（v4）* 组件数据交互基础（v4）* 组件生命周期（v4） 入门篇 自定义视图组件（v4）* 如何通过浏览器开发者工具提高调试效率* 如何提高自定义组件的开发效率* 自定义组件之自动渲染（组件插槽的使用）（v4）* GraphQL请求详解（v4）* 上下文在字段和动作中的应用 如何实现页面间的跳转 如何自定义指定页面的样式 进阶篇 自定义组件之手动渲染基础（v4） 自定义组件之手动渲染弹出层（v4） 自定义组件之手动渲染任意视图（v4） 【前端】IOC容器（v4） 最佳实践篇 【前端】工程结构最佳实践（v4）* 【前端】移动端工程结构最佳实践（v4）* 界面设计器实战篇 基础篇 【界面设计器】模型增删改查基础 【界面设计器】他表字段 【界面设计器】左树右表 【界面设计器】树形表格 【界面设计器】树下拉/级联选择 【界面设计器】自定义字段组件基础 展示篇 【界面设计器】自定义字段组件实战——轮播图 【界面设计器】自定义字段组件实战——表格字段组合展示 【界面设计器】自定义字段组件实战——表格字段内嵌表格 交互篇 【界面设计器】自定义字段组件实战——千分位输入框 其他 前端低无一体使用教程 如何自定义表格字段？ 【界面设计器】组件开发常见问题 【前端】低无一体部署常见问题 【前端】生产环境性能调优 API文档 OioProvider详解（v4.3.0）* 前端环境配置（v4）* 默认布局模板（v4） 表格主题配置（v4） 运行时上下文API文档（v4） Class Component(ts)（v4）

    数式-海波's avatar 数式-海波
    2024年5月25日
    5.6K00
  • 主题设置-设置表格全局样式 低无一体

    主题设置-设置表格全局样式

    在启动工程的main.ts通过主题配置表格全局样式 registerThemeItem('demoTheme', { 'table-config': { // 是否带有边框 default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框） border: 'full', // 是否带有斑马纹 stripe: false, // 当鼠标点击行时，是否要高亮当前行 isCurrent: true } as Partial<TableThemeConfig> }); VueOioProvider( { browser: { title: 'Oinone – 构你想象!', favicon: 'https://pamirs.oss-cn-hangzhou.aliyuncs.com/pamirs/image/default_favicon.ico' }, theme: ['demoTheme'], // 其他代码 });

    nation's avatar nation
    2024年8月2日
    1.6K00
  • 如何在Oinone 根据主题实现自定义组件样式 前端

    如何在Oinone 根据主题实现自定义组件样式

    在页面交互中，样式的变化是前端核心工作之一。本文介绍如何在Oinone平台中根据主题变化自定义组件样式。 介绍 Oinone平台提供了六种不同的主题设置，浅色大主题、浅色中主题、浅色小主题、深色大主题、深色中主题、深色小主题，默认采用浅色中主题。本文旨在指导如何在线或通过代码修改这些主题，以满足个性化需求。 基础知识 Oinone平台的默认主题为浅色中主题，用户可以根据喜好选择以下六种主题中的任何一种： 浅色大主题 浅色中主题 浅色小主题 深色大主题 深色中主题 深色小主题 在线修改主题 用户可以通过进入系统配置应用，并切换到系统风格配置菜单来在线修改主题。选择喜欢的主题并保存即可轻松更换。 代码修改主题 步骤示例 新建theme.ts文件 在项目的src目录下新建一个theme.ts文件。 定义主题变量 在theme.ts文件中定义主题名称和CSS变量，示例中将主色系替换为黑色。 export const themeName = ‘OinoneTheme’; export const themeCssVars = { ‘primary-color’: ‘black’, ‘primary-color-hover’: ‘black’, ‘primary-color-rgb’: ‘0, 0, 0’, ‘primary-color-focus’: ‘black’, ‘primary-color-active’: ‘black’, ‘primary-color-outline’: ‘black’, }; 在main.ts注册 import { registerTheme, VueOioProvider } from ‘@kunlun/dependencies’; // 引入注册主题组件 import { themeName, themeCssVars } from ‘./theme’; // 引入theme.ts registerTheme(themeName, themeCssVars);// 注册 VueOioProvider( { …other config theme: [themeName] // 定义的themeName传入provider中 }, [] ); 4: 刷新页面看效果 注意事项 确保在定义CSS变量时遵循主题设计规范。 正确引入theme.ts文件以避免编译错误。 总结 本文详细介绍了在Oinone平台中修改主题的两种方法：在线修改和代码修改。这些步骤允许开发者和用户根据个人喜好或项目需求，自定义界面的主题风格。

    汤乾华's avatar 汤乾华
    2024年2月26日
    1.8K00
  • 自定义字段组件如何处理vue组件内的表单校验 低无一体

    自定义字段组件如何处理vue组件内的表单校验

    介绍 本示例以字符串字段为业务场景，将输入框用element-plus的组件实现了一遍，vue组件内在onMounted生命周期内将ElForm表单实例通过ts组件内提供到props的setFormInstance方法设置到了ts组件的属性formInstance上，这样就可以在ts组件校验方法validator()触发的时候直接调用表单组件实例formInstance的校验方法validate() 适用场景 当前字段存储了动态表单的配置json，vue组件内自行实现了一套表单渲染逻辑，需要在vue组件和ts组件内同时触发校验 参考文档 element-plus表单组件文档 如何编写自定义字段组件的校验逻辑 示例代码 ts组件 import { BaseFieldWidget, FormStringFieldSingleWidget, isValidatorSuccess, ModelFieldType, SPI, ValidatorInfo, ViewType, Widget } from '@kunlun/dependencies'; import { FormInstance } from 'element-plus'; import MyFormStringField from './MyFormStringField.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String, widget: 'Input', model: 'resource.k2.Model0000000109', name: 'code', }) ) export class MyFormStringFieldWidget extends FormStringFieldSingleWidget { public initialize(props) { super.initialize(props); this.setComponent(MyFormStringField); return this; } /** * ElementPlus的表单vue组件实例 * @private */ private formInstance?: FormInstance; @Widget.Method() private setFormInstance(formInstance: FormInstance | undefined) { this.formInstance = formInstance; } /** * 字段校验方法 */ public async validator(): Promise<ValidatorInfo> { const validRes = await this.formInstance?.validate((valid, fields) => {}); console.log('validRes', validRes) if (!validRes) { return this.validatorError('校验失败'); } const res = await super.validator(); if (!isValidatorSuccess(res)) { return res; } if (this.value == null) { return this.validatorSuccess(); } return this.validateLength(this.value); } } vue组件 <template> <ElForm ref="formInstance" :model="model" :rules="rules"> <ElFormItem label="编码" prop="code"> <ElInput v-model="model.code" @input="onValueChange"></ElInput> </ElFormItem> </ElForm> </template> <script lang="ts"> import { defineComponent, reactive, ref, onMounted, watch } from 'vue'; import { ElForm, ElFormItem, ElInput, FormInstance } from 'element-plus'; export default defineComponent({ name: 'MyFormStringField', components: { ElForm, ElFormItem, ElInput }, props: ['value', 'setFormInstance', 'onChange'],…

    nation's avatar nation
    2024年9月6日
    2.3K00

Leave a Reply

Please Login to Comment