基于 vue3 + element plus的表单设计器

概要

github地址

由于在公司项目中有应用到此类内容,自己基于以前捣鼓过的小demo重新搭建的适应新版本vue3跟使用国内使用普遍的 element plus 的组件库来搭建的表单设计器,大家可以基于项目里面的内容自己进行添加,修改以及各种需要的操作。

以下是拉取项目前的一些小提示

  • 此项目是完全开源的,不会调用任何接口,配置文件格式已内置在项目,所以大家拉取下来后可以安装完依赖直接运行就可以看到效果跟进行相应操作,
  • node版本需使用16+的版本

以下是拉取项目后运行起来的效果

垂直布局
![在这里插入图片描述](https://img-blog.csdnimg.cn/2ea2d76c306945d8851dd764ddfe351e.png
垂直布局预览效果图
在这里插入图片描述
水平布局
在这里插入图片描述
水平布局效果预览图
在这里插入图片描述

其他各种操作大家自行拉取效果再进行尝试即可,如遇到问题可以留言,我有空时会进行答复与修复,后续有新功能也会进行添加说明。如果可以的话希望可以点一个star.

总结

一直以为幸福在远方,所以双眼保存眺望,双耳仔细聆听,唯恐疏忽错过。后来才发现,那些握过的手,唱过的歌,流过的泪,爱过的人。所谓的曾经,就是幸福。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3.0中,可以使用Vue3.0官方推荐的表单校验库VeeValidate或者使用Element Plus提供的表单校验功能。 下面是一个使用Element Plus表单校验的示例: 1. 在Vue3.0项目中,首先需要先安装Element Plus组件库: ``` npm install element-plus --save ``` 2. 在需要使用表单校验的组件中,引入Element Plus的表单组件和校验规则: ```javascript <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; export default { components: { ElForm, ElFormItem, ElInput, ElButton, }, setup() { const form = ref({ username: '', password: '', }); const rules = ref({ username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }, ], }); const submitForm = () => { // 表单校验 const formRef = this.$refs.form; formRef.validate((valid) => { if (valid) { // 校验通过 console.log('submit'); } else { // 校验不通过 console.log('error submit!!'); return false; } }); }; return { form, rules, submitForm, }; }, }; </script> ``` 在上面的示例中,我们使用了Element Plus的表单组件和校验规则来实现表单校验,其中: - `ElForm`:表单组件,用于包裹需要校验的表单项; - `ElFormItem`:表单项组件,用于包裹表单控件和校验规则; - `ElInput`:输入框组件,用于输入表单数据; - `ElButton`:按钮组件,用于提交表单数据; - `ref`:Vue3.0中用于获取组件实例的方法。 在`setup()`函数中,我们使用了`ref`来定义表单数据和校验规则,并且定义了一个`submitForm()`方法来提交表单数据,其中: - `validate()`:表单校验方法,用于校验表单数据是否满足校验规则; - `valid`:校验结果,如果校验通过则为`true`,否则为`false`。 总体来说,使用Element Plus的表单校验功能非常简单,只需要在需要校验的表单项中定义相应的校验规则,并在提交表单时调用`validate()`方法即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值