添加自定义区域块
平台提供了一系列默认的视图布局，可以帮助开发人员快速构建出复杂的企业应用系统。当然，我们可以使用自定义区域块来扩展表格、表单、画廊、树形等视图。
自定义区域块概述
平台视图布局都是通过XML配置实现的。在视图布局中，我们可以使用一些特定的元素标签来构建视图的表头、表单、搜索区域等部分。而自定义区域块，就是这些元素标签之外的部分。我们可以通过在视图布局的XML中添加自定义区域块，来扩展页面功能。
视图类型及相关元素
视图类型分为表格（TABLE）、表单（FORM）、画廊（GALLERY）、树形（TREE）等。不同类型的视图布局，包含的元素也有所不同。
下面是几种视图类型及其对应的元素：
- 表格：搜索区域、表格主体，其中表格主体包含了表格上面的动作、表格区域等部分。
- 表单：表单区域，包含了表单动作、表单区域等部分。
- 画廊：动作、卡片详细信息。
在表格页面添加自定义区域块
以下是一个示例，演示如何在表格页面顶部添加自定义区域块。
1. 修改视图布局XML
首先，我们需要修改表格视图的XML布局，添加自定义区域块元素标签。
<view type="TABLE">
<!-- 这是搜索区域 -->
<pack widget="group">
<view type="SEARCH">
<element widget="search" slot="search" slotSupport="field" />
</view>
</pack>
<!-- 这是表格主体 -->
<pack widget="group" slot="tableGroup">
<!-- 在这里添加自定义区域块元素标签 -->
<element widget="MyCustomElement"></element>
<!-- 这是表格上面的动作 -->
<element widget="actionBar" slot="actionBar" slotSupport="action">
<xslot name="actions" slotSupport="action" />
</element>
<!-- 这是表格区域 -->
<element widget="table" slot="table" slotSupport="field">
<element widget="expandColumn" slot="expandRow" />
<xslot name="fields" slotSupport="field" />
<element widget="rowActions" slot="rowActions" slotSupport="action" />
</element>
</pack>
</view>在上述代码中，我们添加了一个名为MyCustomElement的元素标签。这将作为我们自定义区域块的容器。
2. 创建自定义Vue组件
接下来，我们需要创建一个Vue组件，并将其指定为自定义元素标签MyCustomElement的模板。
<template>
<div>
<!-- 在这里编写自定义区域块的内容 -->
<p>Hello, world!</p>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
components: {
},
props: [],
setup(props) {
return {};
}
});
</script>在上述代码中，我们定义了一个非常简单的Vue组件，它在页面上显示一个“Hello, world!”的文本信息。
3. 创建自定义Element Widget
为了使自定义Vue组件与XML布局文件关联起来，我们需要创建一个对应的Element Widget。
import { BaseElementWidget, SPI, BaseElementViewWidget, Widget, ViewMode, FormWidget, BaseElementWidgetProps } from '@kunlun/dependencies';
import MyCustomElement from './MyCustomElement.vue';
@SPI.ClassFactory(BaseElementWidget.Token({ widget: 'MyCustomElementWidget' }))
export class MyCustomElementWidget extends BaseElementWidget {
public initialize(props: BaseElementWidgetProps): this {
super.initialize(props)
this.setComponent(MyCustomElement)
return this
}
}在上述代码中，我们继承了BaseElementWidget类，并在其中指定了Vue组件MyCustomElement。这样，XML布局文件中的元素标签就能够正确地与Vue组件关联起来。
4. 注册视图布局
最后，我们需要将上述代码配置注册。具体而言，我们需要调用registerLayout方法来将XML布局文件、模块名和视图类型进行关联。
import { registerLayout, ViewType } from '@kunlun/dependencies';
registerLayout(
`<view type="TABLE">
<pack widget="group">
<view type="SEARCH">
<element widget="search" slot="search" slotSupport="field" />
</view>
</pack>
<pack widget="group" slot="tableGroup">
<element widget="MyCustomElement"></element>
<element widget="actionBar" slot="actionBar" slotSupport="action">
<xslot name="actions" slotSupport="action" />
</element>
<element widget="table" slot="table" slotSupport="field">
<element widget="expandColumn" slot="expandRow" />
<xslot name="fields" slotSupport="field" />
<element widget="rowActions" slot="rowActions" slotSupport="action" />
</element>
</pack>
</view>`,
{
moduleName: 'moduleName',
model: 'model',
viewType: ViewType.Table
}
);在上述代码中，我们调用registerLayout方法，并将XML布局文件、模块名和视图类型进行关联。这样就能够正确地显示我们的自定义区域块。
下面是平台对应不同的视图类型注册的默认XML:
1: Table
<view type="TABLE">
<pack widget="group">
<view type="SEARCH">
<element widget="search" slot="search" slotSupport="field" />
</view>
</pack>
<pack widget="group" slot="tableGroup">
<element widget="actionBar" slot="actionBar" slotSupport="action">
<xslot name="actions" slotSupport="action" />
</element>
<element widget="table" slot="table" slotSupport="field">
<element widget="expandColumn" slot="expandRow" />
<xslot name="fields" slotSupport="field" />
<element widget="rowActions" slot="rowActions" slotSupport="action" />
</element>
</pack>
</view>2: Form
<view type="FORM">
<element widget="actionBar" slot="actionBar" slotSupport="action">
<xslot name="actions" slotSupport="action" />
</element>
<element widget="form" slot="form">
<xslot name="fields" slotSupport="pack,field" />
</element>
</view>3: Detail
<view type="DETAIL">
<element widget="actionBar" slot="actionBar" slotSupport="action">
<xslot name="actions" slotSupport="action" />
</element>
<element widget="detail" slot="detail">
<xslot name="fields" slotSupport="pack,field" />
</element>
</view>4: Gallery
<view type="GALLERY">
<view type="SEARCH">
<element widget="search" slot="search" slotSupport="field" />
</view>
<element widget="actionBar" slot="actionBar" slotSupport="action">
<xslot name="actions" slotSupport="action" />
</element>
<element widget="gallery" slot="gallery">
<element widget="card" slot="card" slotSupport="pack,field" />
</element>
</view>5: Tree
<view type="TREE">
<pack widget="group">
<view type="SEARCH">
<element widget="search" slot="search" slotSupport="field" />
</view>
</pack>
<pack widget="group">
<element widget="actionBar" slot="actionBar" slotSupport="action">
<xslot name="actions" slotSupport="action" />
</element>
<element widget="card-cascader" slot="tree" slotSupport="nodes,node" />
</pack>
</view>Oinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/74.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
