String 文本框

内置组件，用于字符串、密码等输入框。

代码演示

基础用法

禁用状态

一键清空

格式化

密码框

带图标的输入框(Using attributes)

带图标的输入框(Using slots)

文本域

自适应文本域

复合型输入框

复合型输入框

复合型输入框

复合型输入框

尺寸

尺寸

尺寸

输入长度限制

0 / 10

0 / 30

<template>
  <div>
    <v-formly-v3 ref="form" v-model="formData" :meta="meta">
      <template v-slot:string6_3_suffix>
        <el-icon class="el-input__icon"><calendar /></el-icon>
      </template>
      <template v-slot:string6_4_prefix>
        <el-icon class="el-input__icon"><search /></el-icon>
      </template>
      <template #string9_1_prepend>Http://</template>
      <template #string9_2_append>.com</template>
      <template #string9_3_prepend>
        <el-select
          v-model="string9Select"
          placeholder="Select"
          style="width: 115px"
        >
          <el-option label="Restaurant" value="1" />
          <el-option label="Order No." value="2" />
          <el-option label="Tel" value="3" />
        </el-select>
      </template>
      <template #string9_3_append><el-button :icon="Search" /></template>
      <template #string9_4_prepend>
        <el-button :icon="Search" />
      </template>
      <template #string9_4_append>
        <el-select
          v-model="string9Select"
          placeholder="Select"
          style="width: 115px"
        >
          <el-option label="Restaurant" value="1" />
          <el-option label="Order No." value="2" />
          <el-option label="Tel" value="3" />
        </el-select>
      </template>
    </v-formly-v3>
    <div class="btns">
      <el-button type="danger" @click="clear"> 重置 </el-button>
      <el-button type="primary" @click="submit"> 提交 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRaw, unref } from "vue";
import type VFormly from "@/element-plus/ElFormly.vue";
import { Search } from "@element-plus/icons-vue";

const form = ref<null | InstanceType<typeof VFormly>>(null);
const string9Select = ref("");
const meta = {
  type: "object",
  properties: {
    string1: {
      title: "基础用法",
      type: "string",
      ui: {
        showRequired: true,
        placeholder: "Please input",
        errors: {
          required: "请输入",
        },
        input: (val: string) => console.log(val),
      },
    },
    string2: {
      title: "禁用状态",
      type: "string",
      readOnly: true,
      ui: {
        placeholder: "Please input",
      },
    },
    string3: {
      title: "一键清空",
      type: "string",
      ui: {
        placeholder: "Please input",
        clearable: true,
        change: (val: string) => console.log(val),
      },
    },
    string4: {
      title: "格式化",
      type: "string",
      ui: {
        placeholder: "Please input",
        formatter: (value: any) =>
          `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ","),
        parser: (value: any) => value.replace(/\$\s?|(,*)/g, ""),
      },
    },
    string5: {
      title: "密码框",
      type: "string",
      ui: {
        placeholder: "Please input password",
        type: "password",
        showPassword: true,
      },
    },
    string6_1: {
      title: "带图标的输入框(Using attributes)",
      type: "string",
      ui: {
        placeholder: "Pick a date",
        suffixIcon: "Calendar",
        grid: {
          span: 12,
        },
      },
    },
    string6_2: {
      title: "",
      type: "string",
      ui: {
        placeholder: "Type something",
        prefixIcon: "Search",
        grid: {
          span: 12,
        },
      },
    },
    string6_3: {
      title: "带图标的输入框(Using slots)",
      type: "string",
      ui: {
        placeholder: "Pick a date",
        slotNameOfSuffix: "string6_3_suffix",
        grid: {
          span: 12,
        },
      },
    },
    string6_4: {
      title: "",
      type: "string",
      ui: {
        placeholder: "Type something",
        slotNameOfPrefix: "string6_4_prefix",
        grid: {
          span: 12,
        },
      },
    },
    string7: {
      title: "文本域",
      type: "string",
      ui: {
        placeholder: "Please input",
        type: "textarea",
        rows: 2,
      },
    },
    string8_1: {
      title: "自适应文本域",
      type: "string",
      ui: {
        placeholder: "Please input",
        type: "textarea",
        autosize: true,
        grid: {
          span: 12,
        },
      },
    },
    string8_2: {
      title: "",
      type: "string",
      ui: {
        placeholder: "Please input",
        type: "textarea",
        autosize: { minRows: 2, maxRows: 4 },
        grid: {
          span: 12,
        },
      },
    },
    string9_1: {
      title: "复合型输入框",
      type: "string",
      ui: {
        placeholder: "Please input",
        slotNameOfPrepend: "string9_1_prepend",
      },
    },
    string9_2: {
      title: "复合型输入框",
      type: "string",
      ui: {
        placeholder: "Please input",
        slotNameOfAppend: "string9_2_append",
      },
    },
    string9_3: {
      title: "复合型输入框",
      type: "string",
      ui: {
        placeholder: "Please input",
        slotNameOfPrepend: "string9_3_prepend",
        slotNameOfAppend: "string9_3_append",
      },
    },
    string9_4: {
      title: "复合型输入框",
      type: "string",
      ui: {
        placeholder: "Please input",
        slotNameOfPrepend: "string9_4_prepend",
        slotNameOfAppend: "string9_4_append",
      },
    },
    string10_1: {
      title: "尺寸",
      type: "string",
      ui: {
        placeholder: "Please input",
        size: "large",
        grid: {
          span: 8,
        },
      },
    },
    string10_2: {
      title: "尺寸",
      type: "string",
      ui: {
        placeholder: "Please input",
        grid: {
          span: 8,
        },
      },
    },
    string10_3: {
      title: "尺寸",
      type: "string",
      ui: {
        placeholder: "Please input",
        size: "small",
        grid: {
          span: 8,
        },
      },
    },
    string11_1: {
      title: "输入长度限制",
      type: "string",
      maxLength: 10,
      ui: {
        placeholder: "Please input",
        type: "text",
        showWordLimit: true,
        grid: {
          span: 12,
        },
      },
    },
    string11_2: {
      title: "",
      type: "string",
      maxLength: 30,
      ui: {
        placeholder: "Please input",
        type: "textarea",
        showWordLimit: true,
        grid: {
          span: 12,
        },
      },
    },
  },
  required: ["string1"],
};
let formData: any = ref({});

function clear() {
  formData.value = null;
}

async function submit() {
  let valid = await form.value!.validate();
  if (valid) {
    console.log(toRaw(unref(formData)));
  }
}
</script>

<style scoped></style>

显示复制复制

API

我们只列出属性中不一致的或新添加的，一致的地方请参考 具体组件库 文档

meta 属性

成员	说明	类型	默认值
:maxLength	表单最大长度	number	-
:readOnly	禁用状态	boolean	-

meta.ui 属性(antdv)

成员	说明	类型	默认值
:addOnAfter	带标签的 input，设置后置标签	string	-
:slotNameOfAddonAfter	带标签的 input，设置后置标签，slot 名称	string	-
:addOnBefore	带标签的 input，设置前置标签	string	-
:slotNameOfAddonBefore	带标签的 input，设置前置标签，slot 名称	string	-
:prefix	带有前缀图标的 input	string	-
:slotNameOfPrefix	带有前缀图标的 input，slot 名称	string	-
:suffix	带有后缀图标的 input	string	-
:slotNameOfSuffix	带有后缀图标的 input，slot 名称	string	-
@change	输入框内容变化时的回调	function(e)	-

meta.ui 属性(element)

成员	说明	类型	默认值
:slotNameOfPrepend	输入框前置内容，只对非 type="textarea" 有效，slot 名称	string	-
:slotNameOfAppend	输入框后置内容，只对非 type="textarea" 有效，slot 名称	string	-
:slotNameOfPrefix	输入框头部内容，只对非 type="textarea" 有效，slot 名称	string	-
:slotNameOfSuffix	输入框尾部内容，只对非 type="textarea" 有效，slot 名称	string	-
@change	仅当 modelValue 改变时，当输入框失去焦点或用户按 Enter 时触发	function(e)	-
@input	在 Input 值改变时触发	function(e)	-