移动端支持

使用 Vant 组件渲染

全新功能

3.9.0 版本开始，移动端可以直接使用 vant 组件库进行渲染，得到更好的交互与体验。

手机扫码查看

兼容性

说明

由于pc端与移动端部分组件和操作存在不同，某些功能和组件在移动端上没有呈现，后续迭代中我们将逐渐进行完善。

如果只是用做移动端的渲染，可忽略这里。

移除的字段

• 表格布局
• 颜色选择器
• 文字链接
• 穿梭框
• 富文本编辑器
• 数据表格

下拉选择框

• 是否可搜索

时间选择器

• 是否范围选择

日期选择器

• year、month、week、datetime、datetimerange、monthrange 类型

级联选择器 / 树选择

• 是否多选
• 可选任意节点
• 是否可搜索

TIP

如果表单中目前使用到了上诉内容，可以查看下后面的响应式和自定义组件方案。

响应式布局

通过内置的响应式布局，表单即可在移动端设备上进行展示，参见 多终端适配。

移动端适配

我们对 Element 和 Antd UI 组件库在移动端上展示进行了优化，能更好的适配移动端。

手机扫码查看

引入移动端组件

除了内置的响应式布局，我们还可以引入移动端的组件来实现移动端的支持。

定义移动端组件

这里我们引入 Vant 移动端组件来作为例子。

<template>
  <van-datetime-picker
    v-model="dataModel"
    type="date"
    title="选择年月日"
  />
</template>

<script>
/** vant */
import Vue from 'vue';
import { DatetimePicker } from 'vant';
import moment from 'moment'
Vue.use(DatetimePicker);
import 'vant/lib/index.css'
export default {
  name: 'custom-vant-field',
  props: ['value'],
  data() {
    return {
      dataModel: new Date(this.value)
    }
  },
  watch: {
    value (val) {
      this.dataModel = new Date(val)
    },
    dataModel (val) {
      this.$emit('input', moment(val).format('YYYY-MM-DD'))
    }
  }
}
</script>

组件引入

通过自定义字段方式引入到设计器中，具体方法查看 自定义字段。

1. 注册组件

Vue.use(FormMaking, {
  components: [{
    name: 'custom-vant-field',
    component: CustomVantField
  }]
})

2. 设计器配置

customFields: [
  {
    name: 'vant时间选择',
    el: 'custom-vant-field',
    options: {
      defaultValue: '',
      customClass: '',
      labelWidth: 100,
      isLabelWidth: false,
      hidden: false,
      dataBind: true,
      required: false,
      dataType: '',
      pattern: '',
    }
  }
]

预览效果