# Field 输入框

# 引入说明

TIP

import Field from "jimoui/components/Field/Field";
import FieldGroup from "jimoui/components/FieldGroup/FieldGroup";

1
2

# 代码演示

TIP

单独使用Field时，无边框。
当type=="textarea"时，输入框高度自适应，例：地址

// 基础样式
<FieldGroup>
    <Field required :label="'文本'" :placeholder="'请输入文本'" :textPosition="'right'"></Field>
    <Field :label="'文本'" :placeholder="'请输入文本'" :textPosition="'right'"></Field>
</FieldGroup>

<FieldGroup>
    <Field required :label="'文本文本文本'" :placeholder="'请输入文本'"></Field>
    <Field :label="'文本'" :placeholder="'请输入文本'"></Field>
</FieldGroup>

// 自定义类型
<FieldGroup>
    <Field required :label="'文本'" :placeholder="'请输入文本'"></Field>
    <Field :label="'手机号'" type="tel" :placeholder="'请输入文本'"></Field>
    <Field type="textarea" :label="'地址'" :placeholder="'请输入文本'"></Field>
</FieldGroup>

// 禁用输入框
<Field :label="'文本'" :placeholder="'请输入文本'" value="输入框只读" :readonly="true"></Field>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 属性

:label属性为必填项，其他属性非必填

配置	用途	取值	使用描述
v-model(value)	当前输入的值	String
:label	输入框左侧文本	String
:type	输入框类型	String	输入框类型, 可选值为text tel textarea 等
:name	名称，提交表单的标识符	String
:placeholder	输入框占位提示文字	String
:maxlength	输入的最大字符数	Number
:bannerBorder	内边框是否通栏	Boolean	若不是输入框组，则无效
:readonly	输入框是否只读	Boolean
:textPosition	输入框文本对齐方式	String	默认left。可选值为 left right
:caretColor	输入框光标颜色	String	默认#ff680a
required	是否展示必填星星	/
:focus	是否选中	Boolean	默认false
@focus	设置可点击文字颜色	$Event
@blur	图片类型时，设置图片替换默认图片	$Event