Input 输入框

基础用法

{
  id: "",
  componentName: "Input",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "用户名",
  },
  attrs: {
    placeholder: "请输入",
  }
}

禁用状态

{
  id: "",
  componentName: "Input",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "用户名",
  },
  attrs: {
    placeholder: "请输入",
    disabled: true, 
  }
}

一键清空

{
  id: "",
  componentName: "Input",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "用户名",
  },
  attrs: {
    placeholder: "请输入",
    clearable: true, 
  }
}

格式化

{
  id: "",
  componentName: "Input",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "用户名",
  },
  attrs: {
    placeholder: "请输入",
    formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ","),
    parser: (value) => value.replace(/\$\s?|(,*)/g, ""),
  }
}

密码框

{
  id: "",
  componentName: "Input",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "密码",
  },
  attrs: {
    placeholder: "请输入",
    type: "password", 
    'show-password': true,
  }
}

带图标的输入框

{
  id: "",
  componentName: "Input",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "用户名",
  },
  attrs: {
    placeholder: "请输入",
    'suffix-icon': Calendar,
    //'prefix-icon': Search
  }
}

TIP

图标组件需要提前手动导入

import { Calendar, Search } from "@element-plus/icons-vue";

复合型输入框

  {
    id: "",
    componentName: "Input",
    componentType: "form",
    formItemAttrs: {
      field: "input1",
      label: "",
    },
    attrs: {
      placeholder: "请输入",
    },
    slots: {
      prepend: {
        componentName: "span",
        text: "Http://",
      },
    },
  }

  {
    id: "",
    componentName: "Input",
    componentType: "form",
    formItemAttrs: {
      field: "",
      label: "",
    },
    attrs: {
      placeholder: "请输入",
    },
    slots: {
      append: {
        componentName: "span",
        text: ".com",
      },
    },
  }

尺寸

{
  id: "",
  componentName: "Input",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "用户名",
  },
  attrs: {
    placeholder: "请输入",
    size: 'large', // 'small'|'default'
  }
}

输入长度限制

{
  id: "",
  componentName: "Input",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "用户名",
  },
  attrs: {
    placeholder: "请输入",
    maxlength: '10',  
    "show-word-limit": true, 
  }
}

<script lang="ts" setup>
import { ref } from "vue";
import FormCookRender from "form-cook-render";
import type { FormSchema } from "form-cook-render";
const formData = ref({});
const formSchema: FormSchema = {
  formAreaConfig: {
    attrs: {},
  },
  formContentConfigList: [
    {
      id: "input1",
      componentName: "Input",
      componentType: "form",
      formItemAttrs: {
        field: "username",
        label: "用户名",
        required: true,
      },
      attrs: {
        placeholder: "请输入用户名",
      },
    },
  ],
};
</script>

<template>
  <form-cook-render v-model="formData" v-model:form-schema="formSchema" />
</template>