Element Input输入框的使用方法


Posted in Javascript onJuly 26, 2020

本文来源于Element官方文档:

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

基础用法

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

<el-input
  placeholder="请选择日期"
  suffix-icon="el-icon-date"
  v-model="input2">
 </el-input>
 <el-input
  placeholder="请输入内容"
  prefix-icon="el-icon-search"
  v-model="input21">
 </el-input>

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

<el-input
  placeholder="请选择日期"
  v-model="input22">
  <i slot="suffix" class="el-input__icon el-icon-date"></i>
 </el-input>
 <el-input
  placeholder="请输入内容"
  v-model="input23">
  <i slot="prefix" class="el-input__icon el-icon-search"></i>
 </el-input>

复合输入框

<div>
 <el-input placeholder="请输入内容" v-model="input3">
  <template slot="prepend">Http://</template>
 </el-input>
</div>
<div>
 <el-input placeholder="请输入内容" v-model="input4">
  <template slot="append">.com</template>
 </el-input>
</div>
<div>
 <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
  <el-select v-model="select" slot="prepend" placeholder="请选择">
   <el-option label="餐厅名" value="1"></el-option>
   <el-option label="订单号" value="2"></el-option>
   <el-option label="用户电话" value="3"></el-option>
  </el-select>
  <el-button slot="append" icon="el-icon-search"></el-button>
 </el-input>
</div>

带提示的输入框

<el-autocomplete
   class="inline-input"
   v-model="state1"
   :fetch-suggestions="querySearch"
   placeholder="请输入内容"
   @select="handleSelect"
  ></el-autocomplete>

<el-autocomplete
 popper-class="my-autocomplete"
 v-model="state2"
 :fetch-suggestions="querySearch"
 placeholder="请输入内容"
 @select="handleSelect">
 <i
  class="el-icon-edit el-input__icon"
  slot="suffix"
  @click="handleIconClick">
 </i>
 <template slot-scope="props">
  <div class="name">{{ props.item.value }}</div>
  <span class="addr">{{ props.item.address }}</span>
 </template>
</el-autocomplete>

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

Javascript 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
js不常见操作运算符总结
Nov 20 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 #Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 #Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 #Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 #Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 #Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 #Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 #Javascript
You might like
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Python SQLite3数据库操作类分享
2014/06/10 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
Python管理Windows服务小脚本
2018/03/12 Python
Python requests设置代理的方法步骤
2020/02/23 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
机关道德讲堂实施方案
2014/03/15 职场文书
医师定期考核实施方案
2014/05/07 职场文书
建筑安全生产责任书
2014/07/22 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
行政主管岗位职责
2015/02/03 职场文书
童年读书笔记
2015/06/26 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL