亲宝软件园·资讯

展开

Element Input输入框如何使用

究极死胖兽 人气:1

本文着重讲解了Element Input输入框如何使用,文中通过代码实例讲解的非常细致,对大家的工作和学习具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

本文来源于Element官方文档:

http://element-cn.eleme.io/

基础用法

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

<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 点击选中建议项时触发 选中建议项

加载全部内容

相关教程
猜你喜欢
用户评论