Support for Mobile Terminal

Responsive Layout

Forms can be displayed on mobile devices with built-in responsive layout, please refer to Multi-terminal Adaptation。

Mobile Terminal Adaptation

We have optimized the display of Element and Antd UI component libraries on mobile terminals to better adapt to mobile terminals.

Scan the code to viwn on mobile

Import mobile components

In addition to the built-in responsive layout, we can also import mobile components to achieve mobile support.

Define the Mobile Components

Here we import the Vant mobile component as an example.

<template>
  <van-datetime-picker
    v-model="dataModel"
    type="date"
    title="time picker"
  />
</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>

Import into Designer

Through the custom field way into the designer, the specific method to viewCustom Field。

1. Register the Component

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

2. Configuration of Designer

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

Preview