hehedear2 v0.0.1

安装

使用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

其他接口一如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元素包裹该列表。