kw-form-design v0.2.4

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

solt

函数

事件

kw-form-build

基本使用

API

函数

事件

自定义控件

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