Element UI 的输入框

2023-11-11

Input 输入框

通过鼠标或键盘输入字符。

  1. Input (el-input)为受控组件,它总会显示 Vue 绑定值。
  2. 通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。
  3. 不支持 v-model 修饰符。
  • 基础用法

     

     

  • 禁用状态
    通过 disabled 属性指定是否禁用 input 组件

     

     

  • 可清空
    使用clearable属性即可得到一个可清空的输入框。

     

     

  • 密码框
    使用show-password属性即可得到一个可切换显示隐藏的密码框。

     

     

  • 带 icon 的输入框
    带有图标标记输入类型。
    可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。

     

     

  • 文本域
    用于输入多行文本信息,通过将 type 属性的值指定为 textarea。
    文本域高度可通过 rows 属性控制。

     

     

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

     

     

  • 复合型输入框
    可前置或后置元素,一般为标签或按钮。
    可通过 slot 来指定在 input 中前置或者后置内容。

     

     

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

     

     

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

     

     

  • 自定义模板
    可自定义输入建议的显示。
    使用scoped slot自定义输入建议的模板。该 scope 的参数为item,表示当前输入建议对象。

     

     

  • 远程搜索
    从服务端搜索数据。

     

     

  • 输入长度限制
    maxlength 和 minlength 是原生属性,用来限制输入框的字符长度,其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框,在使用 maxlength 属性限制最大输入长度的同时,可通过设置 show-word-limit 属性来展示字数统计。

     

     

  • Input Attributes

     

     

     

  • Input Slots

     

  • Input Events

     

  • Input Methods

     

  • Autocomplete Attributes

     

     

  • Autocomplete Slots

     

  • Autocomplete Scoped Slot

     

  • Autocomplete Events

     

     

    Autocomplete Methods

     



 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Element UI 的输入框 的相关文章

随机推荐

  • 当前的软件潮流

    1 以ERP为代表 注重业务逻辑 模式 数据存储 比较经典的书籍有Fowler的 lt 企业应用架构模式 gt 等 2 SaaS 一些通用型的企业需求越来越倾向于使用data center提供的服务 如CRM HCM human capit
  • 关于android instrumentation的理解、使用

    一般的应用不太会用到instrumentation 所以网上对其介绍也比较少 但因其强大的跟踪application及activity生命周期的功能 用于android 应用测试框架中 被做为基类使用 instrumentation的官方文
  • vooc是什么快充协议_一山更比一山高,常见的快充协议有哪些?

    快充这一领域充分诠释了 一山还有一山高 这一句话 当 65W 还历历在目的时候 90W 的联想拯救者新机冒出来了 这还不止 小米随即有一款 120W 的新机通过 3C 认证 快充的领军者 OV 两厂自然不会落下 vivo 宣布 8 月份将有
  • chrome插件使用整理

    1 postman 功能 模拟网页调试与发送网页HTTP请求 安装 进入chrome网上应用商店 搜索postman 点击添加至chrome 装好后 启用即可 使用 具体如下图 设置完请求 发送即可 总结 构建请求方便 对于调试API 以及
  • RK3399Pro LVDS接口触摸屏调试

    一 概述 市场上的触摸屏大都是由LCD与TP组成 LCD用于显示 TP用于反馈触摸点信息 目前选用的LCD屏为LVDS接口而RK3399系列没有原生LVDS接口 所以这里我们就需要用到信号转换芯片 将MIPI信号转为LVDS信号 二 LCD
  • C语言中的exit()函数

    函数名 exit 所在头文件 stdlib h 功 能 关闭所有文件 终止正在执行的进程 exit 1 表示异常退出 这个1是返回给操作系统的 exit x x不为0 都表示异常退出 exit 0 表示正常退出 exit 的参数会被传递给一
  • 不能初始化数据库支持endnote_终于修复了我的EndNote文献管理数据库

    之前一直用EndNote来管理文献资料 由于家里的电脑和办公室的电脑资料需要经常同步 就用115网盘来做为同步盘来同步文献资料库 但EndNote有个特点 就是在关闭它时才会最后更新文献资料库所在的data rdb目录的一些文件 因此 在用
  • webpack

    一 是什么 HMR全称 Hot Module Replacement 可以理解为模块热替换 指在应用程序运行过程中 替换 添加 删除模块 而无需重新刷新整个应用 例如 我们在应用运行过程中修改了某个模块 通过自动刷新会导致整个应用的整体刷新
  • iscsi 服务器

    iscsi服务器简介 当我们的系统需要大量的磁盘容量 但是身边却没有足够的存储设备 此时 我们可以使用通过网络的scsi磁盘 即Internet scsi iscsi iscsi主要是通过TCP IP的技术 将存储设备端通过iscsi ta
  • Python3.0+学习记录之数字

    Python3 数字 Number Python 数字数据类型用于存储数值 数据类型是不允许改变的 这就意味着如果改变数字数据类型得值 将重新分配内存空间 以下实例在变量赋值时 Number 对象将被创建 var1 1 var2 10 您也
  • 如何一步更改文件夹及其子文件夹/文件的权限

    问 我想在 Linux 中一步 命令 更改文件夹及其所有子文件夹和文件的权限 我已经尝试过以下命令 但它仅适用于提到的文件夹 chmod 775 opt lampp htdocs 有没有办法为 opt lampp htdocs 及其所有内容
  • Apache服务器设置虚拟目录,Apache服务器虚拟主机虚拟目录配置.pdf

    实验一 Apache 服务器配置 1 Apache 服务器介绍与安装 Apache 是世界使用排名第一的Web 服务器软件 它可以运行在几乎所有广 泛使用的计算机平台上 由于其跨平台和安全性被广泛使用 是最流行的 Web 服务器端软件之一
  • ResNet50进行image分类

    keras预训练模型应用 1 ResNet50进行image分类 Keras 中文文档 Application应用 Kera的应用模块Application提供了带有预训练权重的Keras模型 这些模型可以用来进行预测 特征提取和finet
  • 接口 测试

    一 接口概念 1 什么是接口 API 接口 接口是为了提供一种服务 所有的接口统称为API 接口分为内部接口和外部接口 外部接口 测试被测系统和外部系统之间的接口 测试内部接口 1 内部接口提供内部系统使用 开发人员自己开发的对自身系统提供
  • Android起始内存大,调整Android Studio分配内存大小

    如果Androidstudio运行起来非常卡顿 缓慢 很可能是因为初始分配的内存不够导致卡顿 查看当前分配的Heap 总大小以及使用状况可以在studio中设置展示 具体位置Settings gt Appearance 页里 打开Show
  • LINUX查看进程在哪个cpu核上运行的方法

    方法一 使用top命令 top 命令可以显示进程在哪个CPU上运行 可以连续监视随着时间的改变 该进程运行在哪个cpu上是否发生变化 使用步骤 top p 进程号 例如 top p 3000 按下 F 键 使用上下键选择P Last Use
  • Spring boot JdbcTemplate使用多数据源配置

    注 使用上篇的Mac Spring boot 1 5 9 使用JDBCTemplate操作数据库 现在我们使用两个数据库 都有个user表 对user表进行相关数据库操作 1 看下项目目录 2 我们配置下application proper
  • [转]汽车电子还能这么玩

    如果你认为本系列文章对你有所帮助 请大家有钱的捧个钱场 点击此处赞助 赞助额0 1元起步 多少随意 声明 本文只用于个人学习交流 若不慎造成侵权 请及时联系我 立即予以改正 锋影 email 174176320 qq com 导读 汽车电子
  • java成绩等级判断

    import java util Scanner 成绩等级判断 public class ScoreLevel public static void main String args Scanner sc new Scanner Syste
  • Element UI 的输入框

    Input 输入框 通过鼠标或键盘输入字符 Input el input 为受控组件 它总会显示 Vue 绑定值 通常情况下 应当处理 input 事件 并更新组件的绑定值 或使用v model 否则 输入框内显示的值将不会改变 不支持 v