介绍
客户在使用oinone平台的时候，有一些个性化的前端展示或交互需求，oinone作为开发平台，不可能提前预置好一个跟客户需求一模一样的组件，这个时候我们提供了一个“低无一体”模块，可以反向生成API代码，生成对应的扩展工程和API依赖包，再由专业前端研发人员基于扩展工程（kunlun-sdk），利用API包进行开发并上传至平台，这样就可以在界面设计器的组件里切换为我们通过低无一体自定义的新组件。
低无一体的具体体现
- “低”--- 指低代码，在sdk扩展工程内编写的组件代码
- “无”--- 指无代码，在页面设计器的组件功能处新建的组件定义
低无一体的组件跟直接在自有工程内写组件的区别？
低无一体的组件复用性更高，可以在本工程其他页面和其他业务工程中再次使用。
组件、元件介绍
元件 --- 指定视图类型(viewType) + 指定业务类型(ttype)字段的个性化交互展示。
组件 --- 同一类个性化交互展示的元件的集合。
组件是一个大一点的概念，比如常用的 Input 组件，他的元件在表单视图有字符串输入元件、密码输入元件，在详情和表格展示的时候就是只读的，页面最终使用的其实是元件。通过组件+ttype+视图类型+是否多值+组件名可以找到符合条件的元件，组件下有多个元件会根据最优匹配规则找到最合适的具体元件。
如何使用低无一体
界面设计器组件管理页面添加组件
进入组件的元件管理页面
点击“添加元件”
设计元件的属性
这里以是否“显示清除按钮”作为自定义属性从左侧拖入到中间设计区域，然后发布
点击“返回组件”
鼠标悬浮到卡片的更多按钮的图标，弹出下拉弹出“低无一体”的按钮
在弹窗内点击“生成SDK”的按钮
生成完成后，点击“下载模板工程”
解压模板工程kunlun-sdk.zip
解压后先查看README.MD，了解一下工程运行要点，可以先运行 npm i 安装依赖
再看kunlun-plugin目录下已经有生成好的组件对应的ts和vue文件
下面在vue文件内增加自定义代码，可以运行 npm run dev 在开发模式下调试看效果
<template>
<div class="my-form-string-input">
<oio-input
:value="realValue"
@update:value="change"
>
<template #prepend>MyPrepend</template>
</oio-input>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { OioInput } from '@kunlun/vue-ui-antd';
export default defineComponent({
name: 'customField1',
components: { OioInput },
props: {
value: {
type: String
},
change: {
type: Function
},
},
setup(props) {
const realValue = ref<string | null | undefined>(props.value);
return { realValue };
}
});
</script>
<style lang="scss">
.my-form-string-input {
border: 1px solid red;
}
</style>确定改好代码后运行 npm run build，生成上传所需的js和css文件
可以看到 kunlun-plugin目录下多出了dist目录，我们需要的是 kunlun-plugin.umd.js 和 kunlun-plugin.css 这2个文件
再次回到组件的“低无一体”管理弹窗页面，上传上面生成的js和css文件，并点击“确定”保存，到这里我们的组件就新增完成了。
下面我们再到页面设计器的页面中使用上面设计的组件（这里的表单页面是提前准备好的，这里就不介绍如何新建表单页面了）
将左侧组件库拉直最底部，可以看到刚刚新建的组件，将其拖至中间设计区域，我们可以看到自定义组件的展示结果跟刚刚的代码是对应上的（ps: 如果样式未生效，请刷新页面查看，因为刚刚上传的js和css文件在页面初始加载的时候才会导入进来，刚刚上传的动作未导入新上传的代码文件），再次点击设计区域中的自定义组件，可以看到右侧属性设置面板也出现了元件设计时拖入的属性。
最后再去运行时的页面查看效果，与代码逻辑一致！
注意事项
为什么我上传了组件后页面未生效？
Oinone社区 作者：汤乾华原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/4249.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
