kw-form-design

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

快速上手

kw-form-design 可以通过拖拽配置操作快速构建表单

在开始之前，推荐先学习 Vue 和 ES2015，并正确安装和配置了 Node.js v8.9 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 Vue 的正确开发方式

引入kw-form-design

1.安装

npm install kw-form-design --registry=私服地址

2.完整引入

import Vue from 'vue'

import KwFormDesign from 'kw-form-design'

import 'kw-form-design/lib/kw-form-design.css'

Vue.use(KwFormDesign)

3.引入mini包

默认包是集成了antd ui，如果项目中也有使用antd ui，可以选择引入mini包来达到减小最终项目的体积，当然要确认项目中已经引入components_use.js中的组件

import Vue from 'vue'

-import KwFormDesign from 'kw-form-design'

+import KwFormDesign from 'kw-form-design/lib/kw-form-design.umd.min'

import 'kw-form-design/lib/kw-form-design.css'

Vue.use(KwFormDesign)

kw-form-design在项目中使用

基本使用

API

| 参数 | 说明 | 类型 | 默认值 | | ---------------- | :--------------------- | ------- | ------------------------------------------------------------ | | title | 表单设计器标题 | String | "表单设计器" | | showHead | 是否显示head部分 | Boolean | true | | toolbars | 显示对应的操作按钮 | Array | [ 'save', 'preview', 'importJson', 'exportJson', 'exportCode', 'reset', 'close', "undo", "redo" ] | | toolbarsTop | 切换操作按钮位置 | Boolean | false | | showToolbarsText | 是否显示操作按钮文本 | Boolean | false | | fields | 自定义左侧控件列表 | Array | [ "input", "textarea", "number", "select", "checkbox", "radio", "date", "time", "rate", "slider", "uploadFile", "uploadImg", "switch", "button", "alert", "text", "html", "divider", "card", "grid", "table" ] | | hideModel | 隐藏数据字段 | Boolean | false | | hideResetHint | 隐藏清空按钮的确认提示 | Boolean | false |

solt

| label | 说明 | | ------------ | ------------------------------ | | left-action | 表单设计器头部左侧操作区域插槽 | | right-action | 表单设计器头部右侧操作区域插槽 |

函数

| 函数名称 | 说明 | 参数 | 回调参数 | | -------------- | -------------------------------------------------- | ---- | -------- | | handleSetData | 导入json数据，继续编辑 | json | Boolean | | getFieldSchema | 获取所有输入控件的结构数据，包括model，key，type等 | - | Array | | handleSave | 保存，触发save事件 | - | Void | | handleClose | 关闭，触发close事件 | - | Void | | handleReset | 清除表单 | - | Boolean | | getValue | 获取json数据 | - | Object |

事件

| 事件名称 | 说明 | 回调参数 | | -------- | ------------------ | -------- | | save | 点击保存按钮时回调 | json | | close | 点击关闭按钮时回调 | Void |

kw-form-build

基本使用

API

| 参数 | 说明 | 类型 | 默认值 | | ------------- | --------------------------------------------------- | ------- | ------ | | value | 表单设计器生成的json数据 | Object | - | | dynamic-data | 选项控件的动态配置数据 | Object | {} | | disabled | 禁用所有输入控件 | Boolean | false | | output-string | 将获取的值都转成字符串，插入数据时请使用setData函数 | Boolean | false | | default-value | 表单默认数据 | Object | {} | | config | 配置项 | Object | {} |

函数

| 函数名称 | 说明 | 参数 | 回调参数 | | -------- | ----------------------------------------------- | ------------- | -------- | | getData | 获取表单数据，返回Promise对象，判断验证是否通过 | - | Promise | | setData | 插入表单数据 | Object | Promise | | reset | 重置表单 | - | Void | | hide | 隐藏字段 | Array[fields] | Void | | show | 显示字段 | Array[fields] | Void | | disable | 禁用字段 | Array[fields] | Void | | enable | 启用字段 | Array[fields] | Void |

事件

| 事件名称 | 说明 | 回调参数 | | -------- | ----------------------------------------------- | ----------- | | submit | 点击提交按钮触发，也可以通过getData函数获取数据 | Promise对象 | | change | 当表单数据改变时触发 | value,key |

自定义控件

1.使用KFormDesign的setConfig函数

import KwFormDesign from 'kw-form-design'


// 自定义组件
let Cmp = {
  label: "cmp",
  render: function(h) {
    return h("div", "我是自定义组件");
  }
};

// 使用函数配置
KwFormDesign.setConfig({
  title: "自定义字段",
  list: [
    {
      type: "demo", // 组件类型
      label: "自定义组件", // 组件名称
      component: Cmp, // 组件
      options: {
        defaultValue: undefined, // 可选值
        multiple: false, // 可选值
        disabled: false, // 可选值
        width: "100%",
        clearable: true, // 可选值
        placeholder: "请选择", // 可选值
        showSearch: false // 可选值
      },
      model: "", // 可选值
      key: "",
      rules: [ // 可选值
        {
          required: false,
          message: "必填项"
        }
      ]
    }
  ]
})

2.或引入 setFormDesignConfig 函数

import { setFormDesignConfig } from 'kw-form-design'

// 自定义组件
let Cmp = {
  label: "cmp",
  render: function(h) {
    return h("div", "我是自定义组件");
  }
};

// 或者引入.vue文件
// import Cmp from './Cmp.vue'

// 使用函数配置
setFormDesignConfig({
  title: "自定义字段",
  list: [
    {
      type: "demo", // 组件类型
      label: "自定义组件", // 组件名称
      component: Cmp, // 组件
      options: {
        defaultValue: undefined, // 可选值
        multiple: false, // 可选值
        disabled: false, // 可选值
        width: "100%",
        clearable: true, // 可选值
        placeholder: "请选择", // 可选值
        showSearch: false // 可选值
      },
      model: "", // 可选值
      key: "",
      rules: [ // 可选值
        {
          required: false,
          message: "必填项"
        }
      ]
    }
  ]
})