Jan 21, 2022
With 2.5.3, Vue Formulate is now fully ESM compatible. See the
changelog
for more details.
Need Vue 3 support? Checkout the Vue Formulate successor FormKit.
😎 开发者的福利
表单无处不在,但对作者来说却很枯燥 —— 好吧,现在不再是了。Vue Formate 为开发人员提供了强大而灵活的 API,使复杂的表单创建变得轻而易举。
☝️ 单一的 input 元素
使用 Vue Formulate,你不需要记住十几个组件的名称—所有表单元素都是用一个组件创建的。非常简单!
💪 成组的表单域
Vue Formulate 提供了现成的可重复的表单域组。轻松创建复杂的 UI,如多人预订表单。
🎯 内置验证器
极度简单的验证器开箱即用,可以处理 95% 的用例。帮助文本、验证规则和验证消息都是简单的 `props`。需要更多吗?你也可以添加自定义验证器。
🔌 插件系统
扩展 Vue Formulate 的功能,或者通过使用插件系统跨项目重用自定义表单、验证规则和验证消息。使你的插件开源与他人共享!
✨ 表单创建器
从 JSON 生成整个表单。Vue Formulate 包含一个模式,允许你使用组、包装器和自定义组件等从 JSON 中渲染出复杂的表单。
🎨 样式控制
使用提供的 class prop,你可以全局或逐个添加自己的样式 class 集合。使用 Tailwind? 没问题. Bootstrap? 想到一块去了. 自己从头来过,是的,支持了
🔍 作用域插槽
需要更多地控制表单的标记吗?Vue Formulate 附带全局插槽支持,以便你可以全局或有选择性地提供自己的标记。
🌐 国际化
感谢 Vue 社区的出色协作,Vue Formulate 支持十多种语言,这些语言可以选择性地导入以保持包的大小。
# 实时代码示例
# 表单验证
Vue Formulate 包含 20 条规则 并支持定义你自己的 规则
# 单个输入框
你可以在这个演示中尝试将 type="radio"
更改为 checkbox
或 select
。
# 深度定制的文件表单域
文件域 做得很好,开箱即用。
# 在一个对象中对整个表单进行建模
毫不费力地确保所有字段都已验证,甚至 v-model
字段值都已验证为单个对象。