Input输入框

Input 为受控组件,它总会显示 Vue 绑定值

通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。

不支持 v-model 修饰符。

支持disabled

  clearable(一键清空,默认false)

  show-password(隐藏显示的密码输入框)

<el-input placeholder="请输入密码" v-model="input" show-password>

</el-input>

<script>

   export default { data() { return { input: '' } } }

</script>

使用icon

prefix-icon 首部添加icon

suffix-icon 尾部添加icon

<div class="demo-input-suffix">

  属性方式: <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1"> </el-input>

  <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2"> </el-input>

</div>

可以用slot进行处理

<div class="demo-input-suffix">

  slot 方式: <el-input placeholder="请选择日期" v-model="input3"> <i slot="suffix" class="el-input__icon el-icon-date"></i> </el-input>

   <el-input placeholder="请输入内容" v-model="input4"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>

</div>

type=‘textarea’,input文本域

可以用rows属性控制文本域高度

通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize 还可以设定为一个对象,指定最小行数和最大行数。

autosize,:autosize="{ minRows: 2, maxRows: 4}"

复合型输入框

<div>

  <el-input placeholder="请输入内容" v-model="input1">

     <template slot="prepend">Http://</template>

  </el-input>

</div>

<div style="margin-top: 15px;">

  <el-input placeholder="请输入内容" v-model="input2">

     <template slot="append">.com</template>

  </el-input>

</div>

<div style="margin-top: 15px;">

  <el-input placeholder="请输入内容" v-model="input3" 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>

可通过 size 属性指定输入框的尺寸,除了默认的大小外,还提供了 large、small 和 mini 三种尺寸。

autocomplete 是一个可带输入建议的输入框组件,fetch-suggestions 是一个返回输入建议的方法属性,如 querySearch(queryString, cb),在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。

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

querySearch(queryString, cb) { var restaurants = this.restaurants; var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; // 调用 callback 返回建议列表的数据 cb(results); },

createFilter(queryString) { return (restaurant) => { return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0); }; },

补充一下

filter方法,这里这么写是为了把queryString(input框的输入值)传参到内嵌的箭头函数去使用,filter函数的参数,前三个默认是调用元素,索引,对应的数组对象,没办法直接传参进该函数。

上面的箭头函数可以简写成

return restaurant =>

restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0

<el-autocomplete popper-class="my-autocomplete" v-model="state" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"> 
  <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick"> </i>
  <template slot-scope="{ item }">
   <div class="name">{{ item.value }}</div>
    <span class="addr">{{ item.address }}</span>
  </template>
</el-autocomplete>
使用slot可以自定义建议输出模板,scope的参数为item this.timeout = setTimeout(() => { cb(results); }, 3000 * Math.random());
模拟延迟查询数据的效果
placement设置菜单弹出位置,可选项top,top-start,top-end,bottom,bottom-start,bottom-end
select-when-unmatched 在输入没有任何匹配建议的情况下,按下回车是否触发 select事件 默认false
maxlength 和 minlength 是原生属性,用来限制输入框的字符长度,其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框,在使用 maxlength 属性限制最大输入长度的同时,可通过设置 show-word-limit 属性来展示字数统计。
<el-input type="text" placeholder="请输入内容" v-model="text" maxlength="10" show-word-limit > 参考地址:https://element.eleme.cn/#/zh-CN/component/input

Element-ui学习笔记3--Form表单(二)的更多相关文章

  1. 学习笔记之form表单

    form表单提交的数据 是字典类型 这样 方便在create时候 直接解压

  2. bootstrap学习笔记<六>(表单二之按钮)

    按钮(补充) (ps:居中元素可以使用<center></center>标签) 块级按钮(ps:按钮占一整行) <button class="btn btn-p ...

  3. Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

  4. HTML5学习笔记<五>: HTML表单和PHP环境搭建

    HTML表单 1. 表单用于不同类型的用户输入 2. 常用的表单标签: 标签 说明 <form> 表单 <input> 输入域 <textarea> 文本域 < ...

  5. PHP全栈开发(四): HTML 学习(3. form 表单)

    form 表单标签 它表的是一个区域,而非是一个具体的某个元素,它也是作为一个容器的存在. 表单域主要是允许用户在表单域中输入内容,比如文本框,下拉列表,单选框,复选框,等等. <!DOCTYP ...

  6. Django学习系列之Form表单结合ajax

      Forms结合ajax Forms的验证流程: 定义用户输入规则的类,字段的值必须等于html中name属性的值(pwd= forms.CharField(required=True)=<i ...

  7. knockoutJS学习笔记08:表单域绑定

    前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定. 一.value 绑定 绑定标签:input text.textarea. <p>用户名:<input type=" ...

  8. 3.django笔记之form表单

    作者:刘耀 瞎copy伸手党 我在诅咒你. Django的form的作用: 1.生成html标签 2.用来做用户提交的验证 3.可以和models一起使用(modelform) 一.form基础 工程 ...

  9. HTML 学习笔记 JQuery(表单,表格 操作)

    表单应用 一个表单有3个基本组成部分 (1)表单标签:包含处理表单数据所用的服务器端程序URL 以及数据提交到服务器的方法 (2)表单域:包含文本框 密码框 隐藏框 多行文本框 复选框 单选框 下拉选 ...

  10. HTML学习笔记8:表单

      什么是表单?     一个网页表单可以将用户输入的数据发送到服务器进行处理.因为互联网用户使用复选框,单选按钮或文本字段填写表格,所以WebForms的形式类似文件或数据库.例如,WebForms ...

随机推荐

  1. bzoj2467 生成树

    传送门 生成树计数裸题,因为模数不是质数所以要用辗转相除的高斯消元. de了很久的bug然后发现一个变量A赋值后下一行又申明了一个新的临时变量A(: //Achen #include<algor ...

  2. 如何让div处于body居中的状态

    <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8&qu ...

  3. Hdu 4251 区间中位数(划分树)

    题目链接 The Famous ICPC Team Again Time Limit: 30000/15000 MS (Java/Others)    Memory Limit: 32768/3276 ...

  4. SAS之大话PDV

    SAS之大话PDV 之所以说是数据源,而非输入缓冲区的原因上一条推送已经说明,这里就不再啰嗦啦. 这里我们且将DATA步流程简单地分为从数据源读入到pdv和从pdv写入数据集. IF语句 & ...

  5. 重温 Webpack, Babel 和 React

    开始之前 在书写文章之前,我假设大家已经有了 JavaScript,Node 包管理工具,Linux 终端操作 这些基本技能,接下来,我将一步一步指引大家从头搭建一个 React 项目 最终实现的效果 ...

  6. 利用Factory-boy和sqlalchemy来批量生成数据库表数据

    测试过程中免不了要构造测试数据,如果是单条数据,还比较简单,但如果是批量数据,就比较麻烦了. 最近看到Factory_boy这个python第三方库,它通过SQLAlchemyModelFactory ...

  7. man命令及help命令

    一.man命令 man命令常用工具命令 man命令是Linux下的帮助指令,通过man指令可以查看Linux中的指令帮助.配置文件帮助和编程帮助等信息. 语法: man(选项)(参数) 选项: -a: ...

  8. 【数论】不定方程&逆元&中国剩余定理

    一.不定方程 要求逆元,首先要知道什么是不定方程. 已知a,b,c,求解x,y,形如ax + by = c 的方程就是不定方程. 不定方程有两种解的情况: 1.无解 2.存在且有无限的解 那么,如何判 ...

  9. python 类的创建

  10. asp.net ajax客户端框架如何调用Page Method

    asp.net ajax客户端框架如何调用Page Method 1:欲调用的页面方法必须声明为公有(Public)2:该方法必须为静态方法(static)3:该方法必须添加[System.Web.S ...