use-form-element-plus

Vue3 组合式API表单处理钩子函数，专为Element Plus设计

安装

npm install use-form-element-plus
# 或
yarn add use-form-element-plus

引入

// 全局引入
import { createApp } from 'vue'
import App from './App.vue'
import useFormElementPlus from 'use-form-element-plus'

const app = createApp(App)
app.use(useFormElementPlus)
app.mount('#app')

// 局部引入
import { useForm, MyButton } from 'use-form-element-plus'

使用

<template>
  <el-form :model="formData" label-width="120px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username" placeholder="请输入用户名" />
      <div v-if="errorMessages.username" class="error-message">{{ errorMessages.username }}</div>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="formData.password" type="password" placeholder="请输入密码" />
      <div v-if="errorMessages.password" class="error-message">{{ errorMessages.password }}</div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { useForm } from 'use-form-element-plus'

const { formData, errorMessages, resetForm, submitForm } = useForm({
  rules: {
    username: [
      { required: true, message: '请输入用户名' },
      { min: 3, max: 20, message: '用户名长度在3-20个字符之间' }
    ],
    password: [
      { required: true, message: '请输入密码' },
      { min: 6, message: '密码长度不能小于6个字符' },
      { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/, message: '密码必须包含字母和数字' }
    ]
  },
  initialValues: {
    username: '',
    password: ''
  }
})

const handleSubmit = () => {
  submitForm((data) => {
    console.log('表单提交数据:', data)
    // 这里可以处理表单提交后的逻辑
    alert('提交成功!')
  })
}
</script>

<style scoped>
.error-message {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
}
</style>

组件

MyButton

二次封装的Element Plus按钮组件，增强了加载状态等功能。

使用

<template>
  <div>
    <MyButton type="primary" @click="handleClick">主要按钮</MyButton>
    <MyButton type="success" size="small" :loading="loading" loading-text="加载中">成功按钮</MyButton>
    <MyButton type="warning" round>警告按钮</MyButton>
    <MyButton type="danger" circle icon="Delete" />}
    <MyButton type="info" plain>信息按钮</MyButton>
    <MyButton type="text">文本按钮</MyButton>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { MyButton } from 'use-form-element-plus'

const loading = ref(false)

const handleClick = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
</script>

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | type | 按钮类型 | string | primary/success/warning/danger/info/text | primary | | size | 按钮大小 | string | large/medium/small/mini | medium | | icon | 按钮图标 | string | - | - | | loading | 是否加载中 | boolean | - | false | | loadingText | 加载中文字 | string | - | - | | disableWhenLoading | 加载中是否禁用 | boolean | - | true | | disabled | 是否禁用 | boolean | - | false | | round | 是否圆角 | boolean | - | false | | circle | 是否圆形 | boolean | - | false | | plain | 是否朴素按钮 | boolean | - | false | | autofocus | 是否自动聚焦 | boolean | - | false | | nativeType | 原生type属性 | string | button/submit/reset | button |

事件

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | click | 点击事件 | (event: MouseEvent) |

API

useForm(options)

参数

• options (Object): 配置选项
  • rules (Object): 表单验证规则
  • initialValues (Object): 初始表单数据

返回值

• formData (Reactive): 表单数据对象
• validateState (Reactive): 表单验证状态对象
• errorMessages (Reactive): 错误信息对象
• isValidateing (Ref): 是否正在验证
• resetForm (Function): 重置表单方法
• validateField (Function): 验证单个字段方法
• validate (Function): 验证整个表单方法
• submitForm (Function): 表单提交方法

许可证

MIT