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 相关文章推荐
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
JavaScript创建表格的方法
Apr 13 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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
Python:Numpy 求平均向量的实例
2019/06/29 Python
numpy数组广播的机制
2019/07/12 Python
python字典排序的方法
2019/10/12 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
药学职务聘任书
2014/03/29 职场文书
英语故事演讲稿
2014/04/29 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
龙猫观后感
2015/06/09 职场文书
爱国主题班会教案
2015/08/14 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
vue 自定义组件添加原生事件
2022/04/21 Vue.js