由于按钮属性比较复杂, 直接写数组很难记住, 因此将按钮单独抽出为一个对象, 方面调用。 按钮是页面中控制操作的最小单元 > 按钮在不同的位置, 会有不同的操作, 具体请参考下面的属性说明 ### 按钮所在的位置: - 表单(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, ], ```