自定义组件之手动渲染任意视图（v4）

相关推荐

• 组件

  oio-input 输入框

  代码演示 <oio-input v-model:value="value"></oio-input> API Input 参数 说明 类型 默认值 版本 addonAfter 带标签的 input，设置后置标签 string|slot addonBefore 带标签的 input，设置前置标签 string|slot allowClear 可以点击清除图标删除内容 boolean defaultValue 输入框默认内容 string disabled 是否禁用状态，默认为 false boolean false maxlength 最大长度 number prefix 带有前缀图标的 input slot showCount 是否展示字数 boolean false suffix 带有后缀图标的 input slot type 声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 <a-textarea /> 代替 type="textarea")。 string text value(v-model:value) 输入框内容 string Input 事件 事件名称 说明 回调参数 update:value 输入框内容变化时的回调 function(e) pressEnter 按下回车的回调 function(e) Input.Search 代码演示 <oio-input-search v-model:value="value"></oio-input-search> Input.Search 事件 事件名称 说明 回调参数 search 点击搜索或按下回车键时的回调 function(value, event) 其余属性和 Input 一致。

  汤乾华

  2023年12月18日

  1.9K000
• 组件

  前端自定义组件之单页面步骤条

  本文将讲解如何通过自定义，实现单页面的步骤条组件。其中每个步骤的元素里都是界面设计器拖出来的。 实现路径 整体的实现思路是界面设计器拖个选项卡组件，自定义这个选项卡，里面的每个选项页都当成一步渲染出来，每一步的名称是选项页的标题。 1. 界面设计器拖出页面 我们界面设计器拖个选项卡组件，然后在每个选项页里拖拽任意元素。完成后点击右上角九宫格，选中选项卡，填入组件 api 名称，作用是把选项卡切换成我们自定义的步骤条组件，这里的 api 名称和自定义组件的 widget 对应。最后发布页面，并绑定菜单。 2. 组件实现 widget 组件重写了选项卡，核心函数 renderStep，通过 DslRender.render 方法渲染界面设计器拖拽的元素，每一步的 step 又是解析选卡页得到的。 import { SPI, Widget, DefaultTabsWidget, BasePackWidget, DslDefinition, DslRender, DslDefinitionType, CallChaining, customMutation } from '@oinone/kunlun-dependencies'; import { VNode } from 'vue'; import NextStepSinglePage from './NextStepSinglePage.vue'; @SPI.ClassFactory(BasePackWidget.Token({ widget: 'NextStepSinglePage' })) export class NextStepSinglePageWidget extends DefaultTabsWidget { public initialize(props) { super.initialize(props); this.setComponent(NextStepSinglePage); return this; } @Widget.Reactive() public get invisible() { return false; } // 配置的每一步名称，解析选项页的标题 @Widget.Reactive() public get titles() { return this.template?.widgets?.map((item) => item.title) || []; } // region 上一步下一步配置 // 步骤数组，数组里的元素即步骤要渲染的内容 @Widget.Reactive() public get steps(): DslDefinition[] { // 每个 tab 是一个步骤，这里会有多个步骤 // 每个步骤里有多个元素，又是数组 // 所以这里是二维数组 const tabDsls: DslDefinition[][] = this.template?.widgets.map((item) => item.widgets) || []; // 对每个步骤的子元素们，外侧包一层 row 布局，所以变回了一维数组 return tabDsls.map((tabDsl) => { return { …(this.template || {}), dslNodeType: DslDefinitionType.PACK, widgets: tabDsl, widget: 'row', resolveOptions: { mode: 1 } }; }); } // 渲染步骤，每个步骤有多个子元素 @Widget.Method() public renderStep(step: DslDefinition): VNode | undefined { return DslRender.render(step); } // region 校验相关 // 校验的钩子 @Widget.Reactive() @Widget.Inject('validatorCallChaining') protected parentValidatorCallChaining: CallChaining<boolean> | undefined; // 校验步骤表单 @Widget.Method() public async onValidator(): Promise<boolean> { const res = await this.parentValidatorCallChaining?.syncCall(); return res…

  银时

  2025年7月8日

  539000
• 前端

  Class Component(ts)（v4）

  Class Component 一种使用typescript的class声明组件的方式。 IWidget类型声明 IWidget是平台内所有组件的统一接口定义，也是一个组件定义的最小集。 /** * 组件构造器 */ export type WidgetConstructor<Props extends WidgetProps, Widget extends IWidget<Props>> = Constructor<Widget>; /** * 组件属性 */ export interface WidgetProps { [key: string]: unknown; } /** * 组件 */ export interface IWidget<Props extends WidgetProps = WidgetProps> extends DisposableSupported { /** * 获取当前组件响应式对象 * @return this */ getOperator(); /** * 组件初始化 * @param props 属性 */ initialize(props: Props); /** * 创建子组件 * @param constructor 子组件构造器 * @param slotName 插槽名称 * @param props 属性 * @param specifiedIndex 插入/替换指定索引的子组件 */ createWidget<ChildProps extends WidgetProps = WidgetProps>( constructor: WidgetConstructor<ChildProps, IWidget<ChildProps>>, slotName?: string, props?: ChildProps, specifiedIndex?: number ); } Widget Widget是平台实现的类似于Class Component组件抽象基类，定义了包括渲染、生命周期、provider/inject、watch等相关功能。 export abstract class Widget<Props extends WidgetProps = WidgetProps, R = unknown> implements IWidget<Props> { /** * 添加事件监听 * * @param {string} path 监听的路径 * @param {deep?:boolean;immediate?:boolean} options? * * @example * * @Widget.Watch('formData.name', {deep: true, immediate: true}) * private watchName(name: string) { * … todo * } * */ protected static Watch(path: string, options?: { deep?: boolean; immediate?: boolean }); /** * 可以用来处理不同widget之间的通讯，当被订阅的时候，会将默认值发送出去 * * @param {Symbol} name 唯一标示 * @param {unknown} value? 默认值 * * @example *…

  oinone

  2023年11月1日

  1.1K000
• 前端

  从一个方法开始：浅析页面渲染流程

  渲染前的准备 渲染前的准备，在 Vue 渲染框架下，会先安装所有所支持的默认组件，比如 Mask，Header 等，这些组件支持 XML 默认模版的 Vue 框架下的渲染，详情可见 main.ts 中，maskInstall 与 install，这两个函数将平台内部支持的组件进行了注册，随后将整个 Vue 挂载为运行时 App，随后进行初始化。 渲染的起步 OioProvider 方法是整个应用的入口，我们忽略掉一些配置方法，将注意力集中到 initializeServices 从名称中我们可以看出来内部保存的都是初始化服务，其中提供了渲染服务等，我们当前使用的是 Vue 框架，所以当前其渲染的 Root 节点为 Vue， 以此，我们视野可以暂时转移到 admin-base中的 Root.vue以及 RootWidget上， 其实现了整个 Vue 框架下的 Root 节点如何渲染，其中定义了多个 widget，比如登陆页，首页，忘记密码已经重置密码等页面， 在本文中我们着重关注渲染首页的能力，RootWidget将 DefaultMetadataMainViewWidget作为渲染 Props中的 page即首页提供给下层组件使用， 渐入佳境 DefaultMetadataMainViewWidget从名称中可以看到，其为元数据主视图，主要做两件事，1:提供 Mask 的渲染2:提供元数据上下文初始化 该组件主要通过观察路由变化触发上面两个动作，当路由发生变化，该组件 reloadPage将被调用，reloadPage方法通过组装路由参数构成一个唯一 key 向后段查询当前路由所对应的渲染信息， 随后将获取到的信息进行处理，初始化，即 元数据上下文初始化，在初始化后，会将获取到的数据注入到 MetadataViewWidget中， Mask 的渲染 关于 Mask 的渲染，在获取到数据后，将生成 maskTemplate，并将其赋值， DefaultMetadataMainView.vue文件将渲染该模板，并渲染到页面中 数据的变更 当上面两件任务完成后，将开始主视图的渲染，上文提到，DefaultMetadataMainViewWidget只负责 mask 的渲染和上下文的初始化，所以 DefaultMetadataMainViewWidget通过触发事件的方式来实现主视图的渲染， DefaultMetadataMainViewWidget将必要信息作为事件参数触发，MultiTabsContainerWidget接收到 reloadMainViewCallChaining事件后，开启主视图渲染， MultiTabsContainerWidget会刷新运行时上下文，即 refreshRuntimeContext，该方法将尝试查询并通过 createOrUpdateEnterTab方法创建 Tab 页，createOrUpdateEnterTab最终生成一个 MultiTabItem格式的对象，该对象描述了 Tab 的相关信息，随后调用 createTabContainerWidget创建 tab 的容器即新建了一个 MultiTabContainerWidget组件即单个 tab 的容器，随后调用 setActiveTabItem， 并获取其绑定的 Vue 组件，并将其组件放置在 KeepAlive内部，触发更新, 主视图的渲染 MultiTabContainerWidget继承自MetadataViewWidget，当 MetadataViewWidget数据发生变更， 其绑定的 Vue 组件将解析 viewTemplate, 获取到与该模板 dslNodeType想匹配的 Vue 组件，当前例子中为 View.vue，随后 View.vue开始渲染，View.vue文件只是一个纯粹的容器，当 View.vue被挂载时，其内部的 template属性包含了整个页面的描述信息，View.vue需要做的就是将这个 template翻译并渲染成 DOM 展现在浏览器上， 渲染整个页面 当 View.vue被挂载时，其内部的 template属性包含了整个页面的描述信息，View.vue主要做了两个事情，一：将 template 中的 widget转换为组件，二：根据当前的 template信息生成 slot信息， const currentSlots = computed<Slots | undefined>( () => DslRender.fetchVNodeSlots(props.dslDefinition) || (Object.keys(context.slots).length ? context.slots : undefined) ); const renderWidget = createCustomWidget(InternalWidget.View, { …context.attrs, type: props.type || viewType.value, template: props.dslDefinition, metadataHandle: props.metadataHandle || metadataHandle.value, rootHandle: props.rootHandle || rootHandle.value, parentHandle: props.parentHandle || parentHandle.value, slotName: props.slotName, inline: inlineProp } as ViewWidgetProps); 生成这两部分信息后，View.vue会将这两部分挂载到页面上，这两部分从代码中可以看出，主要靠 fetchVNodeSlots,createCustomWidget两个函数， export function createCustomWidget( widget: string, props: CustomWidgetProps ): RenderWidget | undefined public static fetchVNodeSlots(dsl: DslDefinition | undefined, supportedSlotNames?: string[]):…

  liji2

  2025年3月19日

  347000
• 低无一体

  【动作】-路由动作跳转后如何主动刷新页面数据

  介绍 当我们使用多tab组件的时候，如果一个viewAction已经打开了一个tab页，再次用该viewAction打开页面的时候，会发现不会根据路由上的业务参数(如详情和编辑页的id参数)主动刷新数据，这个时候可以通过以下方法解决该问题 // 该方法可以在进入新路由页面后刷新数据，推荐将该方法放到工具类 function refreshViewAction(action: any) { const onRefreshTabWithActive = (manager: MultiTabsManager, instance: MultiTabInstance) => { // 进入路由后刷新页面数据 manager.refresh(instance.key); manager.clearOnActive(onRefreshTabWithActive); }; MultiTabsManager.INSTANCE.onActive(onRefreshTabWithActive); executeViewAction(action); } 将原本调用executeViewAction的方法改为refreshViewAction 如果需要扩展executeViewAction的其他入参请自行拓展refreshViewAction的入参

  nation

  2024年6月18日

  952000