vform-element

Input 输入框

基础用法

禁用状态

通过 disabled 属性指定是否禁用 input 组件

一键清空

使用clearable属性即可得到一个可一键清空的输入框

格式化

使用formatter和parser格式化数据

密码框

使用 showPassword 属性即可得到一个可切换显示隐藏的密码框

带图标的输入框

带有图标标记输入类型

要在输入框中添加图标，你可以简单地使用 prefix-icon 和 suffix-icon 属性。 另外， prefix 和 suffix 命名的插槽也能正常工作。

插槽配置

我们将插槽变为可选属性配置,
可选的插槽对应了ElInput的所有插槽

export interface VInputItem {
  slots?: {
    prefix?: JSX.Element | { (): JSX.Element }
    suffix?: JSX.Element | { (): JSX.Element }
    prepend?: JSX.Element | { (): JSX.Element }
    append?: JSX.Element | { (): JSX.Element }
  }
}
1
2
3
4
5
6
7
8

文本域

用于输入多行文本信息可缩放的输入框。 设置 type="textarea" 即可

文本域高度可通过 rows 属性控制

自适应文本域

设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。 你可以给 autosize 提供一个包含有最大和最小高度的对象，让输入框自动调整。

复合型输入框

可以在输入框中前置或后置一个元素，通常是标签或按钮。

可通过 slot 来指定在 Input 中分发的前置或者后置的内容。

尺寸

使用 size 属性改变输入框大小。 可选值: large, small.

配置选项

Input 完全继承了 ElInput的属性 您可以从下面的链接里找到相关文档

如果您使用了typescript，我们提供了类型提示,配置一个Input输入框大概有如下可选项

高亮的部分为大多数表单元素通用配置





 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 















export interface VInputItem<
  T extends object, 
  Key extends DeepKey<T> = DeepKey<T>
> {
  /**
   * 占用多个区域
   */
  colSpan?: number
  /**
   * 对应的字段
   */
  dataIndex: Key
  /**
   * label
   */
  label: DynamicDef<T, string>
  /**
   * 验证规则
   */
  rule?: DynamicDef<T, ValidationRule[]>
  /**
   * 是否渲染
   */
  vIf?: DynamicDef<T, boolean>
  /**
   * `element-plus Input`的属性
   */
  props?: VPropDef<T, InputProps>
  /**
   * 插槽
   */ 
  slots?: {
    prefix?: JSX.Element | { (): JSX.Element }
    suffix?: JSX.Element | { (): JSX.Element }
    prepend?: JSX.Element | { (): JSX.Element | string }
    append?: JSX.Element | { (): JSX.Element | string }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38