Dynamically generate form forms without having to worry about forms

Use iView to quickly create form forms

A form generator with data collection, validation, and submission capabilities, including checkboxes, checkboxes, input boxes, drop-down selection boxes, and time selection, date selection, color selection, and file/image upload capabilities.

The installation

npm install form-createCopy the code

OR

git clone https://github.com/xaboy/form-create.git
cd form-create
npm installCopy the code

The introduction of

<! -- import Vue --> <script src="node_modules/vue/dist/vue.min.js"></script> <! -- import iview --> <link rel="stylesheet" href="node_modules/iview/dist/styles/iview.css"> <script src="node_modules/iview/dist/iview.min.js"></script> <! -- import formCreate --> <script src="dist/form-create.min.js"></script>Copy the code

use

let rules = [],el = document.body; new Vue({ mounted:function(){ var $f = this.$formCreate(rules,el); }})Copy the code

$formCreate parameters

$f instance method

Get form data

$f.formData()

Modifying form data

$f.changeField(field,value)

Form validation

$f.validate(successFn,errorFn)

The form validates the specified field

$f.validateField(field,errorFn)

Reset the form

$f.resetFields()

Remove the form

$f.remove()

Get all fields of the form

$f.fields()

Submit the form

$f.submit()

Rules rules:

Hidden Hidden field

HiddenRule: {type:"hidden", field:"id", // field name value:"14" //input value}Copy the code

The input fields

InputRule: {type:"input", title:" merchandise name", //label name field:"goods_name", // value:" iPhone 7", //input value, props: {"type": "text", // Input field type, the options are text, password, textarea, URL, email, date "clearable":false, // Whether to display the empty button "disabled": "Readonly ": false, "rows": 4, "autosize": {minRows: 2, maxRows: 6} "number": {minRows: 2, maxRows: 6} "number": False, // Convert user input to Number type "autofocus": false, // automatically get focus" autocomplete": "Off ", // native autocomplete (off and ON "placeholder") :" Please input the commodity name ", // placeholder text "size": "Default ", // Enter the box size. The options are large, small, default, or no value." spellCheck ": false // Native spellcheck properties}, validate:[{required: true, message: 'Mailbox cannot be empty', trigger: 'blur' }, { type: 'email', message: 'Incorrect email format', trigger: 'blur' } ] }Copy the code

Radio radio buttons

radioRule : {type:" postage", title:" postage", field:"is_postage", value:"0", Options :[{value:"0",label:" no support ",disabled:false}, {value:"1",label:" support ",disabled:true}], props: {"type":undefined, // Optional value is button or not, for button style "size":"default", // single box size, "Vertical ":false}, validate:[]}Copy the code

The checkbox checkbox

checkboxRule : {type: "checkbox", the title: "label", the field: "label", value: [" 1 ", "2", "3"), / / input value, Options :[{value:"1",label:" useful ",disabled:true}, {value:"2",label:" convenient ",disabled:false}, {value:"3",label:" utility ",disabled:false}, {value:"4",label:" valid ",disabled:false}], props: props {"size":"default" // The size of the multi-box group, large, small, default, or not set}, validate:[]}Copy the code

The switch switch

SwitchRule: {type:"switch", title:" is_show", field:"is_show", value:"1",//input value, props: {"size":"default", // The size of the switch, the value can be large, small, default or no. It is recommended to use large if two characters are used. FalseValue :" falseValue":" false ", // Disables the switch "trueValue":"1", // Value at selected times, which can be useful when voting for a falseValue such as 1 and 0 }, slot: {open:" shelf ", // custom display when open close:" shelf "// custom display when closed}, //slot can not be configured with validate:[]}Copy the code

Select the selector

SelectRule: {type: "select", field: "cate_id", title: "product category ", value: "104", //input value, multiple = true value = array [value,value,... Props: {"multiple": false, // Whether to support "clearable": false, // Whether to empty options, only for radio "filterable": // "remote": false, // Whether to use remote search // "remote-method":()=>{}, // "loading": False, // Whether you are currently searching remotely // "loading-text": // select the size of the box (large, small, default, or placeholder); "Please select ", // Select box default text" not-found-text": "no matching data ", // display content when the drop-down list is empty "placement": }, options: [{"value": "104", "label": [{"value": "104", "label": "Ecological vegetables", "disabled" : false}, {" value ":" 105 ", "label" : "fresh fruit", "disabled" : false}]}Copy the code

DatePicker DatePicker

DatePickerRule: {type: "DatePicker", field: "section_day", title: "active date ", value: 1519110955000 | | new Date (), / / input value, the type of daterange, datetimerange value for array [start_value end_value] props: {" type ": "Date ", // Display type, optional values are date, daterange, dateTime, dateTimerange, Year, month "format":" YYYY-MM-DD ", // Display date format" placement": "Bottom-start ", // Where the date picker appears, The optional value is toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end "Placeholder ":" please select the time ", // placeholder text "confirm":false, // whether to display the bottom control bar, after opening, select the date, the selector will not be closed, only after user confirmation can be closed "size":"default", // size, The options are large, small, default, or "disabled":false, // Whether to disable the selector "clearable":true, // Whether to display the clear button "readonly":false, // Completely read-only, "Editable ":false // Can I enter}, validate:[]}Copy the code

TimePicker TimePicker

TimePickerRule: {type: "TimePicker", field: "section_time", title: "active time", value: [], //input value, type is timerange value is array [start_value,end_value] props: {"type": Timerange "format": "HH:mm:ss", // Display type: time, timerange" format": "HH:mm:ss", // Display time format: "steps": [], // Interval of the drop-down list. The three items of the array correspond to hours, minutes, and seconds. For example, if the value is set to [1, 15], 00, 15, 30, 45 minutes are displayed. "placement": "Bottom-start ", // the position where the time selector appears, The optional value is toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end "Placeholder ":" please select the time ", // placeholder text "confirm":false, // whether to display the bottom control bar, after opening, select the date, the selector will not be closed, only after user confirmation can be closed "size":"default", // size, The options are large, small, default, or "disabled":false, // Whether to disable the selector "clearable":true, // Whether to display the clear button "readonly":false, // Completely read-only, "Editable ":false // Can I enter}, validate:[]}Copy the code

InputNumber Indicates the number input box

InputNumberRule: {type: "InputNumber", field: "sort", title: "sort", value: 0, //input value props: {" Max ": Undefined, // undefined "min": undefined, // minimum "step": 1, // Each change can be decimal "size":"default", // input box size, The value can be large, small, or default, or "disabled":false. "readonly":false. "editable":true. // "precision":0}, validate:[]}Copy the code

ColorPicker ColorPicker

ColorPickerRule: {type: "ColorPicker", field: "coloe", title: "color ", value: '#ff7271', //input value: {"alpha": False, // Whether to support transparency "hue": true, // Whether to support color "recommend": False, // Whether to display the recommended color preset "size":"default", // the size can be large, small, default or not set "colors":[], // Custom color preset "format":"hex" // color format, HSL, HSV, HEX, RGB, hex}, validate:[]}Copy the code

The Upload to Upload

UploadRule: {type: "Upload", field: "PIC ", title: "Upload", value: [], //input value: props: {"type":"select", // Upload control type, optional values are select (click to select), drag (support drag) "action": "", // Upload address, must be "headers": {}, // Set the upload header to "multiple": False, // Whether to support multiple selection of files "data":{}, // with the additional parameter "name":"", // upload the file field name" with-credentials":false, "Accept ":"", "format":[], "accept": [], "accept": [], "accept": [], "accept": [], "accept": [], "accept": [], "accept": [], "accept": [], "accept": [], "accept": [], "accept": [] Format is the file name suffix, accept is the native Accept attribute of the input tag, which will filter the file selection. You can use both "max-size":undefined, // file size limit, Unit KB "beforeUpload":()=>{}, // hook before uploading file, parameter is uploaded file, stop uploading "onProgress":()=>{} if return false or Promise, // hook before uploading file, Return fields are event, file, fileList "onSuccess":(push, response, file, fileList)=>{let filePath = response.data.filepath; push(filePath); }, // Hook for successful file upload, Return fields push, response, file, filelist. push(filePath) add the uploaded path to value "onError":()=>{}, // hook for failed file upload, Error, file, fileList "onPreview":()=>{}, "OnRemove ":()=>{}, // list of files to remove the hook, Return field file, fileList "onFormatError":()=>{}, // hook for failed file format validation, The return fields are file, fileList "onExceededSize":()=>{}, // The hook of a file whose size exceeds the specified limit. The return fields are file, fileList "default-file-list":[{name: 'img1.jpg', url: 'http://www.xxx.com/img1.jpg' }, { name: 'img2.jpg', url: 'http://www.xxx.com/img2.jpg'}] / / the default uploaded file list}, validate: []}Copy the code

Accept File type: developer.mozilla.org/en-US/docs/…

Time format

Contact & tip

Email address:[email protected]

Please leave your name here