@biin2013/element-plus-tools v1.0.26

Button

使用

// js
const params = ref(
  new Button()
  .setContent('submit')
  .setIcon(markRaw(User))
);

// template
<tiger-button :params="params" />

事件处理

click

使用 onClick 来自定义回调。接收的参数如下：

beforeClick

在点击事件处理之前，可使用 onBeforeClick 自定义回调处理，接收的参数如下 | 参数 | 说明 | | - | - | | button | Button 实例 | | event | 原生DOM的点击参数， MouseEvent 对象 |

successClick

在点击事件处理成功之后，可使用 onSuccessClick 自定义回调处理，接收的参数如下 | 参数 | 说明 | | - | - | | val | resolve 的返回值 | | button | Button 实例 | | event | 原生DOM的点击参数， MouseEvent 对象 |

failClick

在点击事件处理失败之后，可使用 onFailClick 自定义回调处理，接收的参数如下 | 参数 | 说明 | | - | - | | error | reject 的返回值 | | button | Button 实例 | | event | 原生DOM的点击参数， MouseEvent 对象 |

afterClick

在点击事件处理完成后（成功或失败都会调用）可使用 onAfterClick 自定义回调处理，接收的参数如下 | 参数 | 说明 | | - | - | | button | Button 实例 | | event | 原生DOM的点击参数， MouseEvent 对象 |

自动提交表单（推荐）

如果觉得自自定义 click 事件麻烦（主要是要手动 resolve 、 reject），可以使用 setFormApi 来实现自动提交数据，第一个参数为 api， 后面所有参数将自动传入 api 请求参数中。

自定义事件成功处理的提示消息

可使用 setSuccessMessage 方法设置成功后的提示消息，这样就无须每次在 onSuccessClick 回调中来提示了。

还可以在 api 的配置参数中来设置成功消息，使用配置参数 custom 下的 successTitle 和 successMessage 来指定。

表单验证

如果需要在点击时对表单进行验证，需要设置 Form 的引用 setFormRef(xxx) 和 FormValidate 为 true (默认为 true), 且要设置 FormItem 的 prop 对应的名称, 用 setFormFields(obj) 指定，否则在验证失败时提示会出错。

ButtonGroup

ButtonGroup 是 Button 的组合使用，除了视图显示为 按钮组 之外，还有一点就是一个分组中有一个按钮被点击后，其他按钮自动禁用，点击事件处理完成后自动恢复。

使用

// js
const params = ref([
  new ButtonGroup()
    .addButton(new Button())
    .addButton(new Button()),
  new ButtonGroup()
    .addButton(new Button())
    .addButton(new Button())
    .addButton(new Button())
]);

// template
<tiger-button-group :params="params" />

注意： 在 ButtonGroup 中设置的 Button 不能使用 onBeforeClick 和 onAfterClick 来自定义回调，否则会被覆盖。