@qingbing/ts-v3-form-button
v2.0.5
Published
以 vue3 + element-plus 为基础, 封装的 button 组件
Downloads
3
Maintainers
Readme
FormButton 插件介绍
1. 概要说明
1.1 地址
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 插件安装
# 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 | 否 | ["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 模板组件使用, 去掉组件导入的语句即可
// main.ts
import { FormButtonPlugin } from '@qingbing/ts-v3-form-button'
app.use(FormButtonPlugin, {
name: 'FormButton',
options: {}
})
3.2 模板组件使用
<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>