示例 安裝 npm install form-create OR git clone https://github.com/xaboy/form-create.git cd form-create npm install 引入 <!-- import Vue --> <script src="nod ...
具有數據收集、校驗和提交功能的表單生成器，包含覆選框、單選框、輸入框、下拉選擇框等元素以及,省市區三級聯動,時間選擇,日期選擇,顏色選擇,文件/圖片上傳功能，支持事件擴展。
歡迎大家star學習交流：github地址
示例
安裝
npm install form-create
OR
git clone https://github.com/xaboy/form-create.git cd form-create npm install
引入
<!-- 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> <!-- 省市區三級聯動json數據 --> <script src="/district/province_city_area.js"></script> <!-- 模擬數據 --> <script src="mock.js"></script> <!-- import formCreate --> <script src="dist/form-create.min.js"></script>
註意! iview版本請>=2.9.2,否則可能存在問題
使用
let rules = window.mock; new Vue({ mounted:function(){ let $f = this.$formCreate(mock, { onSubmit:function (formData) { console.log(formData); $f.submitStatus({loading:true}); } }); //動態添加表單元素 $f.append($r,'goods_name'); } })
$formCreate 參數
- rules 表單生成規則 [inputRule,selectRule,...]
- options 初始化配置參數 (詳細見底部 createOptions)
$f 實例方法
- formData() 獲取表單的value
- getValue(field) 獲取指定欄位的value
- changeField(field,value) 修改指定欄位的value
- resetFields() 重置表單
- destroy() 銷毀表單
- removeField(field) 刪除指定欄位
- fields() 獲得表單所有欄位名稱
- submit() 表單驗證通過後提交表單,觸發onSubmit事件
- validate(successFn,errorFn) 表單驗證,如果驗證通過執行successFn,未通過則執行errorFn
- validateField(field,callback) 表單驗證指定欄位
$f.validateField(field,(errMsg)=>{ if(errMsg){ //TODO 驗證未通過 }else{ //TODO 驗證通過 } });
- prepend(rule,field = undefined) 在field的欄位之前輸入指定表單元素,不傳入field預設在第一個
$f.prepend({ type:"input", title:"商品簡介", field:"goods_info", value:"", props: { "type": "text", "placeholder": "請輸入商品簡介", }, validate:[ { required: true, message: '請輸入商品簡介', trigger: 'blur' }, ], });
- append(rule,field = undefined) 在field的欄位之前輸入指定表單元素,不傳入field預設在最後一個
$f.append({ type:"input", title:"商品簡介", field:"goods_info", value:"", props: { "type": "text", "placeholder": "請輸入商品簡介", }, validate:[ { required: true, message: '請輸入商品簡介', trigger: 'blur' }, ], });
- submitStatus(props) 修改表單提交按鈕狀態
$f.submitStatus({ //按鈕類型，可選值為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 })
- btn.loading() 讓表單提交按鈕進入loading狀態
- btn.finish() 讓表單提交按鈕恢復正常狀態
rules 表單元素規則
hidden 隱藏欄位
hiddenRule: { type:"hidden",//必填! //欄位名稱 field:"id", //必填! //input值 value:"14" //必填! }
input 輸入框
inputRule : { type:"input",//必填! //label名稱 title:"商品名稱",//必填! //欄位名稱 field:"goods_name",//必填! //input值 value:"iphone 7", props: { //輸入框類型，可選值為 text、password、textarea、url、email、date "type": "text", //必填! //是否顯示清空按鈕 "clearable":false, //設置輸入框為禁用狀態 "disabled": false, //設置輸入框為只讀 "readonly": false, //文本域預設行數，僅在 textarea 類型下有效 "rows": 4, //自適應內容高度，僅在 textarea 類型下有效，可傳入對象，如 { minRows: 2, maxRows: 6 } "autosize": false, //將用戶的輸入轉換為 Number 類型 "number": false, //自動獲取焦點 "autofocus": false, //原生的自動完成功能，可選值為 off 和 on "autocomplete": "off", //占位文本 "placeholder": "請輸入商品名稱", //輸入框尺寸，可選值為large、small、default或者不設置 "size": "default", //原生的 spellcheck 屬性 "spellcheck": false, }, event:{ //按下回車鍵時觸發 enter:(event)=>{}, //設置 icon 屬性後，點擊圖標時觸發 click:(event)=>{}, //數據改變時觸發 change:(event)=>{}, //輸入框聚焦時觸發 focus:(event)=>{}, //輸入框失去焦點時觸發 blur:(event)=>{}, //原生的 keyup 事件 keyup:(event)=>{}, //原生的 keydown 事件 keydown:(event)=>{}, //原生的 keypress 事件 keypress:(event)=>{}, }, validate:[ { required: true, message: '請輸入goods_name', trigger: 'blur' }, ], }
validate 表單驗證規則，具體配置查看 : https://github.com/yiminghe/async-validator
radio 單選框
radioRule : { type:"radio",//必填! //label名稱 title:"是否包郵",//必填! //欄位名稱 field:"is_postage",//必填! //input值 value:"0", //可選參數 options:[ {value:"0",label:"不包郵",disabled:false}, {value:"1",label:"包郵",disabled:true}, ],//必填! props: { //可選值為 button 或不填，為 button 時使用按鈕樣式 "type":undefined, //單選框的尺寸，可選值為 large、small、default 或者不設置 "size":"default", //是否垂直排列，按鈕樣式下無效 "vertical":false, }, event:{ //在選項狀態發生改變時觸發，返回當前狀態。通過修改外部的數據改變時不會觸發 change:(...arg)=>{}, }, validate:[], }
checkbox 覆選框
checkboxRule : { type:"checkbox",//必填! //label名稱 title:"標簽",//必填! //欄位名稱 field:"label",//必填! //input值 value:[ "1","2","3" ], //可選參數 options:[ {value:"1",label:"好用",disabled:true}, {value:"2",label:"方便",disabled:false}, {value:"3",label:"實用",disabled:false}, {value:"4",label:"有效",disabled:false}, ],//必填! props: { //多選框組的尺寸，可選值為 large、small、default 或者不設置 "size":"default", }, event:{ //只在單獨使用時有效。在選項狀態發生改變時觸發，通過修改外部的數據改變時不會觸發 change:(...arg)=>{}, }, validate:[], }
select 選擇器
selectRule : { type: "select",//必填! field: "cate_id",//必填! title: "產品分類",//必填! //input值 value: ["104","105"], //可選參數 options: [ {"value": "104", "label": "生態蔬菜", "disabled": false}, {"value": "105", "label": "新鮮水果", "disabled": false}, ],//必填! props: { //是否支持多選 "multiple": true, //是否可以清空選項，只在單選時有效 "clearable": false, //是否支持搜索 "filterable": true, // 暫不支持遠程搜索 // "remote": false, //是否使用遠程搜索 // "remote-method":Function, //遠程搜索的方法 // "loading": false, //當前是否正在遠程搜索 // "loading-text": "載入中", //遠程搜索中的文字提示 //選擇框大小，可選值為large、small、default或者不填 "size":"default", //選擇框預設文字 "placeholder": "請選擇", //當下拉列表為空時顯示的內容 "not-found-text": "無匹配數據", //彈窗的展開方向，可選值為 bottom 和 top "placement": "bottom", //是否禁用 "disabled": false, }, event:{ //選中的Option變化時觸發，返回 value change:(checked)=>{}, //搜索詞改變時觸發 'query-change':(keyword)=>{}, }, validate:[], }
switch 開關
switchRule : { type:"switch",//必填! //label名稱 title:"是否上架",//必填! //欄位名稱 field:"is_show",//必填! //input值 value:"1", props: { //開關的尺寸，可選值為large、small、default或者不寫。建議開關如果使用了2個漢字的文字，使用 large。 "size":"default", //禁用開關 "disabled":false, //選中時的值，當使用類似 1 和 0 來判斷是否選中時會很有用 "trueValue":"1", //沒有選中時的值，當使用類似 1 和 0 來判斷是否選中時會很有用 "falseValue":"0", }, slot: { //自定義顯示打開時的內容 open:"上架", //自定義顯示關閉時的內容 close:"下架", }, event:{ //開關變化時觸發，返回當前的狀態 0 | 1 change:(bool)=>{}, }, validate:[], }
DatePicker 日期選擇器
DatePickerRule : { type: "DatePicker",//必填! field: "section_day",//必填! title: "活動日期",//必填! //input值, type為daterange,datetimerange value為數組 [start_value,end_value] value: ['2018-02-20', new Date()], props: { //顯示類型，可選值為 date、daterange、datetime、datetimerange、year、month "type": "datetimerange",//必填! //展示的日期格式 "format": "yyyy-MM-dd HH:mm:ss", //日期選擇器出現的位置，可選值為toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end "placement": "bottom-start", //占位文本 "placeholder":"請選擇獲得時間", //是否顯示底部控制欄，開啟後，選擇完日期，選擇器不會主動關閉，需用戶確認後才可關閉 "confirm":false, //尺寸，可選值為large、small、default或者不設置 "size":"default", //是否禁用選擇器 "disabled":false, //是否顯示清除按鈕 "clearable":true, //完全只讀，開啟後不會彈出選擇器 "readonly":false, //文本框是否可以輸入 "editable":false, }, event:{ //日期發生變化時觸發,已經格式化後的日期，比如 2016-01-01 change:(value)=>{}, //彈出日曆和關閉日曆時觸發 true | false 'open-change':(bool)=>{}, //在 confirm 模式或 clearable = true 時有效，在清空日期時觸發 clear:(...arg)=>{}, }, validate:[], }
TimePicker 時間選擇器
TimePickerRule : { type: "TimePicker",//必填! field: "section_time",//必填! title: "活動時間",//必填! //input值, type為timerange value為數組 [start_value,end_value] value: [], props: { //顯示類型，可選值為 time、timerange "type": "timerange", //必填! //展示的時間格式 "format": "HH:mm:ss", //下拉列表的時間間隔，數組的三項分別對應小時、分鐘、秒。例如設置為 [1, 15] 時，分鐘會顯示：00、15、30、45。 "steps": [], //時間選擇器出現的位置，可選值為toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end "placement": "bottom-start", //占位文本 "placeholder":"請選擇獲得時間", //是否顯示底部控制欄，開啟後，選擇完日期，選擇器不會主動關閉，需用戶確認後才可關閉 "confirm":false, //尺寸，可選值為large、small、default或者不設置 "size":"default", //是否禁用選擇器 "disabled":false, //是否顯示清除按鈕 "clearable":true, //完全只讀，開啟後不會彈出選擇器 "readonly":false, //文本框是否可以輸入 "editable":false, }, event:{ //時間發生變化時觸發 已經格式化後的時間，比如 09:41:00 change:(checked)=>{}, //彈出浮層和關閉浮層時觸發 true | false 'open-change':(bool)=>{}, //在清空日期時觸發 clear:(...arg)=>{}, }, validate:[], }
InputNumber 數字輸入框
InputNumberRule : { type: "InputNumber",//必填! field: "sort",//必填! title: "排序",//必填! //input值 value: 1, props: { //最大值 "max": undefined, //最小值 "min": undefined, //每次改變的步伐，可以是小數 "step": 1, //輸入框尺寸，可選值為large、small、default或者不填 "size":"default", //設置禁用狀態 "disabled":false, //是否設置為只讀 "readonly":false, //是否可編輯 "editable":true, //數值精度 "precision":0, }, event:{ //數值改變時的回調，返回當前值 change:(value)=>{}, //聚焦時觸發 focus:(event)=>{}, //失焦時觸發 blur:(event)=>{}, }, validate:[], }
ColorPicker 顏色選擇器
ColorPickerRule : { type: "ColorPicker",//必填! field: "color",//必填! title: "顏色",//必填! //input值 value: '#ff7271', props: { //是否支持透明度選擇 "alpha": false, //是否支持色彩選擇 "hue": true, //是否顯示推薦的顏色預設 "recommend": false, //尺寸，可選值為large、small、default或者不設置 "size":"default", //自定義顏色預設 "colors":[], //顏色的格式，可選值為 hsl、hsv、hex、rgb,開啟 alpha 時為 rgb，其它為 hex "format":"hex", }, event:{ //當綁定值變化時觸發，返回當前值 change:(color)=>{}, //聚焦時觸發 面板中當前顯示的顏色發生改變時觸發 'active-change':(color)=>{}, }, validate:[], }
Cascader 多級聯動
CascaderRule: { type:"cascader",//必填! title:"所在區域",//必填! field:"address",//必填! //input值 value:['陝西省','西安市','新城區'], props:{ //可選項的數據源，格式參照示例說明 data:window.province || [],//必填! //選擇後展示的函數，用於自定義顯示格式 renderFormat:label => label.join(' / '), //是否禁用選擇器 disabled:false, //是否支持清除 clearable:true, //輸入框占位符 placeholder:'請選擇', //次級菜單展開方式，可選值為 click 或 hover trigger:'click', //當此項為 true 時，點選每級菜單選項值都會發生變化，具體見上面的示例 changeOnSelect:false, //輸入框大小，可選值為large和small或者不填 size:undefined, //動態獲取數據，數據源需標識 loading loadData:()=>{}, //是否支持搜索 filterable:false, //當搜索列表為空時顯示的內容 notFoundText:'無匹配數據', //是否將彈層放置於 body 內，在 Tabs、帶有 fixed 的 Table 列內使用時，建議添加此屬性，它將不受父級樣式影響，從而達到更好的效果 transfer:false, }, event:{ //選擇完成後的回調，返回值 value 即已選值 value，selectedData 為已選項的具體數據 change:(value, selectedData)=>{}, //展開和關閉彈窗時觸發 'visible-change':bool=>{} }, validate:[], }
Upload 上傳
UploadRule : { type: "Upload",//必填! field: "pic",//必填! title: "輪播圖",//必填! //input值,當maxLength等與1時值為字元串,大於1時值為數組 value: ['http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'], //input值 props: { //上傳控制項的類型，可選值為 select（點擊選擇），drag（支持拖拽） "type":"select", //必填! //上傳文件類型，可選值為 image（圖片上傳），file（文件上傳） "uploadType":"image", //必填! //上傳的地址 "action": "", //必填! //上傳的文件欄位名 "name":"", //上傳時附帶的額外參數 "data":{}, //設置上傳的請求頭部 "headers": {}, //是否支持多選文件 "multiple": true, //支持發送 cookie 憑證信息 "withCredentials":false, //不支持 // "showUploadList":false, //是否顯示已上傳文件列表 // "defaultFileList":[], // 預設已上傳的文件列表 //接受上傳的文件類型 "accept":"", //支持的文件類型，與 accept 不同的是，format 是識別文件的尾碼名，accept 為 input 標簽原生的 accept 屬性，會在選擇文件時過濾，可以兩者結合使用 "format":[], //文件大小限制，單位 kb "maxSize":undefined, //可上傳文件數量 "maxLength":1, //上傳文件之前的鉤子，參數為上傳的文件，若返回 false 或者 Promise 則停止上傳 "beforeUpload":()=>{}, //文件上傳時的鉤子，返回欄位為 event, file, fileList "onProgress":()=>{}, //文件上傳成功時的鉤子，返回欄位為 response, file, fileList,若需有把文件添加到文件列表中,在函數值返回即可 "onSuccess":function () { return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'; }, //必填! //文件上傳失敗時的鉤子，返回欄位為 error, file, fileList "onError":(error, file, fileList)=>{}, //點擊已上傳的文件鏈接時的鉤子，返回欄位為 file， 可以通過 file.response 拿到服務端返回數據 "onPreview":()=>{}, //文件列表移除文件時的鉤子，返回欄位為 file, fileList "onRemove":()=>{}, //文件格式驗證失敗時的鉤子，返回欄位為 file, fileList "onFormatError":()=>{}, //文件超出指定大小限制時的鉤子，返回欄位為 file, fileList "onExceededSize":()=>{}, //輔助操作按鈕的圖標 ,設置為false將不顯示 handleIcon:'ionic', //點擊輔助操作按鈕事件 onHandle:(src)=>{}, //是否可刪除,設置為false是不顯示刪除按鈕 allowRemove:true, }, }
accept 文件類型： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept
全局配置 createOptions
{ //插入節點,預設document.body el:null, //form配置 form:{ //是否開啟行內表單模式 inline:false, //表單域標簽的位置，可選值為 left、right、top labelPosition:'right', //表單域標簽的寬度，所有的 FormItem 都會繼承 Form 組件的 label-width 的值 labelWidth:125, //是否顯示校驗錯誤信息 showMessage:true, //原生的 autocomplete 屬性，可選值為 off 或 on autocomplete:'off', }, //文件上傳全局配置 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, }, //表單提交事件 onSubmit:(formData)=>{}, //提交按鈕配置,設置為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, } }
