element input 自适应_Element Input输入框的使用方法

本文来源于Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component/input

基础用法

带图标的输入框(属性方式)

placeholder="请选择日期"

suffix-icon="el-icon-date"

v-model="input2">

placeholder="请输入内容"

prefix-icon="el-icon-search"

v-model="input21">

带图标的输入框(slot方式)

placeholder="请选择日期"

v-model="input22">

placeholder="请输入内容"

v-model="input23">

复合输入框

Http://

.com

带提示的输入框

class="inline-input"

v-model="state1"

:fetch-suggestions="querySearch"

placeholder="请输入内容"

@select="handleSelect"

>

popper-class="my-autocomplete"

v-model="state2"

:fetch-suggestions="querySearch"

placeholder="请输入内容"

@select="handleSelect">

class="el-icon-edit el-input__icon"

slot="suffix"

@click="handleIconClick">

{{ props.item.value }}

{{ props.item.address }}

input 属性：

参数

类型

说明

可选值

默认值

type

类型

string

text / textarea

text

value

绑定值

string / number

—

—

maxlength

最大输入长度

number

—

—

minlength

最小输入长度

number

—

—

placeholder

输入框占位文本

string

—

—

clearable

是否可清空

boolean

—

false

disabled

禁用

boolean

—

false

size

输入框尺寸，只在 type!=”textarea” 时有效

string

medium / small / mini

—

prefix-icon

输入框头部图标

string

—

—

suffix-icon

输入框尾部图标

string

—

—

rows

输入框行数，只对 type=”textarea” 有效

number

—

2

autosize

自适应内容高度，只对 type=”textarea” 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }

boolean / object

—

false

auto-complete

原生属性，自动补全

string

on, off

off

name

原生属性

string

—

—

readonly

原生属性，是否只读

boolean

—

false

max

原生属性，设置最大值

—

—

—

min

原生属性，设置最小值

—

—

—

step

原生属性，设置输入字段的合法数字间隔

—

—

—

resize

控制是否能被用户缩放

string

none, both, horizontal, vertical

—

autofocus

原生属性，自动获取焦点

boolean

true, false

false

form

原生属性

string

—

—

label

输入框关联的label文字

string

—

—

tabindex

输入框的tabindex

string

-

-

input slot：

name

说明

prefix

输入框头部内容，只对 type=”text” 有效

suffix

输入框尾部内容，只对 type=”text” 有效

prepend

输入框前置内容，只对 type=”text” 有效

append

输入框后置内容，只对 type=”text” 有效

input 事件：

事件名称

说明

回调参数

blur

在 Input 失去焦点时触发

(event: Event)

focus

在 Input 获得焦点时触发

(event: Event)

change

在 Input 值改变时触发

(value: string 或 number)

input 方法：

方法名

说明

参数

focus

使 input 获取焦点

-

Autocomplete 属性：

参数

类型

说明

可选值

默认值

placeholder

输入框占位文本

string

—

—

disabled

禁用

boolean

—

false

value-key

输入建议对象中用于显示的键名

string

—

value

value

必填值，输入绑定值

string

—

—

debounce

获取输入建议的去抖延时

number

—

300

fetch-suggestions

返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它

Function(queryString, callback)

—

—

popper-class

Autocomplete 下拉列表的类名

string

—

—

trigger-on-focus

是否在输入框 focus 时显示建议列表

boolean

—

true

name

原生属性

string

—

—

select-when-unmatched

在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件

boolean

—

false

label

输入框关联的label文字

string

—

—

prefix-icon

输入框头部图标

string

—

—

suffix-icon

输入框尾部图标

string

—

—

Autocomplete slots：

name

说明

prefix

输入框头部内容

suffix

输入框尾部内容

prepend

输入框前置内容

append

输入框后置内容

Autocomplete 事件：

事件名称

说明

回调参数

select

点击选中建议项时触发

选中建议项

到此这篇关于Element Input输入框的使用方法的文章就介绍到这了,更多相关Element Input输入框内容请搜索易采站长站以前的文章或继续浏览下面的相关文章希望大家以后多多支持易采站长站！