界面设计器组件管理页面添加组件
进入组件的元件管理页面
点击“添加元件”
设计元件的属性
这里以是否“显示清除按钮”作为自定义属性从左侧拖入到中间设计区域，然后发布
点击“返回组件”
鼠标悬浮到卡片的更多按钮的图标，弹出下拉弹出“低无一体”的按钮
在弹窗内点击“生成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/oio4/9309.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
