组件生命周期（v4）

相关推荐

• 【前端】工程结构最佳实践（v4）

  阅读之前 你应该： 了解node与npm相关内容 了解lerna包管理工具的相关内容 官方文档 了解git仓库的相关内容 了解rollup的相关内容 工程结构包示例 Vue项目结构包下载 工程结构详解 工程结构 ├── packages │   ├── kunlun-boot │   │   ├── package.json │   │   ├── public │   │   │   ├── favicon.ico │   │   │   └── index.html │   │   ├── src │   │   │   ├── main.ts │   │   │   └── shim-vue.d.ts │   │   ├── tsconfig.json │   │   └── vue.config.js │   ├── kunlun-module-demo │   │   ├── scripts │   │   │   ├── postpublish.js │   │   │   └── prepublish-only.js │   │   ├── src │   │   │   ├── index.ts │   │   │   └── shim-vue.d.ts │   │   ├── index.ts │   │   ├── package.json │   │   ├── rollup.config.js │   │   └── tsconfig.json │   └── kunlun-modules-demo │   ├── scripts │   │   ├── build.config.js │   │   ├── postpublish.js │   │   └── prepublish-only.js │   ├── packages │   │   ├── module-demo1 │   │   │   ├── index.ts │   │   │   ├── package.json │   │   │   ├── rollup.config.js │   │   │   └── src │   │   │   ├── index.ts │   │   │   └── shim-vue.d.ts │   │   ├── module-demo2 │   │   │   ├── index.ts │   │   │   ├── package.json │   │   │   ├── rollup.config.js │   │   │  …

  nation

  前端 2023年11月1日

  1.4K000
• 低无一体

  前端-如何修改指定页面的内组件的css样式

  为组件加自定义class，用该class作为父选择器写特定的css样式 以form为例，自定义了以下class <view/>标签的表单视图(FormView)组件 <element/>标签的form(FormWidget)组件 <element/>标签的actionBar(ActionBarWidget)组件 import { registerLayout, ViewType } from '@kunlun/dependencies'; export const install = () => { registerLayout( ` <view type="FORM" class="my-form-view"> <element widget="form" slot="form" class="my-form-widget"> <xslot name="fields" slotSupport="pack,field" /> </element> <element widget="actionBar" slot="actionBar" class="my-action-bar" slotSupport="action" > <xslot name="actions" slotSupport="action" /> </element> </view> `, { viewType: ViewType.Form, model: 'resource.k2.Model0000000109', actionName: 'uiViewb2de116be1754ff781e1ffa8065477fa' } ); }; install(); 查看修改后的页面html结构 编写样式的css .my-form-view .oio-form { /** TODO **/ } .my-form-widget .oio-row { /** TODO **/ } .my-action-bar .oio-col { /** TODO **/ }

  nation

  2024年6月17日

  1.4K000
• 前端

  如何在多标签页切换时自动刷新视图

  在日常项目中，常常会遇到多视图（Multi-View）标签的场景，用户在切换不同视图时，可能需要刷新当前活动标签内的视图数据或状态。本文将详细解析下面这段代码，并说明如何利用它在视图切换时刷新对应的视图。 下列代码写在ss-boot里面的main.ts import { VueOioProvider } from '@kunlun/dependencies'; import { delay } from 'lodash-es'; VueOioProvider( { … 自己的配置 }, [ () => { setTimeout(() => { subscribeRoute( (route) => { const page = route.segmentParams.page || {}; // 如果不是表格类型，则不刷新(根据自己的需求判断) if (page.viewType !== ViewType.Table) { return; } const { model, action } = page; const multiTabsManager = MultiTabsManager.INSTANCE; delay(() => { const tab = multiTabsManager.getActiveTab(); if (tab?.key && tab.stack.some((s) => s.parameters?.model === model && s.parameters?.action === action)) { multiTabsManager.refresh(tab.key); } }, 200); }, { distinct: true } ); }, 1000); } ] ); 1. VueOioProvider 及其作用 首先，代码通过 VueOioProvider 初始化应用程序或组件，并传入两部分参数： 配置对象：可以根据实际业务需求进行自定义配置； 回调函数数组：这里传入了一个匿名函数，用于在应用初始化后执行额外的逻辑 2. 延时执行与路由监听 在回调函数中，使用了 setTimeout 延时 1000 毫秒执行，目的通常是为了确保其他组件或全局状态已经初始化完毕，再开始进行路由监听。 随后，代码调用 subscribeRoute 来监听路由的变化。subscribeRoute 接收两个参数： 回调函数：每次路由变化时都会触发该函数，并将最新的 route 对象传递给它； 配置对象：此处使用 { distinct: true } 来避免重复的触发，提高性能。 3. 判断视图类型 在路由回调函数内部，首先通过 route.segmentParams.page 获取当前页面的配置信息。通过判断 page.viewType 是否等于 ViewType.Table，代码可以确定当前视图是否为“表格类型”： 如果不是表格类型：则直接返回，不做刷新操作； 如果是表格类型：则继续执行后续刷新逻辑。 这种判断机制保证了只有特定类型的视图（例如表格）在切换时才会触发刷新，避免了不必要的操作 4. 多视图标签的刷新逻辑 当确认当前视图为表格类型后，从 MultiTabsManager 中获取当前活动标签： MultiTabsManager.INSTANCE.getActiveTab() 返回当前活动的标签对象； 如果 key 存在，并且激活的标签内部存储的action跟url一致， 就调用 multiTabsManager.refresh(key) 方法来刷新当前标签内的视图。

  汤乾华

  2025年3月13日

  1.2K000
• 前端

  【界面设计器】自定义字段组件实战——表格字段内嵌表格

  阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 表格中的一对多(O2M)或多对多(M2M)字段使用表格展开。 演示内容：在【商品】的表格中存在【库存信息】这一列，这一列的内容通过表格展示【尺码】和【数量】两列。 业务分析及实现思路 从需求来看，我们需要实现一个【内嵌表格】组件，并且该组件允许在【表格】视图中使用。与之前不同的是，这里我们需要支持两个业务类型一对多(O2M)和多对多(M2M)，即一个组件中包含两个元件。 在【内嵌表格】组件的属性面板中，我们需要再定义一个【内嵌表格配置】组件，用来选择内嵌表格中需要哪些字段进行组合，以及为每个组合提供一些基础配置。 这里需要理解一个基本概念，即【内嵌表格】的属性面板是【内嵌表格配置】的【执行页面】。所有组件的属性面板在【执行页面】时都是【表单】视图。 因此我们可以实现一个【内嵌表格配置】组件，并且该组件允许在【表单】视图中使用。其业务类型使用【文本】，我们在保存配置数据时，可以使用JSON数据结构来存储复杂结构。（这里的实现思路并非是最符合协议设定的，但可以满足绝大多数组件场景） 在【内嵌表格配置】组件中，我们可以允许用户添加/移除组合，并且每个组合有两个属性，【标题】和【字段】。 一些解释 看过【界面设计器】自定义字段组件实战——表格字段组合展示文章的读者可能很熟悉这一实现思路，会想当然的尝试将两个组件进行合并。这里我觉得有必要作出一些实现思路上的解释。 虽然在表面上看起来【组合列配置】和【内嵌表格配置】用到的属性完全一样，但在实现上，由于关联关系的查询需要在组件中特殊处理【透出字段(选项字段列表)】字段（【界面设计器】组件开发常见问题中对该属性进行了解释），才能查询到相应的关联数据。 不仅如此，这两个组件所代表的含义也完全不同。【组合列配置】是在一列中配置需要展示的字段，它在未来可能会增加【颜色（根据条件判断展示不同的颜色）】、【动作（可点击的行为）】等等诸多与之相关的属性。【内嵌表格配置】是在一列中配置表格中的多列，它在未来可能会增加【行高（控制表格行高）】、【支持排序（表格列支持排序）】等等诸多与之相关的属性。 在这里希望读者可以理解一点：相似并不代表相关。组件的抽象与归纳整理的不同点在于，抽象更需要关心其本身所代表的含义，而不是仅关注其相似程度。将多个相似度高但含义不同的组件进行归纳整理得到的只是一个含义不明，无法适应变化的组件。 因此，我们仍然使用两个不同的组件进行实现。 准备工作 此处你应该已经准备好了【商品】和【库存】两个模型，并且可以完整执行【商品】模型的全部【增删改查】操作。 业务模型定义（此处模型定义并非业务中正常使用的模型定义，仅作为演示使用） （以下仅展示本文章用到的模型字段，忽略其他无关字段。） 关联字段：-左侧表示当前模型中的字段API名称，右侧表示关联模型中的字段API名称。 商品（Item） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – 编码 code 文本 否 128 – – 名称 name 文本 否 128 – – 库存信息 inventoryInfo 一对多 是 – 库存（Inventory） id – itemId 库存（Inventory） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 128 – – 商品 item 多对一 否 – 商品（Item） itemId – id 商品ID itemId 整数 否 – – – 尺码 size 文本 否 128 – – 库存 count 整数 否 – – – PS：如果是使用【模型设计器】创建这两个模型，在创建关联关系字段时必须使用双向关联，才能正确建立关联关系。 实现页面效果展示 表格视图 表单视图 库存信息配置 创建组件、元件 准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。 创建内嵌表格组件 创建内嵌表格元件（一对多） 创建内嵌表格元件（多对多） 创建内嵌表格配置组件 创建内嵌表格配置元件 设计内嵌表格元件属性面板 （两个元件的属性面板可以完全一致） 创建tableConfig字段，并切换至【内嵌表格配置】组件。 再拖入【透出字段(选项字段列表)】，并设置为隐藏。 设计内嵌表格配置元件属性面板 启动SDK工程进行组件基本功能开发 开发步骤参考 打开【表格】视图，将【库存信息】字段的组件切换为【内嵌表格】 在属性面板中看到【内嵌表格配置】组件，并优先实现【内嵌表格配置】组件。这里的属性面板就是【内嵌表格配置】组件对应的【执行页面】。 当【内嵌表格配置】组件可以按照预先设计的数据结构正确保存tableConfig属性时，可以在【内嵌表格】组件中的props定义中直接获取该属性，接下来就可以进行【内嵌表格】组件的开发。 代码实现参考 工程结构 typing.ts export interface InlineTableConfig { key: string; label?: string; field?: string; } FieldService.ts import { GenericFunctionService, IModelField, QueryPageResult } from '@kunlun/dependencies'; export class FieldService { private static readonly FIELD_MODEL = 'base.Field'; public static async fetchFieldsByModel(model: string, filter?: string): Promise<IModelField[]> { let rsql = `model == "${model}"`; if (filter) {…

  数式-海波

  2023年11月1日

  1.3K000
• 低无一体

  如何在表格的字段内添加动作

  介绍 在日常的业务中，我们经常需要在表格内直接点击动作完成一些操作，而不是只能在操作栏中，例如：订单的表格内点击商品名称或者里面的按钮跳转到商品详情页面，这里我们将带来大家来通过自定义表格字段来实现这个功能。 1.编写表格字段组件 组件ts文件TableBtnFieldWidget.ts import { ActionWidget, ActiveRecordExtendKeys, BaseFieldWidget, BaseListView, ModelFieldType, queryDslWidget, queryRowActionBar, RowContext, SPI, TableStringFieldWidget, BaseElementListViewWidget, ViewType, Widget } from '@kunlun/dependencies'; import { createVNode, VNode } from 'vue'; import { toString } from 'lodash-es'; import TableBtnField from './TableBtnField.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Table, ttype: [ModelFieldType.String, ModelFieldType.Text], // widget: 'StringLink', // 以下3行配置代码测试用，生产建议在界面设计器自定义组件，widget填自定义组件的api名称 model: 'resource.k2.Model0000000109', name: 'name' }) ) export class TableBtnFieldWidget extends TableStringFieldWidget { @Widget.Reactive() private get triggerActionLabel() { // 界面设计器组件内设计该属性 return this.getDsl().triggerActionLabel || '更新'; } private getTriggerAction() { return this.model.modelActions.find((a) => a.label === this.triggerActionLabel); } private getTriggerActionWidget(widgetHandle: string, draftId: string, triggerActionLabel: string): ActionWidget | undefined { const listView = Widget.select(widgetHandle) as unknown as BaseListView; const listWidget = queryDslWidget(listView?.getChildrenInstance(), BaseElementListViewWidget); if (!listWidget) { return undefined; } const rowActionBar = queryRowActionBar(listWidget.getChildrenInstance(), draftId); const actionWidget = rowActionBar?.getChildrenInstance().find((a) => (a as ActionWidget).action.label === triggerActionLabel); return actionWidget as ActionWidget; } protected clickAction(context: RowContext) { const draftId = context.data[ActiveRecordExtendKeys.DRAFT_ID] as unknown as string; const actionWidget = this.getTriggerActionWidget(this.getRootHandle()!, draftId, this.triggerActionLabel); if (!actionWidget) { console.error('未找到action', this.triggerActionLabel); return; } actionWidget.click(); } @Widget.Method() public renderDefaultSlot(context: RowContext): VNode[] | string { const value = toString(this.compute(context)); if (value) { return [ createVNode(TableBtnField,…

  nation

  2024年5月16日

  1.6K000