antv3 Form FormItem Row Col 根据设备进行自适应的简单处理

1、我们经常会碰到自适应屏幕的需求，一开始应该是在app里，比如 android或者iOS里，那么在vue里，我们也是可以做到的。

2、Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

<template>
  <a-form
    :model="formState"
    name="time_related_controls"
    v-bind="formItemLayout"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item name="date-picker" label="DatePicker" v-bind="config">
      <a-date-picker v-model:value="formState['date-picker']" value-format="YYYY-MM-DD" />
    </a-form-item>
    <a-form-item name="date-time-picker" label="DatePicker[showTime]" v-bind="config">
      <a-date-picker
        v-model:value="formState['date-time-picker']"
        show-time
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </a-form-item>
    <a-form-item name="month-picker" label="MonthPicker" v-bind="config">
      <a-date-picker
        v-model:value="formState['month-picker']"
        value-format="YYYY-MM"
        picker="month"
      />
    </a-form-item>
    <a-form-item name="range-picker" label="RangePicker" v-bind="rangeConfig">
      <a-range-picker v-model:value="formState['range-picker']" value-format="YYYY-MM-DD" />
    </a-form-item>
    <a-form-item name="range-time-picker" label="RangePicker[showTime]" v-bind="rangeConfig">
      <a-range-picker
        v-model:value="formState['range-time-picker']"
        show-time
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </a-form-item>
    <a-form-item name="time-picker" label="TimePicker" v-bind="config">
      <a-time-picker v-model:value="formState['time-picker']" format="HH:mm:ss" value-format="HH:mm:ss" />
    </a-form-item>
    <a-form-item
      :wrapper-col="{
        xs: { span: 24, offset: 0 },
        sm: { span: 16, offset: 8 },
      }"
    >
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';

interface FormState {
  'date-picker': string;
  'date-time-picker': string;
  'month-picker': string;
  'range-picker': [string, string];
  'range-time-picker': [string, string];
  'time-picker': string;
}
export default defineComponent({
  setup() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const config = {
      rules: [{ type: 'string' as const, required: true, message: 'Please select time!' }],
    };
    const rangeConfig = {
      rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
    };
    const formState = reactive({} as FormState);
    const onFinish = (values: any) => {
      console.log('Success:', values, formState);
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };
    return {
      formState,
      onFinish,
      onFinishFailed,
      formItemLayout,
      config,
      rangeConfig,
    };
  },
});
</script>

可以通过设置：

sm，xs, md , lg 等等来自应屏幕的大小，来调整宽度。

:wrapper-col="{
                xs: { span: 24 },
                sm: { span: 12 },
                md: { span: 12 },
                lg: { span: 6 },
                xl: { span: 6 },
                xxl: { span: 6 },
              }"

只要将上面的代码放到Col或者放到FormItem里就可以了。