移动端支持

响应式布局

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

移动端适配

我们对 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: '',
    }
  }
]

预览效果