xinya-form

基于iview的动态渲染组件

Demo

Usage

Install

npm i xinya-form

Import

import Vue from 'vue'
import XinyaForm from 'xinya-form'

Vue.use(XinyaForm)

Use it!

xinya-form offers two ways of using a XinyaForm.

Default Usage

In the sample below, the collection is instantiated as an Array and passed directly to the XinyaForm in that form.

<template>
  <div>
    <xinya-form ref="fc" v-model="fApi" :rule="rule" :option="option"></xinya-form>
  </div>
</template>

<script>
    import { handleFormRule } from "xinya-form";

    export default {
        data() {
            return {
            fApi: {},
            model: {},
            rule: handleFormRule(formJSON),
            option: {
                onSubmit: function(formData) {
                }
            }
            };
        },
        mounted: function() {
            this.model = this.fApi.model();
        }
    };
</script>

Default Props

    {
        //插入节点,默认document.body
        el:null,
            
        //是否自动转换规则中的 maker 生成器为对象
        switchMaker:true,
            
        //是否开启iframe组件子页面助手函数
        //`${field}_change(value)`
        //只能设置当前字段的 value
        //form_create_helper.close(field)
        //form_create_helper.get(field)
        //form_create_helper.set(field,value)
        //快速修改该组件的value. 跨域无效!!
        iframeHelper:false,
            
        //form配置
        form:{

            //是否开启行内表单模式
            inline:false,
            //表单域标签的位置，可选值为 left、right、top
            labelPosition:'right',
            //表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值
            labelWidth:125,
            //是否显示校验错误信息
            showMessage:true,
            //原生的 autocomplete 属性，可选值为 off 或 on
            autocomplete:'off',

        },

        //row布局配置
        row:{

            //栅格间距，单位 px，左右平分
            gutter:0,
            //布局模式，可选值为flex或不选，在现代浏览器下有效
            type:undefined,
            //flex 布局下的垂直对齐方式，可选值为top、middle、bottom
            align:undefined,
            //flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between
            justify:undefined,
            //自定义的class名称
            className:undefined

        },

        //上传组件全局配置
        upload:{

            //上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传
            beforeUpload:()=>{},
            //文件上传时的钩子，返回字段为 event, file, fileList
            onProgress:(event, file, fileList)=>{},
            //文件上传成功时的钩子，返回字段为 response, file, fileList,
            //若需有把文件添加到文件列表中,在函数值返回即可
            onSuccess:(response, file, fileList)=>{
                // return 'filePath';
            },
            //文件上传失败时的钩子，返回字段为 error, file, fileList
            onError:(error, file, fileList)=>{},
            //点击已上传的文件链接时的钩子，返回字段为 file， 
            //可以通过 file.response 拿到服务端返回数据
            onPreview:(file)=>{},
            //文件列表移除文件时的钩子，返回字段为 file, fileList
            onRemove:(file, fileList)=>{},
            //文件格式验证失败时的钩子，返回字段为 file, fileList
            onFormatError:(file, fileList)=>{},
            //文件超出指定大小限制时的钩子，返回字段为 file, fileList
            onExceededSize:(file, fileList)=>{},
            //辅助操作按钮的图标 ,设置为false将不显示
            handleIcon:'ios-eye-outline',
            //点击辅助操作按钮事件
            onHandle:(src)=>{},
            //是否可删除,设置为false是不显示删除按钮
            allowRemove:true,

        },
            
        //表单创建成功后回调函数
        mounted:($f)=>{},
        //表单提交事件
        onSubmit:(formData)=>{},
        //表单重载后回调函数`onReload`全局配置项,可用于更新`$f` 
        //>=1.5.3版本
        onReload:($f)=>{}

        //提交按钮配置,设置submitBtn=false或submitBtn.show=false时不显示按钮
        submitBtn:{

            //按钮类型，可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置
            type:"primary",
            //按钮大小，可选值为large、small、default或者不设置
            size:"large",
            //按钮形状，可选值为circle或者不设置
            shape:undefined,
            //开启后，按钮的长度为 100%
            long:true,
            //设置button原生的type，可选值为button、submit、reset
            htmlType:"button",
            //设置按钮为禁用状态
            disabled:false,
            //设置按钮的图标类型
            icon:"ios-upload",
            //按钮文字提示
            innerText:"提交",
            //设置按钮为加载中状态
            loading:false,
            //默认显示
            show:true,
            //设置提交按钮布局规则,参考 col 栅格布局规则
                    col:undefined
        },

        //重置按钮默认配置,设置resetBtn=true或resetBtn.show=true时显示
        resetBtn:{
            
            //配置说明同上
            type:"ghost",
            size:"large",
            shape:undefined,
            long:true,
            htmlType:"button",
            disabled:false,
            icon:"refresh",
            innerText:"重置",
            loading:false,
            //默认不显示
            show:false,
            //设置重置按钮布局规则,参考 col 栅格布局规则
            col:undefined

        }
    }