由于按鈕屬性比較復雜, 直接寫數組很難記住, 因此將按鈕單獨抽出為一個對象, 方面調用。
按鈕是頁面中控制操作的最小單元
> 按鈕在不同的位置, 會有不同的操作, 具體請參考下面的屬性說明
### 按鈕所在的位置:
- 表單(form)中
> 表單中的按鈕用于控制表單操作, 如提交,取消等操作, 按鈕的操作會自動攜帶表單表單數據
- 表格頂部按鈕
> 表格頂部按鈕用于表格的批量操作, 添加操作等, 批量操作會攜帶列表中選中項的ID列表, 也可選擇攜帶搜索表單的數據(如導出操作)
- 表格行操作按鈕
> 表格行操作按鈕用于操作表格每行的數據, 可攜帶當前行的數據
### 按鈕屬性詳細說明
- title: 按鈕文字
- flag: 按鈕標識, 用于頁面中對按鈕進行操作, 如隱藏按鈕等
- attr: 按鈕的樣式相關屬性
- type: 按鈕類型, 可選值為: `default|primary|success|info|warning|danger|text`
- round: 是否圓角, `true|false`
- plain: 是否鏤空, `true|false`
- circle: 是否圓形按鈕, `true|false`
- icon: 按鈕圖標, 需填寫圖標全類名, 如 `el-icon-add`
> 若要添加自定義圖標, 需要加上圖標的font-family, 如 `el-icon-sicon sicon-disabled`
- disabled: 是否禁用, `true|false`
> 注意: 禁用的按鈕不光樣式是禁用的, 同時也會無法點擊
- text: 是否顯示按鈕文字, 不顯示文字時, 鼠標放按鈕上會彈出一個tooltip顯示文字
> 一般列表中的按鈕不顯示文字, 只顯示圖標
- option: 按鈕的操作參數
- type: 操作類型, 可選值為如下:
> refresh: 刷新當前頁面
> back: 返回上一頁, 如表單頁面中的返回按鈕
> link: 頁面跳轉, 可當前頁面跳轉, 也可打開新頁面, 要打開新頁面請使用target屬性
> pop: 打開彈窗
> ajax: ajax方式操作, 如提交表單, 刪除數據, 上下架等
> relist: 刷新列表, 只有在列表頁面才生效
> null : 無操作
- url: 操作url, 可使用表達式:
> 表達式一般會在列表項的按鈕中使用, 可使用 `__field__`格式調用當前行的數據, 此種方式可以用在url屬性, 也可用于extra_data屬性, 如: `url('user/edit', ["name" => '__name__'])`, 則最終請求地址會在url中攜帶每一行數據的`name`字段的值
- target: 頁面打開方式, type為link類型有效, 此屬性只有一個可選值, _blank: 新頁面打開
- confirm: 按鈕操作前的確認提示, 可選值: `false|true|{title, msg}`
> 確認提示若要自定義提示內容, 可傳一個包含title和msg的數字, 當然也可以只傳一個title或者msg.
- extra_data: 額外數據,
> 一般ajax方式操作才會用到這個屬性, 用來額外提交一些數據.
> 頁面跳轉及打開彈窗時, 會把額外數據放入url中, ajax請求時, 則會附加到請求數據中去
- batch: 是否為批量操作按鈕, 可選值: `true|false`, 僅表格頂部的操作按鈕生效
> 表格頂部的操作按鈕默認就是批量操作, 當為true時, 若不選擇列表項數據, 會提示未選擇數據
- with_search_form: 是否攜帶搜索表單數據, 可選值: `true|false`, 默認為`false`, 僅表格頂部的操作按鈕生效
- hide: 按鈕是否隱藏, `true|false|{field:value}`, 默認不隱藏
- show: 按鈕是否顯示, `true|false|{field: value}`, 默認顯示, 當設置了show屬性時, hide屬性無效
> hide與show一般用于列表項按鈕或表單按鈕, 可使用`{field: vlaue}`方式根據列表項的值動態判斷是否隱藏
> 當在列表項中時, field表示字段名, value可以是單個值, 多個值的數組, 或是一個回調
> 當按鈕在表單中時, field表示表單項, value表示輸入的值 (暫未實現, 目前表單中的按鈕只有hide屬性可用, 且只支持true和false, 先添加到todo)
> value回調說明, 回調是以`cb:`開頭的字符串, 前綴后的內容必須是一個合法的js函數, 回調參數為當前行的數據
### 按鈕全部屬性列表
> Button組件屬性設置方法說明, 除了外部參數, 樣式相關屬性統一用 `setAttr`前綴, 操作相關屬性統一用`setOption`前綴
```
// 按鈕文字
'title' => '',
// 按鈕標識
'flag' => '', // 按鈕標記, 用于前端對特殊的按鈕做特殊處理
/*
* 按鈕樣式屬性 {
* type:default|primary|success|info|warning|danger|text,
* round:true|false,
* plain:true|false,
* circle:true|false,
* icon,
* disabled
* }
*/
'attr' => [
'type' => 'primary',
'round' => false,
'plain' => false,
'circle' => false,
'icon' => '',
'disabled' => false,
],
/*
* 操作參數 {
* type:refresh刷新頁面|back返回上一頁|link頁面跳轉|pop打開彈窗|ajax提交表單|relist刷新列表(在table中有效)|null無操作,
* url,
* target link類型有效:_blank新頁面打開,
* confirm操作前彈框確認: false|true|{title, msg},
* extra_data額外數據: [],
* batch: 是否批量處理按鈕(table中有效),
* with_search_form: 是否攜帶搜索表單數據(table中有效),
* hide: true|{field: value},按鈕隱藏規則,當指定的字段值與指定的值相等時隱藏該按鈕(用于table中的行數據)
* show: false|{field: value},按鈕展示規則,當指定的字段值與指定的值相等時展示該按鈕, 此值配置后hide配置無效(用于table中的行數據)
* }
*/
'option' => [
'type' => 'link',
'url' => '',
'target' => '',
'confirm' => false,
'extra_data' => null,
'batch' => false,
'with_search_form' => false,
'hide' => false,
'show' => true,
],
```
- 序言
- 下載及安裝
- 目錄結構
- 基礎
- 多站點-單入口文件(推薦)
- (舊)多站點-多入口文件方式
- (舊)入口文件
- (舊)站點配置
- 按鈕操作
- 區塊概念
- 構建器(SBuilder)
- 頁面-Page
- 設置頁面標題
- 添加頁面提示信息
- 設置頁面Tab
- 設置頁面背景色
- 設置是否點擊遮罩關閉
- 添加區塊
- 區塊-Block
- 設置區塊名
- 設置區塊布局
- 表單(form)
- 添加表單項通用方法
- 添加表單項
- 單行文本框
- 多行文本框
- 數字輸入框
- 密碼框
- 數組輸入框
- 單選框
- 狀態選擇器
- 復選框
- 下拉框
- 級聯選擇器
- 開關
- 日期選擇器
- 日期時間選擇器
- 日期范圍選擇器
- 日期時間范圍選擇器
- 時間選擇器
- 時間范圍選擇器
- Tree 樹形組件
- 圖標選擇器
- 顏色選擇器
- 單圖片上傳
- 多圖片上傳
- 視頻上傳
- 單文件上傳
- 多文件上傳
- 富文本編輯器-QEditor
- 富文本編輯器-UEditor
- 小程序富文本
- 靜態文本
- 隱藏表單項
- 表格數據輸入框
- 分組
- 地圖選擇器(未實現)
- 地區選擇器(未實現)
- 穿梭框(未實現)
- 圖片裁剪(未實現)
- 郵箱輸入框(未實現)
- 設置表單LabelWidth
- 設置表單提交地址
- 設置默認按鈕標題
- 提交表單確認框
- 隱藏默認按鈕
- 添加額外按鈕
- 設置觸發器
- 設置表單數據
- 表單布局
- 模板
- 表格(table)
- 設置表名
- 添加頂部按鈕
- 添加時間段篩選
- 設置搜索欄
- 添加列
- text
- byte
- status
- tags
- yesno
- datetime
- icon
- image
- images
- external_image[已廢棄]
- external_images[已廢棄]
- link
- html
- select
- text.edit
- group
- 多選框欄
- 數量索引欄
- 操作欄
- 右側操作按鈕
- 設置多選框
- 設置顯示數量索引
- 設置列表數據地址
- 直接設置數據
- 關閉ajax獲取數據功能
- 設置分頁
- 自動新增
- 自動編輯
- 圖表(Charts)
- Html
- Iframe
- 數據面板
- 卡片列表
- 按鈕(Button)
- 按鈕調用示例
- 自定義組件
- 混合頁面
- 概念說明
- 擴展
- 圖標擴展
- 雜項
- 幫助函數
- TODO