Element Plus 中Input输入框

通过鼠标或键盘输入字符

input为受控组件,他总会显示Vue绑定值,正常情况下,input的输入事件会正常被响应,他的处理程序应该更新组件的绑定值(或使用v-model)。否则,输入框的值将不会改变

不支持v-model修饰符

一、input基础用法

<template><el-input v-model="input" style="width: 240px" placeholder="Please input" />
</template><script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

二、禁用状态

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

<template><el-inputv-model="input"style="width: 240px"disabledplaceholder="Please input"/>
</template><script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

三、一键清空

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

<template><el-inputv-model="input"style="width: 240px"placeholder="Please input"clearable/>
</template><script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

四、格式化

在formatter的情况下显示值,我们通常同时使用parser

五、密码框

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

六、带图标的输入框

带有图标标记输入类型

要在输入框中添加图标,你可以简单地使用 prefix-icon 和 suffix-icon 属性。 另外, prefix 和 suffix 命名的插槽也能正常工作。

七、文本域

用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。

文本域高度可通过 rows 属性控制

八、自适应文本域

设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。 你可以给 autosize 提供一个包含有最大和最小高度的对象,让输入框自动调整。

九、复合型输入框

可以在输入框中前置或后置一个元素,通常是标签或按钮。

可通过 slot 来指定在 Input 中分发的前置或者后置的内容。

十、尺寸

使用 size 属性改变输入框大小。 除了默认大小外,还有另外两个选项: largesmall

十一、输入长度限制

使用 maxlength 和 minlength 属性, 来控制输入内容的最大字数和最小字数。 "字符数"使用JavaScript字符串长度来衡量。 为文本或文本输入类型设置 maxlength prop可以限制输入值的长度。 允许你通过设置 show-word-limit 到 true 来显示剩余字数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/146465.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Nginx配置虚拟主机

基于域名的虚拟主机 修改配置 进入nginx里的conf目录 修改nginx配置文件nginx.conf vi nginx.conf worker_processes auto;(自动识别CPU数) worker_rlimit_nofile 20480;&#xff08;指定 worker 子进程可以打开的最大文件句柄数&#xff0c;默认为1024&#xff09; use …

【有啥问啥】摄像头成像质量量化标准解读与测试方法

摄像头成像质量量化标准解读与测试方法 在自动驾驶和智能驾驶舱领域&#xff0c;摄像头是关键的感知设备&#xff0c;直接关系到系统的环境感知能力。为确保摄像头在实际应用中表现出色&#xff0c;需明确了解其成像质量标准和测试方法。本文将围绕成像质量的核心指标、测试方…

103.运行tomcat的Tomcatstartup.bat时,终端打印的中文显示为乱码

目录 原因 解决方法 原因 当运行Tomcat的Tomcatstartup.bat时&#xff0c;如果终端中文显示为乱码&#xff0c;这通常是因为Tomcat使用的日志输出编码与Windows命令行默认的编码不匹配。 解决方法 针对这一问题&#xff0c;你可以尝试以下步骤来解决&#…

2024年9月第3周AI资讯

阅读时间&#xff1a;3-4min 更新时间&#xff1a;2024.9.16-2024.9.20 目录 OpenAI 推出 o1&#xff1a;一种新的“推理”人工智能模型 微软为 Excel 和 Word 添加了更快的 Copilot World Labs 利用 AI 创建 3D 世界 AI 利用文本创建开放世界视频游戏 OpenAI 推出 o1&#x…

【源码+文档+调试讲解】微信小程序的投票系统

摘 要 伴随着我国社会的发展&#xff0c;人民生活质量日益提高。于是对各种需求进行规范而严格是十分有必要的&#xff0c;所以许许多多的微信小程序应运而生。此时单靠人力应对这些事务就显得有些力不从心了。所以本论文将设计一套微信小程序的投票系统&#xff0c;进行作品信…

Vue3DevTools7是如何在vscode定位指定文件位置的?

Vue3DevTools7是如何在vscode定位指定文件位置的&#xff1f; 背景 今天在使用vue脚手架创建项目的时候&#xff0c;并发现一个新的&#xff08;实验中的新功能&#xff09;&#xff0c;可以直接在我们的项目中集成Vue DevTools插件&#xff0c;浏览器插件devtools即将成为历史…

JAVA毕业设计178—基于Java+Springboot+vue的智能家具管理系统(源代码+数据库+万字论文)

毕设所有选题&#xff1a; https://blog.csdn.net/2303_76227485/article/details/131104075 基于JavaSpringbootvue的智能家具管理系统(源代码数据库万字论文)178 一、系统介绍 本项目前后端分离(可以改为ssm版本)&#xff0c;分为用户、管理员两种角色 1、用户&#xff1…

带你0到1之QT编程:十四、QV/HBoxLayout和QStatckedWidget双剑合璧

此为QT编程的第十四谈&#xff01;关注我&#xff0c;带你快速学习QT编程的学习路线&#xff01; 每一篇的技术点都是很很重要&#xff01;很重要&#xff01;很重要&#xff01;但不冗余&#xff01; 我们通常采取总-分-总和生活化的讲解方式来阐述一个知识点&#xff01; …

如何写一个自动化Linux脚本去进行等保测试--引言

#我的师兄喜欢给我的休闲实习生活加活&#xff0c;说是让我在实习期间写一个自动化脚本去进行等保测试。呵呵哒。 怎么办呢&#xff0c;师兄的指令得完成&#xff0c;师兄说让我使用Python完成任务。 设想如下&#xff1a; 1、将Linux指令嵌入到python脚本中 2、调试跑通 …

【Day02-JS+Vue+Ajax】

1. JS介绍 在前面的课程中&#xff0c;我们已经学习了HTML、CSS的基础内容&#xff0c;我们知道HTML负责网页的结构&#xff0c;而CSS负责的是网页的表现。 而要想让网页具备一定的交互效果&#xff0c;具有一定的动作行为&#xff0c;还得通过JavaScript来实现。那今天,我们就…

如何用 Web 界面 AI 工作流提升科研写作效率?

&#xff08;注&#xff1a;本文为小报童精选文章。已订阅小报童或加入知识星球「玉树芝兰」用户请勿重复付费&#xff09; 更易用&#xff0c;更高效。 痛点 作为一名研究生导师&#xff0c;我深深体会到学生在撰写论文时拖延症的严重程度。他们往往打开一个空白的 Word 文档&…

CSS01-语法规范、基础选择器

一、CSS语法规范 示例&#xff1a; 二、CSS的基础选择器 选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说&#xff0c;就是选择标签用的。 选择器的分类&#xff1a; 1、标签选择器 2、类选择器&#xff08;开发最常用&#xff09; 长字符命名…

VScode开发GD32移植(标准库通用),保姆级!!!!!!!

VScode开发GD32移植(标准库通用)&#xff0c;保姆级&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 文章目录 VScode开发GD32移植(标准库通用)&#xff0c;保姆级&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#…

稳联Profinet转Canopen网关携手伺服,高效提升生产效率

在当今的工业生产领域&#xff0c;追求高效、精准和可靠的生产方式是企业不断努力的方向。稳联技术Profinet转Canopen&#xff08;WL-ABC3033&#xff09;网关与伺服系统的携手合作&#xff0c;为提高生产效率带来了新的机遇和突破。 实现无缝通信&#xff0c;优化生产流程稳联…

煤矿智慧矿井数据集 (1.煤矿采掘工作面智能分析数据集2.煤矿井下钻场智能分析数据集 )

智慧矿井智能分析数据集 数据1&#xff1a;数据1包含煤矿采掘工作面工人安全帽检测&#xff0c;工人行为检测&#xff08;行走&#xff0c;站立&#xff0c;坐&#xff0c;操作&#xff0c;弯腰&#xff0c;靠&#xff0c;摔&#xff0c;爬&#xff09;&#xff0c;液压支撑防护…

python内置装饰器,解决接口自动化中公共方法(如,读excel),无需实例化即可调用...

Python 还提供了一些内置的装饰器&#xff0c;比如 staticmethod 和 classmethod&#xff0c;用于定义静态方法和类方法。 如接口自动化中&#xff0c;公共的方法&#xff0c;在一个文件夹&#xff0c;其他文件需要调用&#xff1b;

【题库制作】对于一个文档题库,将3或4个选项的题目分别放在单独的区域

原文链接&#xff1a;https://www.cnblogs.com/MrFlySand/p/18422619 操作步骤 如下图&#xff0c;对于一个文档题库&#xff0c;将3或4个选项的题目分别放在单独的区域 多添加一行D&#xff1a;将答案&#xff1a;替换为D.\n答案&#xff1a; 删除多余的D行&#xff1a;将D\…

HTML粉色烟花秀

目录 系列文章 写在前面 完整代码 代码分析 写在最后 系列文章 序号目录1HTML满屏跳动的爱心&#xff08;可写字&#xff09;2HTML五彩缤纷的爱心3HTML满屏漂浮爱心4HTML情人节快乐5HTML蓝色爱心射线6HTML跳动的爱心&#xff08;简易版&#xff09;7HTML粒子爱心8HTML蓝色…

CSP-J2024年全真模拟题 阅读程序篇2

因为明天考试&#xff0c;这回给大家准备了超详细的解析~ 22.程序中 n 和 m 只有输入正整数&#xff0c;程序的输出值才可能是 YES A.对B.错 23.程序中用到了递归函数 bool fun&#xff08;int n&#xff09; A.对B.错 24.若输入 n 和 m 都是素数&#xff0c;程序的输出值…

powerbi- l6-获取文件的动态链接

需求&#xff1a; 需要对文件夹中的文件进行处理处理的文件名包含当天的日期&#xff0c;格式为年月日 在powerbi 中打开高级编辑&#xff0c;将文件夹的名称中动态内容进行修改&#xff0c;按照如下的格式&#xff0c; 比如文件名为&#xff1a;fixed_name_20240930_abc.pdf…