文档

Appearance

布局 ​

框架布局（含左侧、面包屑） ​

左侧菜单 ​

菜单 icon 采用空心 icon

面包屑 ​

内容区 ​

包含基本的列表页面和表单页面，剩下的是自定义页面

列表布局 ​

|-- 搜索
    |-- 点击头部展开高级搜索
|-- 操作按钮
|-- 表格/嵌套表格

form 表单布局（栅格使用说明） ​

|-- 表单
    |-- a-card
        |-- a-form > a-form-item > a-input
        |-- ...
|-- 操作按钮
    |-- a-row >
        |-- a-col > a-button
        |-- ...

表单栅格

vue
<a-form
  :labelCol="{ xs: 24, sm: 6, lg: 4 }"
  :wrapperCol="{ xs: 24, sm: 18, lg: 8 }"
>
</a-form>

表单一行 2 列栅格

vue
<a-row style="width: 100%;">
    <a-col :span="12">
        <a-form-item
                :labelCol='{ xs: 24, sm: 12, lg: 8 }'
                :wrapperCol='{ xs: 24, sm: 12, lg: 16 }'></a-form-item>
    </a-col>
    <a-col :span="12">
        <a-form-item
                :labelCol='{ xs: 24, sm: 12, lg: 8 }'
                :wrapperCol='{ xs: 24, sm: 12, lg: 16 }'></a-form-item>
    </a-col>
</a-row>

操作栅格

vue
<a-row>
    <a-col :lg="{offset:4}" :xs="{offset:0}" :sm="{offset:6}">
    </a-col>
</a-row>

响应式表单

参照 Bootstrap 的 响应式设计，预设六个响应尺寸：xs（<576px） sm（≥576px） md（≥768px） lg（≥992px） xl（≥1200px） xxl（≥1600px）。

span pull push offset order 属性可以通过内嵌到 xs sm md lg xl xxl 属性中来使用。

其中 :xs="6" 相当于 :xs="{ span: 6 }"

表单中的 labelCol 和 wrapperCol 分别为表单项 label 和内容设置布局样式

表单示例代码:

vue
<template>
  <a-card title="表单示例">
    <a-form
      :model="objForm"
      :labelCol="{ xs: 24, sm: 6, lg: 4 }"
      :wrapperCol="{ xs: 24, sm: 18, lg: 8 }"
    >
      <a-form-item label="输入框" v-bind="validateInfos.sName">
        <a-input
          v-model:value="objForm.sName"
          placeholder="请输入xxx"
        ></a-input>
      </a-form-item>
      <a-row style="width: 100%;">
        <a-col :span="12">
          <a-form-item
            :labelCol="{ xs: 24, sm: 12, lg: 8 }"
            :wrapperCol="{ xs: 24, sm: 12, lg: 16 }"
            label="输入框1"
            v-bind="validateInfos.sName1"
          >
            <a-input
              v-model:value="objForm.sName"
              placeholder="请输入xxx"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :labelCol="{ xs: 24, sm: 12, lg: 8 }"
            :wrapperCol="{ xs: 24, sm: 12, lg: 16 }"
            label="输入框2"
            v-bind="validateInfos.sName2"
          >
            <a-input
              v-model:value="objForm.sName"
              placeholder="请输入xxx"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="选择器" v-bind="validateInfos.sChannel">
        <a-select
          v-model:value="objForm.sChannel"
          placeholder="请选择xxx"
          style="width: 100%"
        >
          <a-select-option value="1">选择1</a-select-option>
          <a-select-option value="2">选择2</a-select-option>
          <a-select-option value="3">选择3</a-select-option>
          <a-select-option value="4">选择4</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="日期选择器" v-bind="validateInfos.sDate">
        <a-date-picker
          placeholder="选择日期"
          style="width: 100%"
          v-model:value="objForm.sDate"
          value-format="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item label="开关" v-bind="validateInfos.state">
        <a-switch
          v-model:checked="objForm.state"
          :checkedValue="1"
          :unCheckedValue="0"
        ></a-switch>
      </a-form-item>
      <a-form-item label="经纬度" v-bind="validateInfos.objLocation">
        <n-locpicker @confirmSelect="confirmSelect"> </n-locpicker>
      </a-form-item>
      <a-row>
        <a-col :lg="{ offset: 4 }" :xs="{ offset: 0 }" :sm="{ offset: 6 }">
          <a-button type="primary" @click="save">保存</a-button>
          <a-button class="ml" @click="cancel">取消</a-button>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>

<script>
import { reactive, toRefs } from "vue";
import { Form } from "ant-design-vue";
import NLocpicker from "../../components/locpicker.vue";

export default {
  name: "form",
  components: { NLocpicker },
  setup() {
    // form配置
    const formConf = reactive({
      // 表单对应的字段名
      objForm: {
        sName: "",
        sName1: "",
        sName2: "",
        sDate: "",
        sChannel: "",
        state: "",
        objLocation: "",
      },
      // 校验规则
      rules: {
        sName: [
          {
            required: true,
            message: "请填写",
          },
        ],
        sChannel: [
          {
            required: true,
            message: "请选择",
          },
        ],
        sDate: [
          {
            required: true,
            message: "请选择日期",
          },
        ],
        state: [
          {
            required: true,
            message: "请选择状态",
          },
        ],
        objLocation: [
          {
            required: true,
            message: "请选择经纬度",
          },
        ],
      },
      confirmSelect: function (location) {
        formConf.objForm.objLocation = location;
      },
      save: function () {
        validate();
      },
      cancel: function () {},
    });

    // 导出useForm对象，拿到validate和validateInfos方法
    // validate是校验方法，通过之后走.then失败走catch
    const useForm = Form.useForm;
    const { validate, validateInfos } = useForm(
      formConf.objForm,
      formConf.rules,
      {
        onValidate: (...args) => {},
      }
    );

    return {
      ...toRefs(formConf),
      validateInfos: validateInfos,
    };
  },
};
</script>

<style scoped></style>