vue-form-generator, 基于schema的Vue.js 表单生成器组件

分享于 

4分钟阅读

GitHub

  繁體
A schema-based form generator component for Vue.js
  • 源代码名称:vue-form-generator
  • 源代码网址:http://www.github.com/vue-generators/vue-form-generator
  • vue-form-generator源代码文档
  • vue-form-generator源代码下载
  • Git URL:
    git://www.github.com/vue-generators/vue-form-generator.git
    Git Clone代码到本地:
    git clone http://www.github.com/vue-generators/vue-form-generator
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/vue-generators/vue-form-generator
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    vue-form-generator

    基于schema的Vue.js表单生成器组件。

    演示

    jsfiddle简单示例

    安装

    NPM

    通过NPM安装它,或者Yarn

    Vue 2.x的最新版本
    
    $ npm install vue-form-generator
    
    
    
    
    Vue 1.0.x的旧版本
    
    $ npm install vue-form-generator@0.6.1
    
    
    
    

    手册

    下载zip包并解包,并将vfg.css和vfg.js文件从dist文件夹中添加到项目中。

    
    https://github.com/icebob/vue-form-generator/archive/master.zip
    
    
    
    

    核心版与完整版

    VueFormGenerator有两个版本:core和full。 Core是一个最小的版本,只有一半的字段。Full 是 core+其他字段。

    • Full包:75 kB (gzipped:19 kB )
    • Core 包:39 kB (gzipped:11 kB )

    如果您不知道选择什么,不用担心,完整版是默认版本。如果你想要精简版本,下面是更改:

    // the"full" way<script>importVueFormGeneratorfrom"vue-form-generator";
     import"vue-form-generator/dist/vfg.css"; // optional full css additions</script>// the"core" way<script>importVueFormGeneratorfrom"vue-form-generator/dist/vfg-core.js";
     import"vue-form-generator/dist/vfg-core.css"; // optional core css additions</script>

    用法

    <template>
     <divclass="panel-body">
     <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
     </div>
    </template>
    <script>importVueFormGeneratorfrom"vue-form-generator";Vue.use(VueFormGenerator);exportdefault { data: { model: { id:1, name:"John Doe", password:"J0hnD03!x4", skills: ["Javascript", "VueJS"], email:"john.doe@gmail.com", status:true }, schema: { fields: [{ type:"input", inputType:"text", label:"ID (disabled text field)", model:"id", readonly:true, disabled:true },{ type:"input", inputType:"text", label:"Name", model:"name", placeholder:"Your name", featured:true, required:true },{ type:"input", inputType:"password", label:"Password", model:"password", min:6, required:true, hint:"Minimum 6 characters", validator:VueFormGenerator.validators.string },{ type:"select", label:"Skills", model:"skills", values: ["Javascript", "VueJS", "CSS3", "HTML5"] },{ type:"input", inputType:"email", label:"E-mail", model:"email", placeholder:"User's e-mail address" },{ type:"checkbox", label:"Status", model:"status", default:true }] }, formOptions: { validateAfterLoad:true, validateAfterChanged:true } }}</script>

    本地组件中的用法

    importVueFormGeneratorfrom"vue-form-generator";//component javascriptexportdefault{
     components:{
     "vue-form-generator":VueFormGenerator.component }
    }

    开发

    此命令将启动webpack-dev-server,其中包含dev文件夹的内容。

    npm run dev

    生成

    此命令将在dist目录中构建可分发版本。

    npm run build

    测试

    npm test
    npm run ci

    COM  BASE  for  form  component  Generator  
    相关文章