由于按鈕屬性比較復雜, 直接寫數組很難記住, 因此將按鈕單獨抽出為一個對象, 方面調用。 按鈕是頁面中控制操作的最小單元 > 按鈕在不同的位置, 會有不同的操作, 具體請參考下面的屬性說明 ### 按鈕所在的位置: - 表單(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, ], ```