npm package: @qingbing/ts-v3-form-button
Description: 以 vue3 + element-plus 为基础, 封装的 button 组件
Author: qingbing
Latest version: 2.0.5

# FormButton 插件介绍

- [FormButton 插件介绍](#formbutton-插件介绍)
  - [1. 概要说明](#1-概要说明)
    - [1.1 地址](#11-地址)
    - [1.2 插件描述](#12-插件描述)
    - [1.3 重要依赖](#13-重要依赖)
    - [1.4 插件安装](#14-插件安装)
  - [2. 包说明](#2-包说明)
    - [2.1 属性说明](#21-属性说明)
    - [2.2 事件说明](#22-事件说明)
    - [2.3 实例暴露说明](#23-实例暴露说明)
  - [3. 示例](#3-示例)
    - [3.1 全局注册使用](#31-全局注册使用)
    - [3.2 模板组件使用](#32-模板组件使用)

## 1. 概要说明
### 1.1 地址

[https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-form-button](https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-form-button)

### 1.2 插件描述

vite + ts + vue3 + element-plus 封装的 FormButton 插件

### 1.3 重要依赖

- @qingbing/ts-v3-utils: ^1.0.1
- @qingbing/ts-v3-element-plus: ^2.1.4
- element-plus: ^2.6.2
- vue: ^3.4.21

### 1.4 插件安装

```bash
# yarn 安装
yarn add @qingbing/ts-v3-form-button

# npm 安装
npm i @qingbing/ts-v3-form-button
```

## 2. 包说明

### 2.1 属性说明

| 属性名         | 类型                     | 是否必需 | 默认值              | 意义                                           |
| :------------- | :----------------------- | :------- | :------------------ | :--------------------------------------------- |
| refForm        | String                   | 否       | 'form'              | 控制的表单, 不涉及 reset 或 submit 字段无效    |
| buttons        | Array<TFormButtonButton> | 否       | ["submit", "reset"] | 显示的按钮组                                   |
| submitType     | String                   | 否       | 'primary'           | submit 按钮类型                                |
| submitLabel    | String                   | 否       | '确认'              | submit 按钮显示                                |
| submitCallback | Function                 | 否       | -                   | submit 回调函数                                |
| resetType      | String                   | 否       | 'default'           | reset 按钮类型                                 |
| resetLabel     | String                   | 否       | '重置'              | reset 按钮显示                                 |
| resetCallback  | Function                 | 否       | -                   | reset 回调函数, 普通情况, 使用默认操作方法即可 |
| cancelType     | String                   | 否       | 'default'           | cancel 按钮类型                                |
| cancelLabel    | String                   | 否       | '取消'              | cancel 按钮显示                                |
| cancelCallback | Function                 | 否       | -                   | cancel 回调函数                                |

### 2.2 事件说明

| 事件名 | 类型 | 意义 |
| :----- | :--- | :--- |
| -      | -    | -    |

### 2.3 实例暴露说明

| 属性名 | 类型 | 意义 |
| :----- | :--- | :--- |
| -      | 无   | -    |

## 3. 示例
### 3.1 全局注册使用

- 一旦注册， `FormButton` 作为组件全局通用 
- 使用方法参考 [3.2 模板组件使用](#32-模板组件使用), 去掉组件导入的语句即可

```ts
// main.ts
import { FormButtonPlugin } from '@qingbing/ts-v3-form-button'
app.use(FormButtonPlugin, {
  name: 'FormButton',
  options: {}
})
```

### 3.2 模板组件使用

```vue
<template>
    <h1>FormButton 组件</h1>
    <el-form :ref="refForm" :model="formData" label-width="120px" label-suffix=":" label-position="left">
        <el-form-item prop="email" label="Email" :rules="[
            {
                required: true,
                message: 'Please input email',
                trigger: 'blur',
            },
            {
                type: 'email',
                message: 'Please input correct email address',
                trigger: ['blur', 'change'],
            },
        ]">
            <el-input v-model="formData.email" />
        </el-form-item>
        <el-form-item prop="username" label="Username" :rules="[
            {
                required: true,
                message: 'Please input username',
                trigger: 'blur',
            },
        ]">
            <el-input v-model="formData.username" />
        </el-form-item>

        <el-form-item>
            <FormButton :buttons="buttons" :submitCallback="submitCallback" ref-form="ref-form" />
        </el-form-item>
    </el-form>
    <hr>
    <el-form :ref="refForm1" :model="formData1" label-width="120px" label-suffix=":" label-position="left">
        <el-form-item prop="username" label="Username" :rules="[
            {
                required: true,
                message: 'Please input username',
                trigger: 'blur',
            },
        ]">
            <el-input v-model="formData1.username" />
        </el-form-item>

        <el-form-item>
            <FormButton :buttons="buttons1" :submitCallback="submitCallback1" ref-form="ref-form1" />
        </el-form-item>
    </el-form>
</template>
  
<script lang="ts" setup>
import type { TFormButtonButtons, TFormButtonSubmitParams } from "@qingbing/ts-v3-form-button";
import { reactive, ref } from 'vue'
import { FormButton } from "@qingbing/ts-v3-form-button";

const refForm = ref('ref-form')

const formData = reactive<{
    email: string
    username: string
}>({
    email: '',
    username: 'qingbing',
})
const buttons: TFormButtonButtons = [
    "submit",
    "cancel",
    "reset",
    {
        "label": "TEST",
        callback: () => {
            console.log(222);
        }
    }
];
const submitCallback = (params: TFormButtonSubmitParams) => {
    console.log(params);
    params.callFailure("哦河, 操作失败了")
}


const refForm1 = ref('ref-form1')
const formData1 = reactive<{
    username: string
}>({
    username: '',
})
const buttons1: TFormButtonButtons = [
    "submit",
    "cancel",
    {
        "label": "TEST",
        callback: () => {
            console.log(111);
        }
    }
];
const submitCallback1 = (params: TFormButtonSubmitParams) => {
    console.log(params);
    params.callSuccess("哦业, 操作成功了")
}

</script>
```