UCloud云社区

philadelphia 发布于2019-08-26 10:21 / 2026人阅读

前言

本文将介绍我们的表单解决方案 @femessage/el-form-renderer，展示我们在 Vue 技术栈下，我们是如何处理以下问题的：

表单项动态显示或隐藏

表单数据联动

表单输入/输出数据格式化

非常规表单项的处理

复杂的表单验证

方案 表单项动态显示或隐藏(hidden)

可以通过 hidden 控制某一表单项的显示或隐藏。

表单数据联动(on)

可以通过 on 来监听 blur , focus 等事件来实现表单联动。

举个例子，填写 fullName 后，自动填充 lastName

输入/输出格式化(inputFormat/outputFormat)

拿日期范围选择器为例，组件输出的值是一条字符串，但后端接口格式是两个字段 {startDate, endDate}，则此时需要对数据进行格式化处理。

inputFormat

转换输入的数据, 使其变成表单项需要的数据格式

outputFormat

转换输出的数据, 使其变成需要的(接口期望的)数据格式

自定义组件(component)

@femessage/el-form-renderer 默认支持的 type 有限, 只能渲染常见的表单项。对于个性化的需求, 比如想渲染一个上传组件，type 就不够用了, 那怎么办呢? 这时候 component 选项就派上用场了。

component可以渲染自定义组件，而编写自定义组件的关键是在组件内部实现 v-model:

有一个 props 为 value

对外触发 input 事件

则可以用 component 属性让 @femessage/el-form-renderer 渲染此自定义组件

目前团队对常见的表单扩展组件都根据标准实现了 v-model, 因此都可以不写 template, 由 @femessage/el-form-renderer 实现数据驱动渲染

上传组件 https://github.com/FEMessage/upload-to-ali

富文本编辑器 https://github.com/FEMessage/v-editor

省市区选择器 https://github.com/FEMessage/el-select-area

范围输入框 https://github.com/FEMessage/el-number-range

版本号输入框 https://github.com/FEMessage/el-semver-input

复杂的表单验证(rules)

一个复杂的表单项配置, 往往需要定义一些规则(rules)来限制用户输入, 规则里面可能还会有自定义的验证器(validator), 这样的表单项多了之后, 就会导致页面文件的配置项变得很长很长。

解决方案是在组件内部设置校验规则, 从而达到封装隐藏目的。使用者不用关心表单的验证规则，直接引入组件并使用就好。

下面展示一个结合自定义组件(基本输入框)封装的验证规则, 其规则如下：

不允许空值

只能输入3位数或以上

必须以123开头

同样地，使用 component 渲染此组件

结语

我们内部项目都在使用 @femessage/el-form-renderer，可以在 github 上找到更多信息。

欢迎大家使用，提高项目开发效率~

GPU云服务器云服务器政务快车道尹世明总经理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106052.html

vue中如何实现的自定义按钮

摘要：在实际开发项目中，有时我们会用到自定义按钮因为一个项目中，众多的页面，为了统一风格，我们会重复用到很多相同或相似的按钮，这时候，自定义按钮组件就派上了大用场，我们把定义好的按钮组件导出，在全局引用，就可以在其他组件随意使用啦，这样可以大幅度在实际开发项目中，有时我们会用到自定义按钮；因为一个项目中，众多的页面，为了统一风格，我们会重复用到很多相同或相似的按钮，这时候，自定义按钮组件就...

biaoxiaoduan 2019-08-23 16:29 评论0 收藏0
JavaScript代码整洁之道

摘要：代码整洁之道整洁的代码不仅仅是让人看起来舒服，更重要的是遵循一些规范能够让你的代码更容易维护，同时降低几率。另外这不是强制的代码规范，就像原文中说的，。里式替换原则父类和子类应该可以被交换使用而不会出错。注释好的代码是自解释的。 JavaScript代码整洁之道整洁的代码不仅仅是让人看起来舒服，更重要的是遵循一些规范能够让你的代码更容易维护，同时降低bug几率。原文clean-c...

liaorio 2019-08-23 16:29 评论0 收藏0
前端经典面试题总结

摘要：接着我之前写的一篇有关前端面试题的总结，分享几道比较经典的题目第一题考点作用域，运算符栗子都会进行运算，但是最后之后输出最后一个也就是那么其实就是而且是个匿名函数，也就是属于，就输出第二和第三个都是类似的，而且作用域是都是输出最后一个其实就接着我之前写的一篇有关前端面试题的总结，分享几道比较经典的题目：第一题： showImg(https://segmentfault.com/im...

BlackMass 2019-08-23 16:29 评论0 收藏0
私有云那家好-六大私有云厂商详细对比！

对比内容UCloudStackZStackVMwareQingCloud腾讯TStack华为云Stack优势总结•基于公有云自主可控•公有云架构私有化部署•轻量化/轻运维/易用性好•政府行业可复制案例轻量化 IaaS 虚拟化平台•轻量化、产品成熟度高•业内好评度高•功能丰富、交付部署快•中小企业案例多全套虚拟产品及云平台产品•完整生态链、技术成熟•比较全面且健全的渠道•产品成熟度被市场认可，市场占...

ernest.wang 2022-07-05 17:45 评论0 收藏0
cross-env使用记录

摘要：能跨平台地设置及使用环境变量让这一切变得简单，不同平台使用唯一指令，无需担心跨平台问题安装方式改写使用了环境变量的常见如在脚本多是里这么配置运行，这样便设置成功，无需担心跨平台问题关于跨平台兼容，有几点注意 cross-env能跨平台地设置及使用环境变量, cross-env让这一切变得简单，不同平台使用唯一指令，无需担心跨平台问题 1、npm安装方式 npm i --save-de...

Michael_Ding 2019-08-23 16:29 评论0 收藏0
webpack打包插件

摘要：引入的模块引入的使用将打包打包的拆分将一部分抽离出来物理地址拼接优化打包速度压缩代码，这里使用的是，同样在的里面添加 const path = require(path); //引入node的path模块const webpack = require(webpack); //引入的webpack,使用lodashconst HtmlWebpackPlugin = require(ht...

ChanceWong 2019-08-23 16:29 评论0 收藏0