安装
使用nrm切换本地npm仓库源,再使用npm安装
// 全局安装nrm
npm install -g nrm
新增本地npm仓库源
// 新增本地源
nrm add local http://192.168.110.170:4873/
可以用命令 nrm ls 查看是否已经新增成功
在需要引入本地npm仓库包的项目内执行
// 切换到本地源
nrm use local
// 安装插件
npm i k-form-design --save
用完后记得切换会其他源
// 切换回淘宝源
nrm use taobao
引入组件
// 在main.js引入
import KFormDesign from 'k-form-design'
import 'k-form-design/lib/k-form-design.css'
Vue.use(KFormDesign)
使用组件
<template>
<div>
<k-form-design />
</div>
</template>
使用API
K-form-design API
API名称 | 描述 | 参数 |
---|---|---|
handleSave | 将当前表单保存为PDF并下载 | 无 |
handleSetData | 载入JSON表单数据 | data: 表单的JSON数据 |
其他接口一如K-form-Design
例子
<template>
<div>
<k-form-design ref="KFD"/>
</div>
</template>
<!-- 使用了composition-api -->
<script>
import { useFullscreen } from '@vueuse/core'
import { ref } from '@vue/composition-api'
export default {
setup() {
const KFD = ref(null)
// 保存为PDF并下载
const handleSavePDF = () => {
KFD.value && KFD.value.handleSave();
}
// 载入JSON数据
// KFD.value && KFD.value.handleSetData(..)
return {
KFD,handleSavePDF,
}
}
}
</script>
组件开发
组件列表开发
packages -> KFormDesign -> config -> formItemsConfig.js 中
// 自定义组件
export const customComponents = {
title: "系统模块",
list: [
// 此处引入自定义系统模块组件
]
}
// 字段控件
export const textComponents = {
title: "字段控件",
list: [
// 此处引入自定义的字段控件组件
]
}
// 布局控件
export const layoutList = [
// 此处引入布局控件
]
如果需要新增除系统模块、字段控件、布局控件外的一个大模块组件,在上述文件中操作,示例如下
// 其他控件
export const otherComponents = {
title: "字段控件",
list: [
// 此处引入自定义的其他控件组件
]
}
// 所有继承于customComponent的自定义组件
window.$customComponentList = [
...customComponents.list,
...textComponents.list,
...otherComponents.list
];
然后到**packages -> KFormDesign ** 下 引入定义的控件数据,加入到data中并在 template 新增 a-collapse-panel元素包裹该列表。