相关推荐

• 组件

  OioMessage 全局提示

  全局展示操作反馈信息。 何时使用 可提供成功、警告和错误等反馈信息。 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。 API 组件提供了一些静态方法，使用方式和参数如下： OioMessage.success(title, options) OioMessage.error(title, options) OioMessage.info(title, options) OioMessage.warning(title, options) options 参数如下： 参数 说明 类型 默认值 版本 duration 默认 3 秒后自动关闭 number 3 class 自定义 CSS class string –

  汤乾华

  2023年12月18日

  1.4K000
• 组件

  oio-select 选择器

  API Select props 参数 说明 类型 默认值 版本 allowClear 支持清除 boolean false autofocus 默认获取焦点 boolean false clearIcon 自定义的多选框清空图标 VNode | slot – disabled 是否禁用 boolean false dropdownClassName 下拉菜单的 className 属性 string – dropdownRender 自定义下拉框内容 ({menuNode: VNode, props}) => VNode | v-slot – filterOption 是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。 boolean | function(inputValue, option) true getTriggerContainer 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 function(triggerNode) () => document.body menuItemSelectedIcon 自定义当前选中的条目图标 VNode | slot – options options 数据，如果设置则不需要手动构造 selectOption 节点 array<{value, label, [disabled, key, title]}> [] placeholder 选择框默认文字 string|slot – removeIcon 自定义的多选框清除图标 VNode | slot – suffixIcon 自定义的选择框后缀图标 VNode | slot – value(v-model:value) 指定当前选中的条目 string|string[]|number|number[] – 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中。 事件 事件名称 说明 回调参数 blur 失去焦点的时回调 function change 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 function(value, option:Option/Array<Option>) deselect 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 function(value，option:Option) dropdownVisibleChange 展开下拉菜单的回调 function(open) focus 获得焦点时回调 function inputKeyDown 键盘按下时回调 function mouseenter 鼠标移入时回调 function mouseleave 鼠标移出时回调 function popupScroll 下拉列表滚动时的回调 function search 文本框值变化时回调 function(value: string) select 被选中时调用，参数为选中项的 value (或 key) 值 function(value, option:Option)

  汤乾华

  2023年12月18日

  987000
• 低无一体

  如何增加页面消息通知轮询的间隔或者关闭轮询

  场景 oinone的前端页面默认自带了消息通知功能，在顶部状态栏可以看到消息的查看入口，默认每隔5秒查询一次最新的消息，我们可以通过自定义消息组件增加该间隔或者是关闭轮询 示例代码 修改轮询间隔 import { MaskWidget, NotificationWidget, SPI } from '@kunlun/dependencies'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class DemoNotificationWidget extends NotificationWidget { /** * 轮询间隔时间，单位: 秒 * @protected */ protected msgDelay = 30000; } 关闭轮询 import { MaskWidget, NotificationWidget, SPI } from '@kunlun/dependencies'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class DemoNotificationWidget extends NotificationWidget { protected mounted() { super.mounted(); // 清除轮询的定时器 this.msgTimer && clearInterval(this.msgTimer); // 挂载后手动查询一次消息 this.getMsgTotal(); } }

  nation

  2024年8月20日

  1.6K000
• 前端

  【界面设计器】自定义字段组件实战——轮播图

  阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 用户需要从【创建/编辑】页面中上传多张图片，并且在【详情】页面将这多张图片进行【轮播】展示。 业务分析 从需求来看，我们需要实现一个【轮播图】组件，并且该组件允许在【详情】视图中使用。在其他视图中，我们可以直接使用平台内置的【图片】组件，实现基础的编辑和展示功能。 名词解释 业务模型：需要进行可视化管理的存储模型或代理模型。 准备工作 你需要在某个业务模型下创建一个【表格视图】用于查看全部数据，创建【表单视图】用于创建/编辑数据，并创建【详情视图】展示必要的信息。（为了方便起见，你可以在所有视图中仅使用编码和名称两个字段） 你需要将【表格视图】绑定到某个菜单上，并通过【跳转动作】将三个视图进行关联，可以完整执行当前模型的全部【增删改查】操作。 业务模型定义 （以下仅展示本文章用到的模型字段，忽略其他无关字段。） DemoModel 名称 API名称 业务类型 是否多值 长度(单值长度) 编码 code 文本 否 128 名称 name 文本 否 128 轮播图 carouselImages 文本 是 512 实现页面效果展示 表格视图 表单视图-创建 表单视图-编辑 详情视图 根据业务背景添加轮播图字段到所有视图 轮播图字段信息： 字段业务类型：文本 多值：是 使用组件：图片 无代码模型 在模型设计器创建轮播图字段，并从【组件库】-【模型】拖放至视图中即可。 PS：这里需要注意的是，在模型设计器中需要切换至专家模式，并确认字段长度为512，否则当URL超长时将无法保存。 低代码模型 与服务端同学确认字段，并从【组件库】-【模型】中拖放至视图中即可。 将上图中的【演示】数据进行【编辑】，并上传三张图片，在【详情视图】查看默认展示效果。 演示图片下载 创建组件、元件 准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。 创建轮播图组件 创建轮播图元件 根据业务背景，我们需要根据模型中的字段确定业务类型，在这个场景中，可以使用如下配置。（暂时可以不进行属性面板的设计） 在【详情视图】中将【轮播图字段】的组件切换为我们新创建的【轮播图组件】 PS：这里会发现组件变成了【输入框】的样式，这是由于我们没有提供对应元件的代码实现，使得SPI找到了默认组件。 启动SDK工程进行组件基本功能开发 (npm相关操作请自行查看SDK工程中内置的README.MD) Carousel.vue <template> <a-carousel class="carousel" effect="fade" autoplay> <div class="carousel-item" v-for="image in images" :key="image"> <img :src="image" :alt="image" /> </div> </a-carousel> </template> <script lang="ts"> import { Carousel as ACarousel } from 'ant-design-vue'; import { computed, defineComponent, PropType } from 'vue'; export default defineComponent({ name: 'Carousel', components: { ACarousel }, props: { value: { type: Array as PropType<string[]> } }, setup(props) { const images = computed(() => props.value || []); return { images }; } }); </script> <style lang="scss"> .carousel { .slick-slide { height: 160px; & > div, .carousel-item { width: 100%; height: 100%; } img { max-width: 100%; max-height: 100%; margin: auto; } } } </style> 效果展示 开发完成后，我们将重新打包生成的JS文件和CSS文件在【界面设计器】的【低无一体】进行上传，就可以在【设计器环境】中正常使用了。 设计轮播图的属性面板 通过我们使用的a-carousel组件，我们发现组件中提供了很多【属性】或【功能】可以进行配置，比如是否自动切换(autoplay)、面板指示点位置(dotPosition)、是否显示面板指示点(dots)等。在这里我们将对这三个属性的配置方式进行演示，其他更多属性可以自行设计并开发。 我们可以在【界面设计器】的【属性面板设计】中根据这三个属性的字段类型确定以下信息： 功能 API名称 业务类型 选用组件 可选项 是否自动切换 autoplay 布尔 开关 -…

  数式-海波

  2023年11月1日

  4.2K000
• 低无一体

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

  介绍 在日常的业务中，我们经常需要在表格内直接点击动作完成一些操作，而不是只能在操作栏中，例如：订单的表格内点击商品名称或者里面的按钮跳转到商品详情页面，这里我们将带来大家来通过自定义表格字段来实现这个功能。 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