orm-create 表單生成器

具有資料收集、校驗和提交功能的表單生成器，支援雙向資料繫結和事件擴充套件，元件包含有複選框、單選框、輸入框、下拉選擇框等表單元素以及省市區三級聯動,時間選擇,日期選擇,顏色選擇,滑塊,評分,框架,檔案/圖片上傳等功能元件。

詳細檢視: github地址  npm地址 文件地址 

1.2 版本重大更新

• 內部結構優化
• 新增 規則生成器$formCreate.maker
• 新增 滑塊、評分元件
• 優化 檔案上傳元件
• 修復 上傳元件無法驗證等問題

安裝

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.13.0,Vue版本為2.5.*

使用

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)

$formCreate.maker 元件規則生成器

除hidden外,其他配置方式全部相同.詳細參考表單元素規則

props,event,slot傳入引數為物件,例({key:value,...})

validate,options參入引數為陣列,例([options,options,..])

• hidden生成隱藏欄位

• input生成input輸入框

• radio生成單選框

• checkbox生成複選框

• select生成select選擇器

• switch生成switch開關

• datepicker生成日期選擇器元件,別名date

• timepicker生成時間選擇器元件,別名time

• inputnumber生成數字輸入框,別名number

• colorpicker生成顏色選擇器元件,別名color

• cascader生成多級聯動元件

• upload生成上傳元件

• rate生成評分元件

• slider生成滑塊元件

$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,
    }
}

本文來自學習小花，作者：aixuexi666888，轉載請註明原文連結：https://www.cnblogs.com/aixuexi666888/p/15595356.html