vue3封装element plus可配置表单组件

前提

我们公司正在开发一个内部工作管理系统,其中有一个功能是让员工填写日常工作任务。

不同部门和岗位的工作任务不同,所以他们填写的内容也不一样。比如,项目经理需要填写项目进度和预计完成时间,行政人员需要填写处理的事项和耗时。

为了满足这些差异化需求,我们开发了一个可配置的表单组件。使用这个组件,我们只需要在系统中定义好不同岗位需要填写的表单项,就能自动生成相应的表单。

当员工填写表单时,组件会自动保存数据到一个对象中。我们可以监控这个对象,执行后续的业务逻辑。

组件还能根据我们设置的校验规则,自动检查员工的输入是否合法,并显示错误提示。

最后,当员工提交表单时,我们就可以调用组件提供的提交方法,进一步处理数据后提交给后端系统。

通过使用这个可配置的表单组件,我们可以在不同场景中灵活应用,既提高了开发效率,也方便了系统的后续维护。

说干就干,下面是我写组件的逻辑:

组件逻辑

在组件的 <script> 部分,我们定义了以下关键功能:

  1. 表单数据管理:
  • 使用 reactive 函数创建表单数据对象 formData,并与表单项的 v-model 绑定。
  • 通过 watch 函数监听 props.formData 的变化,及时更新 formData。
  1. 表单项类型判断:
  • 定义 getInputComponent 函数,根据表单项的 type 属性返回对应的 Vue 组件。
  1. 表单初始化:
  • 遍历 formItems 数组,将 defaultValue 属性设置为表单项的初始值。
  1. 表单输入验证:
  • 定义 handleInput 函数,用于在用户输入时进行正则表达式验证。
    表单数据获取:

通过 defineExpose 暴露 getFormData 方法,供父组件调用获取表单数据。

<template>
  <el-form label-position="top" label-width="auto" :rules="rules" :model="formData" :inline="true" class="oneForm">
    <el-form-item v-for="item in formItems" :key="item.prop" :label="item.label">
      <component
        :is="getInputComponent(item.type)"
        v-model="formData[item.prop]"
        :type="item.inputType"
        :placeholder="`请填写 ${item.label}`"
        :maxlength="item.maxlength"
        :show-password="item.showPassword"
        :value-format="item['value-format']"
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
        :size="size"
        :rows="item.rows"
        :autosize="item.autosize"
        @input="(value) => handleInput(item.prop, item.pattern)"
        :style="{ width: item.type === 'textarea' ? '100%' : 'auto' }"
      >
        <template v-if="item.type === 'select'">
          <el-option
            v-for="option in item.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </template>
      </component>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, watch, defineExpose } from 'vue';

const props = defineProps({
  formItems: { type: Array, required: true },
  formData: { type: Object, required: true },
  rules: { type: Object, required: false },
  disabledDate: { type: Function, required: false },
  shortcuts: { type: Array, required: false },
  size: { type: String, required: false },
  class: { type: String, required: false },
});

const formData = reactive({ ...props.formData });

watch(
  () => props.formData,
  (newData) => {
    Object.assign(formData, newData);
  },
  { deep: true }
);

const getFormData = () => {
  return formData;
};

defineExpose({ getFormData });

// 新增的初始化操作
props.formItems.forEach((item) => {
  if (item.defaultValue !== undefined) {
    formData[item.prop] = item.defaultValue;
  }
});

const getInputComponent = (type) => {
  switch (type) {
    case 'input':
      return 'el-input';
    case 'date-picker':
      return 'el-date-picker';
    case 'select':
      return 'el-select';
    case 'textarea':
      return 'el-input';
    default:
      return 'el-input';
  }
};

// 新增的正则验证函数
const handleInput = (prop, pattern) => {
  if (pattern) {
    const regex = new RegExp(pattern);
    formData[prop] = formData[prop].replace(/[^0-9]/g, '');
    if (!regex.test(formData[prop])) {
      formData[prop] = formData[prop].slice(0, -1);
    }
  }
};

</script>

<style scoped>
.oneForm {
  width: 100%;
}
:deep(.el-input__wrapper) {
  width: 240px;
}
:deep(.el-input--textarea) {
  width: 100%;
}
</style>

组件的使用

<template>
  <my-form-component
    :form-items="formItems"
    :form-data="formData"
    :rules="rules"
    :disabled-date="disabledDate"
    :shortcuts="shortcuts"
    :size="size"
    ref="formRef"
  ></my-form-component>

  <button @click="submitForm">提交</button>
</template>

<script setup>
// ... (其他代码省略)

const formItems = [
  { prop: 'name', label: '姓名', type: 'input', maxlength: 20 },
  { prop: 'age', label: '年龄', type: 'input', inputType: 'number', pattern: '^[0-9]*$' },
  { prop: 'birthday', label: '出生日期', type: 'date-picker', 'value-format': 'YYYY-MM-DD' },
  { prop: 'gender', label: '性别', type: 'select', options: [
    { label: '男', value: 'male' },
    { label: '女', value: 'female' }
  ]}
];

const formData = reactive({
  name: '',
  age: '',
  birthday: '',
  gender: ''
});

const rules = {
  name: [{ required: true, message: '请输入姓名' }],
  age: [{ required: true, message: '请输入年龄' }],
  birthday: [{ required: true, message: '请选择出生日期' }],
  gender: [{ required: true, message: '请选择性别' }]
};

const disabledDate = (time) => {
  return time.getTime() > Date.now();
};

const shortcuts = [
  {
    text: '今天',
    value: new Date()
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    }
  }
];

const size = 'default';

const formRef = ref(null);

const submitForm = () => {
  formRef.value.getFormData();
  // 在此
}

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: Vue3、Element Plus、Axios封装是一种前端开发的技术组合。Vue3是一个流行的JavaScript框架,用于构建用户界面。它提供了一套响应式的数据绑定和组件系统,使开发者可以轻松构建动态和交互式的Web应用程序。 Element Plus是Vue3的一套UI组件库,它基于Element UI进行了优化和扩展。Element Plus提供了丰富的组件,例如按钮、格和对话框等,这些组件帮助开发者快速搭建美观且易于使用的用户界面。 Axios是一个常用的HTTP库,用于在浏览器中进行网络请求。它提供了简洁且功能强大的API,易于使用和配置。Axios支持异步请求、拦截器、请求取消等功能,使开发者能够更加高效地处理网络请求。 封装Vue3、Element Plus和Axios的主要目的是提高开发效率和代码的可维护性。通过封装,可以将常用的功能和逻辑抽象出来,以减少重复代码量,并提供易于复用的代码片段。同时,封装还可以提供一致性和可扩展性,使开发团队能够更好地合作和协作。 在封装中,可以根据具体的需求和项目特点,设计合适的结构和接口。例如,可以将API请求封装成统一的函数或类,以提供统一的调用方式和错误处理。还可以封装一些通用的组件和样式,以提高开发效率和用户体验。 总之,Vue3、Element Plus和Axios封装是一种有效的前端开发方法,它能够提高开发效率、保证代码质量,并帮助开发者构建出功能强大和用户友好的Web应用程序。 ### 回答2: Vue3是Vue.js的下一个主要版本,它带来了许多令人兴奋的新特性和改进。Vue3的主要目标是提供更好的性能、更好的开发体验以及更好的扩展性。它采用了一种新的底层渲染机制,称为“响应式”,使其比Vue2更快、更高效。 Element Plus是一个基于Vue3的UI库,它是Element UI的升级版本。Element Plus提供了一套美观、易于使用的组件,可以帮助我们快速构建现代化的网页和应用程序。它具有丰富的组件库,包括按钮、、菜、对话框等,可以满足各种需求。 Axios是一个基于Promise的HTTP库,用于发送异步请求。它可以在浏览器和Node.js中使用,并且具有简易用的API。Axios支持各种请求方法,如GET、POST等,并且可以发送请求、处理响应、设置请求头等。它还支持拦截器,可以在发送请求和处理响应之前对请求进行处理,例如添加身份验证信息、处理错误等。 封装Vue3、Element Plus和Axios可以提高我们的开发效率和代码重用性。我们可以根据自己的需求,将常用的组件和方法封装成可复用的模块,以便在不同的项目中使用。对于Vue3和Element Plus,我们可以封装一些通用的页面布局和组件,以及常用的数据操作和状态管理逻辑。对于Axios,我们可以封装一些通用的API请求方法,并配置请求拦截器和响应拦截器,以便在请求中添加身份验证信息、处理错误等。 总之,封装Vue3、Element Plus和Axios可以提高代码的可维护性和可重用性,使我们的开发更加高效和便捷。 ### 回答3: Vue3是一款流行的JavaScript框架,它采用了响应式数据绑定和组件化的开发模式,使得前端开发变得更加简、高效。Vue3相比于之前的版本,有着更好的性能和更好的开发者体验。 Element Plus是一套基于Vue3开发的UI组件库,它提供了丰富的组件,包括按钮、、弹窗等等,开发者可以通过简配置和使用,快速构建出美观、交互丰富的前端界面。 Axios是一款基于Promise的HTTP库,可以用于浏览器和Node.js中发送HTTP请求,它支持各种请求方法,如GET、POST等,还有拦截器、请求取消等功能,使得前后端数据交互更加方便和可控。 在封装Vue3中的Element Plus和Axios时,可以利用Vue3的组合式API进行封装。首先,可以创建一个封装Axios实例的文件,设置基础的URL、拦截器等配置。然后,使用Vue3的provide和inject特性,在全局范围内注入该封装的Axios实例。 接下来,在使用Axios发送请求的时候,可以通过创建自定义的hooks,封装常用的请求方法,例如get、post等,将方法放在适当的组件中,并在需要的时候调用这些hooks,以完成数据的请求。 对于Element Plus组件封装,可以创建一个全局注册的文件,在该文件中按需导入所需的组件,并进行全局注册,使得所有的组件都可以使用。也可以根据项目的需要,自定义一些常用的组件,并在适当的地方进行封装和使用。 通过上述的封装,能够在Vue3项目中更加方便地使用Element Plus和Axios,并且实现代码的复用和维护的便利性。同时,这些封装也为项目的开发提供了更高的效率和更好的可维护性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嘴巴嘟嘟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值