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

基本使用

<script> export default { data () { return { jsonData: { list: [ { type: 'input', label: '单行文本', options: { width: '100%', defaultValue: '', placeholder: '请输入', disabled: false }, model: 'input_1577875678405', key: 'input_1577875678405', rules: [{ required: true, message: '必填项' }] }, { type: 'date', label: '日期选择器', options: { width: '100%', defaultValue: '', range: false, showTime: false, disabled: false, clearable: false, placeholder: '请选择', rangePlaceholder: ['开始时间', '结束时间'], format: 'YYYY-MM-DD' }, model: 'date_1577877450971', key: 'date_1577877450971', rules: [{ required: true, message: '必填项' }] } ], config: { layout: 'horizontal', labelCol: { span: 4 }, wrapperCol: { span: 18 }, hideRequiredMark: false, customStyle: '' } } } } } </script>

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: "必填项"
        }
      ]
    }
  ]
})