多端适配

FcDesigner 支持将 PC 端设计的 ElementPlus / AntDesignVue 表单规则在移动端渲染为VantUI风格的表单，提供了一致的用户体验，并确保在不同设备上都能良好展示。

功能演示

功能概述

通过多端适配功能，您可以确保在不同设备上的表单显示效果一致。无论是在 PC 端还是移动端，表单都能根据设备类型自动调整样式和布局。具体而言，移动端的表单将使用 Vant 风格组件，以优化在小屏幕上的展示效果和交互体验。

注意

当前移动端自适应功能仅支持部分基础表单组件和布局组件，尚未覆盖所有组件类型。

使用方式

1. 安装和加载组件

首先，确保在项目中加载移动端专用的 form-create.vant组件。请根据项目实际情况调整组件的路径。

import formCreateMobile from "./fcDesignerPro/dist/render/vant/form-create.es";
import ElementPlus from 'element-plus'
import vant from 'vant';
import 'element-plus/dist/index.css';
import 'vant/lib/index.css';


// 挂载 form-create
app.use(formCreateMobile);
// 挂载 ElementPlus
app.use(ElementPlus)
// 挂载 Vant
app.use(vant)

2. 渲染移动端表单

在 Vue 组件中，使用 form-create-mobile 组件来渲染表单。该组件会自动根据设备类型渲染为适合的样式。

<template>
    <!-- ant-design-vue版本driver是"antd" -->
    <form-create-mobile
    driver="elm"
    v-model="formData"
    v-model:api="fapi"
    :rule="rule"
    :option="option"
    @submit="onSubmit"
    ></form-create-mobile>
</template>


<script setup>
    import { ref } from 'vue';
    import formCreateMobile from "./fcDesignerPro/dist/render/vant/form-create.es";
    const formData = ref({});
    const fapi = ref({});
    //加载json数据
    const rule = ref(formCreateMobile.parseJson('/*json*/'));
    const option = ref(formCreateMobile.parseJson('/*json*/'));
    function onSubmit(data) {
        console.log('Form submitted:', data);
    }
</script>

组件适配

通过在不同端挂载功能相同但 UI 不同的组件。业务层使用统一的组件接口，底层根据运行环境自动选择对应的 UI 实现。

假设当前有一个基于 ElementUI 的自定义 UnifiedSelect 业务组件

<template>
  <!-- Element UI 版本 -->
  <el-select
    v-model="innerValue"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    :multiple="multiple"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>


<script>
export default {
  name: 'UnifiedSelect',
  props: {
    value: [String, Number, Array],
    options: {
      type: Array,
      default: () => []
    },
    placeholder: String,
    disabled: Boolean,
    clearable: Boolean,
    multiple: Boolean,
  },
  data() {
    return {
      innerValue: this.value,
      showPicker: false,
      selectedLabel: ''
    }
  },
  watch: {
    value(newVal) {
      this.innerValue = newVal
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('input', value)
      this.$emit('change', value)
    },
  }
}
</script>

（Vant UI 实现）

实现移动端适配需创建功能相同的同名组件，并在移动端渲染时挂载该组件。

<template>
  <!-- Vant UI 版本 -->
  <van-field
    v-model="selectedLabel"
    readonly
    :placeholder="placeholder"
    :disabled="disabled"
    @click="showPicker = true"
  />
  <van-popup v-model="showPicker" round position="bottom">
    <van-picker
      :columns="pickerOptions"
      @confirm="handleVantConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>


<script>
export default {
  name: 'UnifiedSelect',
  props: {
    value: [String, Number, Array],
    options: {
      type: Array,
      default: () => []
    },
    placeholder: String,
    disabled: Boolean,
    clearable: Boolean,
    multiple: Boolean,
  },
  data() {
    return {
      innerValue: this.value,
      showPicker: false,
      selectedLabel: ''
    }
  },
  computed: {
    pickerOptions() {
      return this.options.map(item => ({
        text: item.label,
        value: item.value
      }))
    }
  },
  watch: {
    value(newVal) {
      this.innerValue = newVal
      this.updateSelectedLabel()
    },
    options() {
      this.updateSelectedLabel()
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('input', value)
      this.$emit('change', value)
    },
    handleVantConfirm(value) {
      this.innerValue = value.value
      this.handleChange(value.value)
      this.showPicker = false
    },
    updateSelectedLabel() {
      const selected = this.options.find(item => item.value === this.innerValue)
      this.selectedLabel = selected ? selected.label : ''
    }
  }
}
</script>

在移动端挂载该组件

在移动端使用 formCreateMobile.component 方法挂载自定义组件

formCreateMobile.component('UnifiedSelect', UnifiedSelect);

通过 FcDesigner 的多端适配功能，您可以轻松实现跨平台的表单展示。移动端使用 Vant 组件优化展示效果，同时确保 PC 端和移动端都能获得一致且良好的用户体验。