PHP表單生成器,快速生成現代化的form表單,快速上手

時間  2019-11-11
標籤 php 表單 成器 快速 生成 現代化 form 上手 欄目 PHP 简体版
原文   原文鏈接

form-builder

PHP表單生成器，快速生成現代化的form表單。包含複選框、單選框、輸入框、下拉選擇框等元素以及省市區三級聯動、時間選擇、日期選擇、顏色選擇、樹型、文件/圖片上傳等功能。php

詳細查看: Github地址 | Composer地址

演示項目: 開源的高品質微信商城html

本項目還在不斷開發完善中,若有建議或問題請在這裏提出

安裝

composer require xaboy/form-buildergit

示例

 

示例

例子 (TP框架)

版本1 編輯權限

$form = Form::create(Url::build('update',array('id'=>$id)),[
            Form::input('menu_name','按鈕名稱',$menu['menu_name']),
            Form::select('pid','父級id',(string)$menu->getData('pid'))->setOptions(function()use($id){
                $list = (Util::sortListTier(MenusModel::where('id','<>',$id)->select()->toArray(),'頂級','pid','menu_name'));
                $menus = [['value'=>0,'label'=>'頂級按鈕']];
                foreach ($list as $menu){
                    $menus[] = ['value'=>$menu['id'],'label'=>$menu['html'].$menu['menu_name']];
                }
                return $menus;
            })->filterable(1),
            Form::select('module','模塊名',$menu['module'])->options([['label'=>'總後臺','value'=>'admin'],['label'=>'總後臺1','value'=>'admin1']]),
            Form::input('controller','控制器名',$menu['controller']),
            Form::input('action','方法名',$menu['action']),
            Form::input('params','參數',MenusModel::paramStr($menu['params']))->placeholder('舉例:a/123/b/234'),
            Form::frameInputOne('icon','圖標',Url::build('admin/widget.widgets/icon',array('fodder'=>'icon')),$menu['icon'])->icon('ionic'),
            Form::number('sort','排序',$menu['sort']),
            Form::radio('is_show','是否菜單',$menu['is_show'])->options([['value'=>0,'label'=>'隱藏'],['value'=>1,'label'=>'顯示(菜單隻顯示三級)']])
        ]);
$form->setMethod('post')->setTitle('編輯權限');
$this->assign(compact('form'));
return $this->fetch('public/form-builder');

 

效果

https://raw.githubusercontent.com/xaboy/form-builder/master/images/demo02.jpg

版本2 添加產品

$field = [
    Form::select('cate_id','產品分類')->setOptions(function(){
        $list = CategoryModel::getTierList();
        foreach ($list as $menu){
            $menus[] = ['value'=>$menu['id'],'label'=>$menu['html'].$menu['cate_name'],'disabled'=>$menu['pid']== 0];//,'disabled'=>$menu['pid']== 0];
        }
        return $menus;
    })->filterable(1)->multiple(1),
    Form::input('store_name','產品名稱')->col(Form::col(8)),
    Form::input('store_info','產品簡介')->type('textarea'),
    Form::input('keyword','產品關鍵字')->placeholder('多個用英文狀態下的逗號隔開'),
    Form::input('unit_name','產品單位','件'),
    Form::frameImageOne('image','產品主圖片(305*305px)',Url::build('admin/widget.images/index',array('fodder'=>'image')))->icon('image')->width('100%')->height('550px'),
    Form::frameImages('slider_image','產品輪播圖(640*640px)',Url::build('admin/widget.images/index',array('fodder'=>'slider_image')))->maxLength(5)->icon('images')->width('100%')->height('550px')->spin(0),
    Form::number('price','產品售價')->min(0)->col(8),
    Form::number('ot_price','產品市場價')->min(0)->col(8),
    Form::number('give_integral','贈送積分')->min(0)->precision(0)->col(8),
    Form::number('postage','郵費')->min(0)->col(Form::col(8)),
    Form::number('sales','銷量')->min(0)->precision(0)->col(8),
    Form::number('ficti','虛擬銷量')->min(0)->precision(0)->col(8),
    Form::number('stock','庫存')->min(0)->precision(0)->col(8),
    Form::number('cost','產品成本價')->min(0)->col(8),
    Form::number('sort','排序')->col(8),
    Form::radio('is_show','產品狀態',0)->options([['label'=>'上架','value'=>1],['label'=>'下架','value'=>0]])->col(8),
    Form::radio('is_hot','熱賣單品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_benefit','促銷單品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_best','精品推薦',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_new','首發新品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_postage','是否包郵',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8)
];
$form = Form::create(Url::build('save'));
$form->setMethod('post')->setTitle('添加產品')->components($field);
$this->assign(compact('form'));
return $this->fetch('public/form-builder');

 

效果

https://raw.githubusercontent.com/xaboy/form-builder/master/images/demo03.jpg

版本3 編輯產品

$product = ProductModel::get($id);
$form = Form::create(Url::build('update',array('id'=>$id)),[
    Form::select('cate_id','產品分類',explode(',',$product->getData('cate_id')))->setOptions(function(){
        $list = CategoryModel::getTierList();
        foreach ($list as $menu){
            $menus[] = ['value'=>$menu['id'],'label'=>$menu['html'].$menu['cate_name'],'disabled'=>$menu['pid']== 0];//,'disabled'=>$menu['pid']== 0];
        }
        return $menus;
    })->filterable(1)->multiple(1),
    Form::input('store_name','產品名稱',$product->getData('store_name')),
    Form::input('store_info','產品簡介',$product->getData('store_info'))->type('textarea'),
    Form::input('keyword','產品關鍵字',$product->getData('keyword'))->placeholder('多個用英文狀態下的逗號隔開'),
    Form::input('unit_name','產品單位',$product->getData('unit_name')),
    Form::frameImageOne('image','產品主圖片(305*305px)',Url::build('admin/widget.images/index',array('fodder'=>'image')),$product->getData('image'))->icon('image')->width('100%')->height('550px'),
    Form::frameImages('slider_image','產品輪播圖(640*640px)',Url::build('admin/widget.images/index',array('fodder'=>'slider_image')),json_decode($product->getData('slider_image'),1))->maxLength(5)->icon('images'),
    Form::number('price','產品售價',$product->getData('price'))->min(0)->precision(2)->col(8),
    Form::number('ot_price','產品市場價',$product->getData('ot_price'))->min(0)->col(8),
    Form::number('give_integral','贈送積分',$product->getData('give_integral'))->min(0)->precision(0)->col(8),
    Form::number('postage','郵費',$product->getData('postage'))->min(0)->col(8),
    Form::number('sales','銷量',$product->getData('sales'))->min(0)->precision(0)->col(8),
    Form::number('ficti','虛擬銷量',$product->getData('ficti'))->min(0)->precision(0)->col(8),
    Form::number('stock','庫存',ProductModel::getStock($id)>0?ProductModel::getStock($id):$product->getData('stock'))->min(0)->precision(0)->col(8),
    Form::number('cost','產品成本價',$product->getData('cost'))->min(0)->col(8),
    Form::number('sort','排序',$product->getData('sort'))->col(8),
    Form::radio('is_show','產品狀態',$product->getData('is_show'))->options([['label'=>'上架','value'=>1],['label'=>'下架','value'=>0]])->col(8),
    Form::radio('is_hot','熱賣單品',$product->getData('is_hot'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_benefit','促銷單品',$product->getData('is_benefit'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_best','精品推薦',$product->getData('is_best'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_new','首發新品',$product->getData('is_new'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
Form::radio('is_postage','是否包郵',$product->getData('is_postage'))->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8)
]);
$form->setMethod('post')->setTitle('編輯產品');
$this->assign(compact('form'));
return $this->fetch('public/form-builder');

 

效果

https://raw.githubusercontent.com/xaboy/form-builder/master/images/demo04.jpg

當form提交成功後會調用 window.formCreate.formSuccess(res,$f,formData) 做爲回調方法github

代碼

namespace Test;
use FormBuilder\Form;

//input組件
$input = Form::input('goods_name','商品名稱');

//日期區間選擇組件
$dateRange = Form::dateRange(
    'limit_time',
    '區間日期',
    strtotime('- 10 day'),
    time()
);

//省市二級聯動組件
$cityArea = Form::city('address','收貨地址',[
    '陝西省','西安市'
]);

$checkbox = Form::checkbox('label','表單',[])->options([
    ['value'=>'1','label'=>'好用','disabled'=>true],
    ['value'=>'2','label'=>'方便','disabled'=>true]
])->col(Form::col(12));

$tree = Form::treeChecked('tree','權限',[])->data([
    Form::treeData(11,'leaf 1-1-1')->children([Form::treeData(13,'131313'),Form::treeData(14,'141414')]),
    Form::treeData(12,'leaf 1-1-2')
])->col(Form::col(12)->xs(12));

//建立form
$form = Form::create('/save.php',[
    $input,$dateRange,$cityArea,$checkbox,$tree
]);

$html = $form->formRow(Form::row(10))->setMethod('get')->setTitle('編輯商品')->view();

//輸出form頁面
echo $html;

 

AJAX請求返回

namespace \FormBuilder\Jsonajax

  • Json::succ(msg,data = []) 表單提交成功
  • Json::fail(errorMsg,data = []) 表單提交失敗
  • Json::uploadSucc(filePath,msg) 文件/圖片上傳成功,上傳成功後返回文件地址
  • Json::uploadFail(errorMsg) 文件/圖片上傳失敗

Form 表單生成類

namespace \FormBuilder\Formjson

  • components(array $components = []) 批量添加組件
  • formRow(Row $row) 設置表單Row規則
  • formStyle(FormStyle $formStyle) 設置表單樣式
  • setAction($action) 設置提交地址
  • getConfig($key='') 設置配置文件
  • setMethod($method) 設置提交方式
  • setMethod($method) 設置提交方式
  • append(FormComponentDriver $component) 追加組件
  • prepend(FormComponentDriver $component) 開頭插入組件
  • getRules() 得到表單規則
  • view() 獲取表單視圖
  • script() 獲取表單生成器所需所有js
  • formScript() 獲取生成表單的js代碼,可用js變量接受生成函數create,執行create(el,callback)便可生成表單
  • getScript() 獲取表單生成器所需js
  • create($action, array $components = []) 生成表單快捷方法
  • setTitle($title) 設置title

FormStyle表單樣式

  • Form::style
* @method $this inline(Boolean $bool) 是否開啓行內表單模式
 * @method $this labelPosition(String $labelPosition) 表單域標籤的位置，可選值爲 left、right、top
 * @method $this labelWidth(Number $labelWidth) 表單域標籤的寬度，全部的 FormItem 都會繼承 Form 組件的 label-width 的值
 * @method $this showMessage(Boolean $bool) 是否顯示校驗錯誤信息
 * @method $this autocomplete($bool = false) 原生的 autocomplete 屬性，可選值爲 true = off 或 false = on

 

Row柵格規則

  • Form::row
 * @method $this gutter(Number $gutter) 柵格間距，單位 px，左右平分
 * @method $this type(String $type) 柵格的順序，在flex佈局模式下有效
 * @method $this align(String $align) flex 佈局下的垂直對齊方式，可選值爲top、middle、bottom
 * @method $this justify(String $justify) flex 佈局下的水平排列方式，可選值爲start、end、center、space-around、space-between
 * @method $this className(String $className) 自定義的class名稱

 

參考: view row柵格佈局數組

Col柵格規則

  • Form::col
 * @method $this span(Number $span) 柵格的佔位格數，可選值爲0~24的整數，爲 0 時，至關於display:none
 * @method $this order(Number $order) 柵格的順序，在flex佈局模式下有效
 * @method $this offset(Number $offset) 柵格左側的間隔格數，間隔內不能夠有柵格
 * @method $this push(Number $push) 柵格向右移動格數
 * @method $this pull(Number $pull) 柵格向左移動格數
 * @method $this labelWidth(Number $labelWidth) 表單域標籤的的寬度,默認150px
 * @method $this className(String $className) 自定義的class名稱
 * @method $this xs(Number|Col $span) <768px 響應式柵格，可爲柵格數或一個包含其餘屬性的對象
 * @method $this sm(Number|Col $span) ≥768px 響應式柵格，可爲柵格數或一個包含其餘屬性的對象
 * @method $this md(Number|Col $span) ≥992px 響應式柵格，可爲柵格數或一個包含其餘屬性的對象
 * @method $this lg(Number|Col $span) ≥1200px 響應式柵格，可爲柵格數或一個包含其餘屬性的對象

 

參考: view col柵格佈局微信

select,checkbox,radio組件配置options專用方法

  • option($value, $label, $disabled = false) 單獨設置選項
  • options(array $options, $disabled = false) 批量設置選項
  • setOptions($options, $disabled = false) 批量設置選項 支持匿名函數

如下組件公共方法

  • col($span) 配置col柵格規則,傳入0-24的數字或Col類,默認爲24
  • value($value) 設置組件的值
  • validate(array $validate) 添加驗證規則

組件

namespace \FormBuilder\Formcookie

多級聯動組件

  • Form::cascader 多級聯動組件,value爲array類型
  • Form::city 省市二級聯動,value爲array類型
  • Form::cityArea 省市區三級聯動,value爲array類型
    方法   返回值 方法名(參數)   註釋
 * @method $this type(String $type) 數據類型, 支持 city_area(省市區三級聯動), city (省市二級聯動), other (自定義)
 * @method $this disabled(Boolean $bool) 是否禁用選擇器
 * @method $this clearable(Boolean $bool) 是否支持清除
 * @method $this placeholder(String $placeholder) 佔位文本
 * @method $this trigger(String $trigger) 次級菜單展開方式，可選值爲 click 或 hover
 * @method $this changeOnSelect(Boolean $bool) 當此項爲 true 時，點選每級菜單選項值都會發生變化, 默認爲 false
 * @method $this size(String $size) 輸入框大小，可選值爲large和small或者不填
 * @method $this filterable(Boolean $bool) 是否支持搜索
 * @method $this notFoundText(String $text) 當搜索列表爲空時顯示的內容
 * @method $this transfer(Boolean $bool) /是否將彈層放置於 body 內，在 Tabs、帶有 fixed 的 Table 列內使用時，建議添加此屬性，它將不受父級樣式影響，從而達到更好的效果
 * @method $this required($message = null, $trigger = 'change') 設爲必選
 * @method $this data(array $data) 設置多級聯動可選項的數據
 *  例如: {
 *    "value":"北京市", "label":"北京市", "children":[{
 *        "value":"東城區", "label":"東城區"
 *    }]
 *  }
 * @method $this jsData($var) 設置data爲js變量
 * @method string getType($var) 獲取組件類型

 

複選框組件

  • Form::checkbox
 * @method $this size(String $size) 多選框組的尺寸，可選值爲 large、small、default 或者不設置
 * @method $this required($message = null, $trigger = 'change') 設爲必選

 

顏色選擇組件

  • Form::color
 * @method $this disabled(Boolean $bool) 是否禁用
 * @method $this alpha(Boolean $bool) 是否支持透明度選擇, 默認爲false
 * @method $this hue(Boolean $bool) 是否支持色彩選擇, 默認爲true
 * @method $this recommend(Boolean $bool) 是否顯示推薦的顏色預設, 默認爲false
 * @method $this size(String $size) 尺寸，可選值爲large、small、default或者不設置
 * @method $this format(String $format) 顏色的格式，可選值爲 hsl、hsv、hex、rgb    String    開啓 alpha 時爲 rgb，其它爲 hex
 * @method $this required($message = null, $trigger = 'change') 設爲必選
 * @method $this colors($colors) 自定義顏色預設

 

日期選擇組件

  • Form::date 日期選擇
  • Form::dateRange 日期區間選擇,value爲array類型
  • Form::dateTime 日期+時間選擇
  • Form::dateTimeRange 日期+時間 區間選擇,value爲array類型
  • Form::year 年份選擇
  • Form::month 月份選擇
 * @method $this type(String $type) 顯示類型，可選值爲 date、daterange、datetime、datetimerange、year、month
 * @method $this format(String $format) 展現的日期格式, 默認爲yyyy-MM-dd HH:mm:ss
 * @method $this placement(String $placement) 日期選擇器出現的位置，可選值爲top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end, 默認爲bottom-start
 * @method $this placeholder(String $placeholder) 佔位文本
 * @method $this confirm(Boolean $bool) 是否顯示底部控制欄，開啓後，選擇完日期，選擇器不會主動關閉，需用戶確認後纔可關閉, 默認爲false
 * @method $this size(String $size) 尺寸，可選值爲large、small、default或者不設置
 * @method $this disabled(Boolean $bool) 是否禁用選擇器
 * @method $this clearable(Boolean $bool) 是否顯示清除按鈕
 * @method $this readonly(Boolean $bool) 徹底只讀，開啓後不會彈出選擇器，只在沒有設置 open 屬性下生效
 * @method $this editable(Boolean $bool) 文本框是否能夠輸入, 默認爲false
 * @method $this transfer(Boolean $bool) 是否將彈層放置於 body 內，在 Tabs、帶有 fixed 的 Table 列內使用時，建議添加此屬性，它將不受父級樣式影響，從而達到更好的效果, 默認爲false
 * @method $this splitPanels(Boolean $bool) 開啓後，左右面板不聯動，僅在 daterange 和 datetimerange 下可用。
 * @method $this showWeekNumbers(Boolean $bool) 開啓後，能夠顯示星期數。

 

 

frame組件

  • Form::frame frame組件
  • Form::frameInputs frame組件,input類型,value爲array類型
  • Form::frameFiles frame組件,file類型,value爲array類型
  • Form::frameImages frame組件,image類型,value爲array類型
  • Form::frameInputOne frame組件,input類型,value爲string|number類型
  • Form::frameFileOne frame組件,file類型,value爲string|number類型
  • Form::frameImageOne frame組件,image類型,value爲string|number類型
 * @method $this type(String $type) frame類型, 有input, file, image, 默認爲input
 * @method $this src(String $src) iframe地址
 * @method $this maxLength(int $length) value的最大數量, 默認無限制
 * @method $this icon(String $icon) 打開彈出框的按鈕圖標
 * @method $this height(String $height) 彈出框高度
 * @method $this width(String $width) 彈出框寬度
 * @method $this spin(Boolean $bool) 是否顯示加載動畫, 默認爲 true
 * @method $this frameTitle(String $title) 彈出框標題
 * @method $this handleIcon(Boolean $bool) 操做按鈕的圖標, 設置爲false將不顯示, 設置爲true爲默認的預覽圖標, 類型爲file時默認爲false, image類型默認爲true
 * @method $this allowRemove(Boolean $bool) 是否可刪除, 設置爲false是不顯示刪除按鈕

 

hidden組件

  • Form::hidden hidden組件

數字輸入框組件

  • Form::number
 * @method $this max(float $max) 最大值
 * @method $this min(float $min) 最小值
 * @method $this step(float $step) 每次改變的步伐，能夠是小數
 * @method $this size(String $size) 輸入框尺寸，可選值爲large、small、default或者不填
 * @method $this disabled(Boolean $bool) 設置禁用狀態，默認爲false
 * @method $this placeholder(String $placeholder) 佔位文本
 * @method $this readonly(Boolean $bool) 是否設置爲只讀，默認爲false
 * @method $this editable(Boolean $bool) 是否可編輯，默認爲true
 * @method $this precision(int $precision) 數值精度

 

input輸入框組件

  • Form::input input輸入框

其餘type: text類型Form::text,password類型Form::password,textarea類型Form::textarea,url類型Form::url,email類型Form::email,date類型Form::idateapp

 * @method $this type(String $type) 輸入框類型，可選值爲 text、password、textarea、url、email、date;
 * @method $this size(String $size) 輸入框尺寸，可選值爲large、small、default或者不設置;
 * @method $this placeholder(String $placeholder) 佔位文本
 * @method $this clearable(Boolean $bool) 是否顯示清空按鈕, 默認爲false
 * @method $this disabled(Boolean $bool) 設置輸入框爲禁用狀態, 默認爲false
 * @method $this readonly(Boolean $bool) 設置輸入框爲只讀, 默認爲false
 * @method $this maxlength(int $length) 最大輸入長度
 * @method $this icon(String $icon) 輸入框尾部圖標，僅在 text 類型下有效
 * @method $this rows(int $rows) 文本域默認行數，僅在 textarea 類型下有效, 默認爲2
 * @method $this number(Boolean $bool) 將用戶的輸入轉換爲 Number 類型, 默認爲false
 * @method $this autofocus(Boolean $bool) 自動獲取焦點, 默認爲false
 * @method $this autocomplete(Boolean $bool) 原生的自動完成功能, 默認爲false
 * @method $this spellcheck(Boolean $bool) 原生的 spellcheck 屬性, 默認爲false
 * @method $this wrap(String $warp) 原生的 wrap 屬性，可選值爲 hard 和 soft, 默認爲soft
 * @method $this autoSize($minRows, $maxRows) 自適應內容高度，僅在 textarea 類型下有效

 

單選框組件

  • Form::radio
 * @method $this size(String $size) 單選框的尺寸，可選值爲 large、small、default 或者不設置
 * @method $this vertical(Boolean $bool) 是否垂直排列，按鈕樣式下無效
 * @method $this button() 使用按鈕樣式
 * @method $this required($message = null, $trigger = 'change') 設爲必選

 

評分組件

  • Form::rate
 * @method $this count(int $star) star 總數, 默認爲 5
 * @method $this allowHalf(Boolean $bool) 是否容許半選, 默認爲 false
 * @method $this disabled(Boolean $bool) 是否只讀，沒法進行交互, 默認爲
 * @method $this showText(Boolean $bool) 是否顯示提示文字, 默認爲 false
 * @method $this clearable(Boolean $bool) 是否能夠取消選擇, 默認爲 false

 

select選擇框組件

  • Form::select 選擇框
  • Form::selectMultiple select選擇框,多選,value爲array類型
  • Form::selectOne select選擇框,單選
 * @method $this multiple(Boolean $bool) 是否支持多選, 默認爲false
 * @method $this disabled(Boolean $bool) 是否禁用, 默認爲false
 * @method $this clearable(Boolean $bool) 是否能夠清空選項，只在單選時有效, 默認爲false
 * @method $this filterable(Boolean $bool) 是否支持搜索, 默認爲false
 * @method $this size(String $size) 選擇框大小，可選值爲large、small、default或者不填
 * @method $this placeholder(String $placeholder) 佔位文本
 * @method $this transfer(String $transfer) 是否將彈層放置於 body 內，在 Tabs、帶有 fixed 的 Table 列內使用時，建議添加此屬性，它將不受父級樣式影響，從而達到更好的效果, 默認爲false
 * @method $this placement(String $placement) 彈窗的展開方向，可選值爲 bottom 和 top, 默認爲bottom
 * @method $this notFoundText(String $text) 當下拉列表爲空時顯示的內容, 默認爲 無匹配數據
 * @method $this required($message = null, $trigger = 'change') 設爲必選

 

滑塊組件

  • Form::slider 滑塊組件
  • Form::sliderRange 滑塊組件,區間選擇,
 * @method $this min(float $min) 最小值, 默認 0
 * @method $this max(float $max) 最大值, 默認 100
 * @method $this step(float $step) 步長，取值建議能被（max - min）整除, 默認 1
 * @method $this disabled(Boolean $bool) 是否禁用滑塊, 默認 false
 * @method $this range(Boolean $bool) 是否開啓雙滑塊模式, 默認
 * @method $this showInput(Boolean $bool) 是否顯示數字輸入框，僅在單滑塊模式下有效, 默認 false
 * @method $this showStops(Boolean $bool) 是否顯示間斷點，建議在 step 不密集時使用, 默認 false
 * @method $this showTip(String $tip) 提示的顯示控制，可選值爲 hover（懸停，默認）、always（老是可見）、never（不可見）
 * @method $this inputSize(String $size) 數字輸入框的尺寸，可選值爲large、small、default或者不填，僅在開啓 show-input 時有效

 

開關組件組件

  • Form::switches
 * @method $this size(String $size) 開關的尺寸，可選值爲large、small、default或者不寫。建議開關若是使用了2個漢字的文字，使用 large。
 * @method $this disabled(Boolean $bool) 禁用開關, 默認爲false
 * @method $this trueValue(String $value) 選中時的值，默認爲1
 * @method $this falseValue(String $value) 沒有選中時的值，默認爲0
 * @method $this openStr(String $open) 自定義顯示打開時的內容
 * @method $this closeStr(String $close) 自定義顯示關閉時的內容

 

時間選擇組件

  • Form::timePicker 時間選擇組件
  • Form::time 時間選擇
  • Form::timeRange 時間區間選擇,value爲array類型
 * @method $this type(String $type) 顯示類型，可選值爲 time、timerange
 * @method $this format(String $format) 展現的時間格式, 默認爲HH:mm:ss
 * @method $this placement(String $placement) 時間選擇器出現的位置，可選值爲top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end, 默認爲bottom-start
 * @method $this placeholder(String $placeholder) 佔位文本
 * @method $this confirm(Boolean $bool) 是否顯示底部控制欄, 默認爲false
 * @method $this size(String $size) 尺寸，可選值爲large、small、default或者不設置
 * @method $this disabled(Boolean $bool) 是否禁用選擇器
 * @method $this clearable(Boolean $bool) 是否顯示清除按鈕
 * @method $this readonly(Boolean $bool) 徹底只讀，開啓後不會彈出選擇器，只在沒有設置 open 屬性下生效
 * @method $this editable(Boolean $bool) 文本框是否能夠輸入, 默認爲false
 * @method $this transfer(Boolean $bool) 是否將彈層放置於 body 內，在 Tabs、帶有 fixed 的 Table 列內使用時，建議添加此屬性，它將不受父級樣式影響，從而達到更好的效果, 默認爲false
 * @method $this steps($h, $i = 0, $s = 0) 下拉列表的時間間隔，數組的三項分別對應小時、分鐘、秒, 例如設置爲 [1, 15] 時，分鐘會顯示：00、1五、30、45。

 

上傳組件

  • Form::upload 上傳組件
  • Form::uploadImages 多圖上傳組件,value爲array類型
  • Form::uploadFiles 多文件上傳組件,value爲array類型
  • Form::uploadImageOne 單圖上傳組件
  • Form::uploadFileOne 單文件上傳組件
 * @method $this uploadType(String $uploadType) 上傳文件類型，可選值爲 image（圖片上傳），file（文件上傳）
 * @method $this action(String $action) 上傳的地址
 * @method $this multiple(Boolean $bool) 是否支持多選文件
 * @method $this name(String $name) 上傳的文件字段名
 * @method $this accept(String $accept) 接受上傳的文件類型
 * @method $this maxSize(int $size) 文件大小限制，單位 kb
 * @method $this withCredentials(Boolean $bool) 支持發送 cookie 憑證信息, 默認爲false
 * @method $this maxLength(Int $length) 最大上傳文件數, 0爲無限
 * @method $this headers(array $headers) 設置上傳的請求頭部
 * @method $this format(array $format) 支持的文件類型，與 accept 不一樣的是，format 是識別文件的後綴名，accept 爲 input 標籤原生的 accept 屬性，會在選擇文件時過濾，能夠二者結合使用
 * @method $this data(array $data) 上傳時附帶的額外參數
 * @method $this required($message = null, $trigger = 'change') 設爲必選

 

樹型組件

  • Form::tree 樹型組件
  • Form::treeSelected 選中類型,value爲array類型,當type=selected而且multiple=false,值爲String或Number類型
  • Form::treeChecked 選擇類型,value爲array類型
 * @method $this type(String $type) 類型，可選值爲 checked、selected
 * @method $this multiple(Boolean $bool) 是否支持多選,當`type=selected`而且`multiple=false`,默認爲false,值爲String或Number類型，其餘狀況爲Array類型
 * @method $this showCheckbox(Boolean $bool) 是否顯示多選框,默認爲false
 * @method $this emptyText(String $emptyText) 沒有數據時的提示,默認爲'暫無數據'
 * @method $this data(array $treeData) 設置可選的data,**id必須惟一**
 * @method $this jsData($var) 設置data爲js變量

 

樹型組件data數據類 TreeData

  • Form::treeData 樹型組件data
 * @method $this id(String $id) Id,必須惟一
 * @method $this title(String $title) 標題
 * @method $this expand(Boolean $bool) 是否展開直子節點,默認爲false
 * @method $this disabled(Boolean $bool) 禁掉響應,默認爲false
 * @method $this disableCheckbox(Boolean $bool) 禁掉 checkbox
 * @method $this selected(Boolean $bool) 是否選中子節點
 * @method $this checked(Boolean $bool) 是否勾選(若是勾選，子節點也會所有勾選)
 * @method $this children(array $children) 批量設置子集
 * @method $this child(TreeData $child) 設置子集

 

全部組件生成效果

https://raw.githubusercontent.com/xaboy/form-builder/master/images/components.png

參考

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程