v-formly

# 组件介绍

v-formly 内置了一些基础组件，包括常用的输入框、选择框、单选、多选、下拉框、上传等组件，覆盖了大多数业务所需要的组件需求，如果这些内置组件不足以满足你的业务，你也可以自定义组件。

# 内置组件属性

v-formly 中的内置组件为了保证与原生 AntDv 组件的功能保持一致性，尽量不破坏原有属性名称和定义，所以在下述具体组件介绍中，我们只列出属性中不一致的或新添加的，一致的地方请参考 AntDv 文档，我们列出了组件对应关系如下，请自行查阅：

# 内置组件与 AntDv 组件一一对应关系

内置组件与 AntDv 组件一一对应关系 =>

AutoComplete 自动完成 -> AutoComplete 自动完成 (opens new window)

Boolean 开关 -> Switch 开关 (opens new window)

Cascader 级联选择 -> Cascader 级联选择 (opens new window)

Checkbox 多选框 -> Checkbox 多选框 (opens new window)

Date 日期选择框 -> DatePicker 日期选择框 (opens new window)

Number 数字输入框 -> InputNumber 数字输入框 (opens new window)

Radio 单选框 -> Radio 单选框 (opens new window)

Rate 评分 -> Rate 评分 (opens new window)

Select 选择器 -> Select 选择器 (opens new window)

Slider 滑动输入条 -> Slider 滑动输入条 (opens new window)

String 文本框 -> Input 输入框 (opens new window)

Tag 标签 -> Tag 标签 (opens new window)

Textarea 多行文本框 -> Input 输入框 (opens new window)

Time 时间选择器 -> TimePicker 时间选择框 (opens new window)

# 关于slot的传递

v-formly 中的内置组件封装的是 AntDv 的表单组件，这样就带来一个问题，一些类型为slot的属性我们无法透传，比如Input 输入框的addonBefore属性，它即可以直接传字符串，这个没问题，但是slot我们没法传进去，因为我们对a-input做了封装，在使用 v-formly 的时候我们无法直接接触a-input组件，所以这里我让模板<template>xxx</template>一级一级的从父组件传递到子组件，再传递到孙子组件，直到传递到 AntDv 原生组件为止。下面我们举例说明一下：

<template>
  <div>
    <v-formly ref="form" v-model="formData" :meta="meta">
      <!-- string1 -->
      <template v-slot:string1_prefix>
        <a-icon type="user" />
      </template>
      <template v-slot:string1_1_suffix>
        <a-tooltip title="Extra information">
          <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
        </a-tooltip>
      </template>
    </v-formly>
  </div>
</template>

<script>
export default {
  name: "StringView",
  data: function () {
    return {
      meta: {
        type: "object",
        properties: {
          string1: {
            title: "用户名",
            type: "string",
            ui: {
              placeholder: "请输入用户名",
              slotNameOfPrefix: "string1_prefix",
              slotNameOfSuffix: "string1_1_suffix",
            },
          },
        },
      },
      formData: {},
    };
  },
};
</script>
<style lang="less" scoped></style>
显示代码 复制代码

从上面的代码中，我们可以看到，我们这里的前缀使用了slot来传值，我们只需要在meta里面定义slotNameOfPrefix来标明它的slot name，然后在v-formly模板标签里面定义我们需要传递的模板内容，从而让表单知道我需要把这个slot模板传递到 AntDv 的输入框，这样就达到了slot的传递。

提示

v-formly 的每个表单项的属性中如果有需要传递slot的，必须保证slot name的唯一（比如这里的slotNameOfPrefix和slotNameOfSuffix的值必须不一样），否则无法识别或者识别错误。

Array 数组 →