1. Oinone社区首页
  2. 前端

移动端端默认布局模板

汤乾华 • • 前端 • 阅读 2267

默认布局

表格视图（TABLE）

<view type="TABLE">
    <view type="SEARCH">
        <element widget="search" slot="search" slotSupport="field">
            <xslot name="searchFields" slotSupport="field" />
        </element>
    </view>
    <pack widget="group" class="oio-m-default-view-element" style="height: 100%;flex: 1;overflow-y: hidden;" wrapperStyle="height: 100%;box-sizing:border-box;">
      <pack widget="row" style="height: 100%;">
        <pack widget="col" mode="full" style="min-height: 234px;height: 100%;">
          <element widget="table" slot="table" slotSupport="field" checkbox="false">
              <xslot name="fields" slotSupport="field" />
              <element widget="rowActions" slot="rowActions" />
          </element>
        </pack>
      </pack>
    </pack>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
</view>

表单视图（FORM）

<view type="FORM">
    <element widget="form" slot="form">
        <xslot name="fields" slotSupport="pack,field" />
    </element>

    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
</view>

详情视图（DETAIL)

<view type="DETAIL">
    <element widget="detail" slot="detail">
        <xslot name="fields" slotSupport="pack,field" />
    </element>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
</view>

画廊视图（GALLERY）

默认内嵌布局（inline=true）

内嵌表格视图（TABLE）

内嵌表单视图（FORM）

内嵌详情视图（DETAIL）

<view type="DETAIL">
    <element widget="detail" slot="detail">
        <xslot name="fields" slotSupport="pack,field" />
    </element>
</view>`

Oinone社区 作者：汤乾华原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/19846.html

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

赞 (0)
汤乾华的头像汤乾华数式员工
0 0
上一篇 2024年12月10日 pm10:08
下一篇 2024年12月11日 am10:42

相关推荐

  • 如何通过浏览器开发者工具提高调试效率 前端

    如何通过浏览器开发者工具提高调试效率

    1.通过vue devtool查看vue组件和oinone组件的信息 平台字段、动作、视图组件都是以Widget结尾的，可以通过关键字快速找到组件 安装vue devtool插件 chrome安装最新版的vue devtool插件 谷歌应用商店插件地址，隐藏窗口需要在扩展程序的详情页额外设置才能使用该插件 安装好插件后，可以通过插件选中html页面中的元素查看相关信息 相关特性了解 组件自动创建的vue组件以组件的class类名命名，据此特性可以得出自定义组件的时候，可继承该命名的父类 一般oinone的组件以Widget后缀命名，也推荐大家也以此为后缀，方便在vue调试面板快速看出哪些是oinone组件 选中oinone组件后可以在右侧面板看到相关的组件信息，部分属性介绍 template属性为dsl的配置 activeRecords、formData、rootData、parentData、dataSource等属性为常用数据属性 action为动作的元数据 field为字段的元数据 2.直接在浏览器开发者工具的源码处调试源码 打开浏览器开发者工具，进入标签页源代码/来源(英文版为Source)，win系统用快捷键ctrl+O，mac系统用快捷键cmd+O, 可以打开文件搜索面板，通过关键字搜索文件名找到代码文件，可直接在里面debug调试或者查看执行逻辑

    nation的头像 nation
    2024年9月9日
    1.3K00
  • 上下文在字段和动作中的应用 前端

    上下文在字段和动作中的应用

    上下文在字段和动作中的应用 在业务场景中，常常需要在打开弹窗或跳转到新页面时携带当前页面数据。此时，我们需要配置相关「动作」中的上下文信息。 在 oinone 平台中，上下文主要分为以下三种： activeRecord：当前视图数据 rootRecord：主视图数据 openerRecord：触发弹窗的对象 参考文档：oinone内的主视图数据和当前视图数据使用介绍 activeRecord 表示当前视图的数据。例如，若动作配置在表单上，则指代当前表单的数据；若配置在 o2m、m2m 字段表格上，则指代选中的行数据。 rootRecord 表示根视图的数据。若当前视图是表单页，则代表表单的数据；若为表格页，则代表表格的数据。 openerRecord 表示触发弹窗的对象。例如，在弹窗内的字段或动作中，可通过 openerRecord 获取触发弹窗的信息。 这三者均为对象 (Object) 类型。 界面设计器配置 在 o2m、m2m 表格字段弹窗中携带当前视图数据 假设我们设计了一个包含 o2m、m2m 表格字段的表单页面。打开相关弹窗时，需将表单中的 code 数据传递至弹窗中。 选择相应的「动作」，如创建或添加。在右侧属性面板底部找到「上下文」，添加格式为对象 {} 的上下文信息。 以键值对的格式添加上下文信息：{code: rootRecord.code}。 设计弹窗时，将 code 字段拖入弹窗中。 完成设计后保存并发布。 大家可以看到，上下文中的key是 code，但是value是rootRecord.code，这里取的是rootRecord而不是activeRecord，因为我们上面讲过如果当前动作配置在o2m、m2m的字段表格上面，那么activeRecord就是表格选中的行，我们现在要取的是表单上的code字段，所以需要用rootRecord。 注意点：key需要是提交模型【前端视图】存在的字段才能传递。

    汤乾华的头像 汤乾华
    2023年11月8日
    2.1K10
  • 自定义表格支持合并或列、表头分组 代码实践

    自定义表格支持合并或列、表头分组

    本文将讲解如何通过自定义实现表格支持单元格合并和表头分组。 点击下载对应的代码 在学习该文章之前，你需要先了解： 1: 自定义视图2: 自定义视图、字段只修改 UI，不修改数据和逻辑3: 自定义视图动态渲染界面设计器配置的视图、动作 1. 自定义 widget 创建自定义的 MergeTableWidget，用于支持合并单元格和表头分组。 // MergeTableWidget.ts import { BaseElementWidget, SPI, ViewType, TableWidget, Widget, DslRender } from '@kunlun/dependencies'; import MergeTable from './MergeTable.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'MergeTableWidget' }) ) export class MergeTableWidget extends TableWidget { public initialize(props) { super.initialize(props); this.setComponent(MergeTable); return this; } /** * 表格展示字段 */ @Widget.Reactive() public get currentModelFields() { return this.metadataRuntimeContext.model.modelFields.filter((f) => !f.invisible); } /** * 渲染行内动作VNode */ @Widget.Method() protected renderRowActionVNodes() { const table = this.metadataRuntimeContext.viewDsl!; const rowAction = table?.widgets.find((w) => w.slot === 'rowActions'); if (rowAction) { return rowAction.widgets.map((w) => DslRender.render(w)); } return null; } } 2. 创建对应的 Vue 组件 定义一个支持合并单元格与表头分组的 Vue 组件。 <!– MergeTable.vue –> <template> <vxe-table border height="500" :column-config="{ resizable: true }" :merge-cells="mergeCells" :data="showDataSource" @checkbox-change="checkboxChange" @checkbox-all="checkedAllChange" > <vxe-column type="checkbox" width="50"></vxe-column> <!– 渲染界面设计器配置的字段 –> <vxe-column v-for="field in currentModelFields" :key="field.name" :field="field.name" :title="field.label" ></vxe-column> <!– 表头分组 https://vxetable.cn/v4.6/#/table/base/group –> <vxe-colgroup title="更多信息"> <vxe-column field="role" title="Role"></vxe-column> <vxe-colgroup title="详细信息"> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> </vxe-colgroup> </vxe-colgroup> <vxe-column title="操作" width="120"> <template #default="{ row, $rowIndex }"> <!– 渲染界面设计器配置的行内动作 –> <row-action-render :renderRowActionVNodes="renderRowActionVNodes" :row="row" :rowIndex="$rowIndex" :parentHandle="currentHandle" ></row-action-render> </template> </vxe-column> </vxe-table> <!– 分页 –> <oio-pagination :pageSizeOptions="pageSizeOptions" :currentPage="pagination.current"…

    汤乾华的头像 汤乾华
    2025年1月9日
    1.4K00
  • oio-modal 对话框 组件

    oio-modal 对话框

    API 参数 说明 类型 默认值 版本 cancelText 取消按钮文字 string| slot 取消 closable 是否显示右上角的关闭按钮 boolean true closeIcon 自定义关闭图标 VNode | slot – confirmLoading 确定按钮 loading boolean 无 destroyOnClose 关闭时销毁 Modal 里的子元素 boolean false footer 底部内容，当不需要默认底部按钮时，可以设为 :footerInvisible="true" slot 确定取消按钮 getTriggerContainer 指定 Modal 挂载的 HTML 节点 (instance): HTMLElement () => document.body keyboard 是否支持键盘 esc 关闭 boolean true mask 是否展示遮罩 boolean true maskClosable 点击蒙层是否允许关闭 boolean true enterText 确认按钮文字 string 确定 title 标题 string|slot 无 visible(v-model:visible) 对话框是否可见 boolean 无 width 宽度 string|number 520 wrapClassName 对话框外层容器的类名 string – zIndex 设置 Modal 的 z-index number 1000 cancelCallback 点击遮罩层或右上角叉或取消按钮的回调, return true则关闭弹窗 function(e) enterCallback 点击确定回调 function(e)

    汤乾华的头像 汤乾华
    2023年12月18日
    1.3K00
  • Oinone移动端快速入门 前端

    Oinone移动端快速入门

    介绍 oinone的pc端的页面默认都可以在移动端直接访问。自定义mask、layout、视图组件、字段组件、动作组件方式都参考pc端实现。目前移动端的UI组件是基于vant@3.6.0版本开发，如有自定义部分的代码，推荐使用该组件库。 “注意”： 由于移动端和pc端在交互上的巨大差异，两端用的是不同的UI组件库是，按照此约定开发的自定义组件在两端也是无法相互兼容的，在pc端自定义的组件或者页面，不会在移动端自动适配，需要自行开发对应的移动端组件或者页面。 工程搭建 移动端很多交互跟pc端差异很大，所以移动端的我们采用的方案是独立用一套移动端的UI框架实现，而不是简单的做页面布局自适应，所以移动端需要跟pc端一样独立部署一套前端工程。 参考文档：【前端】移动端工程结构最佳实践（v4/v5） 如何区分多端 在界面设计器设计页面的时候，可以通过顶部的多端设备的图标切换在各端的页面效果。 pc端页面 切换为移动端后的页面 注意：大部分情况下，pc端和移动端可以共享一个设计的页面，然后通过上面的方法区分两端，如果移动端的页面交互差异很大，那更推荐独立新建一个页面专门给移动端使用。 模块 模块在定义的时候可以通过注解@Module.clientTypes决定当前模块在哪些端展示 package pro.shushi.pamirs.demo.api; import org.springframework.stereotype.Component; import pro.shushi.pamirs.business.api.BusinessModule; import pro.shushi.pamirs.core.common.CommonModule; import pro.shushi.pamirs.file.api.FileModule; import pro.shushi.pamirs.meta.annotation.Module; import pro.shushi.pamirs.meta.base.PamirsModule; import pro.shushi.pamirs.meta.common.constants.ModuleConstants; import pro.shushi.pamirs.meta.enmu.ClientTypeEnum; import pro.shushi.pamirs.user.api.UserModule; @Component @Module( name = DemoModule.MODULE_NAME, displayName = "oinoneDemo工程", version = "1.0.0", // 客户端类型，默认是PC和MOBILE端都展示 clientTypes = {ClientTypeEnum.PC, ClientTypeEnum.MOBILE}, // 登录后默认访问 priority 值最小的模块 priority = 1, dependencies = {ModuleConstants.MODULE_BASE, CommonModule.MODULE_MODULE, UserModule.MODULE_MODULE, BusinessModule.MODULE_MODULE, FileModule.MODULE_MODULE } ) @Module.module(DemoModule.MODULE_MODULE) @Module.Advanced(selfBuilt = true, application = true) public class DemoModule implements PamirsModule { public static final String MODULE_MODULE = "demo_core"; public static final String MODULE_NAME = "DemoCore"; @Override public String[] packagePrefix() { return new String[]{ "pro.shushi.pamirs.demo" }; } } 菜单 界面设计器设置方式 在菜单设置的时候可以选择“显示设备” 低代码设置方式 通过注解@UxMenu.clientTypes设置显示设备 package pro.shushi.pamirs.demo.core.init.menu; import pro.shushi.pamirs.boot.base.constants.ViewActionConstants; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenu; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenus; import pro.shushi.pamirs.demo.api.model.DemoItem; import pro.shushi.pamirs.demo.api.model.DemoItemCategory; import pro.shushi.pamirs.meta.enmu.ClientTypeEnum; @UxMenus() public class DemoMenus implements ViewActionConstants { // 同时在pc端和移动端显示 @UxMenu(value = "商品中心", clientTypes = {ClientTypeEnum.PC, ClientTypeEnum.MOBILE}) class ItemPMenu{ @UxMenu("商品类目") class DemoItemAndCateMenu { // 只在pc端显示 @UxMenu(value = "商品管理", clientTypes = {ClientTypeEnum.PC}) @UxRoute(DemoItem.MODEL_MODEL) class DemoItemMenu { } // 只在移动端显示 @UxMenu(value = "类目管理", clientTypes = {ClientTypeEnum.MOBILE}) @UxRoute(DemoItemCategory.MODEL_MODEL) class DemoItemCategoryMenu { } } } } 组件 界面设计器选中组件后，可以在右边属性面板看到“显示设备”的配置，默认为空，为空则表示在pc端和移动端都显示

    nation的头像 nation
    2024年9月19日
    1.6K00

Leave a Reply

登录后才能评论