栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

Element Input输入框的使用方法

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Element Input输入框的使用方法

本文来源于Element官方文档:

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

基础用法

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


 
 
  

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

  
  
 
 
  
  

复合输入框


 
  
 


 
  
 


 
  
   
   
   
  
  
 
 

带提示的输入框




 
 
 

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输入框内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/69491.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号