介绍
FormMaking 成功迭代至3.9版本,此次更新专门对移动端表单进行了优化,引入了用户使用比较多的移动端组件库 Vant,实现了pc端和移动端的无缝连接,一键切换预览不同终端的表单。
我们先来看下引入了Vant组件,在移动端下的表单预览效果:
如何使用
开启移动端 vant 组件的渲染,只需要切换到移动模式下,在设计器 - 表单属性配置中,开启移动端渲染模式(Vant)。
配置好表单后,点击预览可进入预览页面查看效果。
项目中使用
接下来我们看下如何将配置好的表单在移动端项目中使用,只需要简单的两步就可以搞定。
引入 Vant 和 FormMakingV3
在移动端项目中,引入需要用到的 Vant 组件库和 FormMakingV3 的 GenerateVantForm 渲染器。
import { createApp } from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
import { GenerateVantForm } from 'form-making-v3'
const app = createApp()
app.use(Vant)
app.use(GenerateVantForm)
渲染表单
在需要渲染表单的地方使用 GenerateVantForm 组件进行表单的渲染。
<template>
<fm-generate-vant-form :data="json" />
</template>
<script setup>
const json = { } // 设计器中生成的json
</script>
更值得一提的是,之前版本生成的 json 可以直接使用 GenerateVantForm 进行渲染。
兼容性
如果你只是用 FormMaking 来生成移动端的表单,可以忽略这里,兼容性问题只存在使用 pc 端模式创建表单的时候,如果使用的是移动端模式来创建的表单,是不存在兼容性问题的。
由于pc端与移动端部分组件和操作存在不同,目前版本某些功能和组件在移动端上是没有呈现的。不兼容的地方列举在下方:
移除的字段
- 表格布局
- 颜色选择器
- 文字链接
- 穿梭框
- 富文本编辑器
- 数据表格
下拉选择框
- 是否可搜索
时间选择器
- 是否范围选择
日期选择器
- year、month、week、datetime、datetimerange、monthrange 类型
级联选择器 / 树选择
- 是否多选
- 可选任意节点
- 是否可搜索
在后续迭代中我们将逐渐进行完善,如果您有更好的建议和方案欢迎一起交流。
更多选择
如果确实需要在移动端的表单中使用到上面不兼容的内容,可以使用响应式和自定义组件的方案。
详细的内容可以查看下官方文档: https://form.making.link/docs/manual/mobile.html 。