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