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 相关文章推荐
基于jquery的loading效果实现代码
Nov 05 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
Vuex中的State使用介绍
Jan 19 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
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
javascript的delete运算符知识点总结
2019/11/19 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
python实现计算资源图标crc值的方法
2014/10/05 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python绘制七段数码管实例代码
2017/12/20 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
2014国培学习感言
2014/03/05 职场文书
班级年度安全计划书
2014/05/01 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
会计岗位工作总结
2015/08/12 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL