element UI 设置type=“textarea“ 禁止输入框缩放

背景

在 Element UI 中,当您使用 el-input 组件并设置 type="textarea" 时,默认情况下,用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为,需要使用 CSS 来覆盖默认的浏览器行为。

注意上图,第一张是可以缩放的,第二章不能缩放的。区别就在于右下角的展示;

实现 

1、在 Element UI 中,当您使用 el-input 组件并设置 type="textarea" 时,默认情况下,用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为,您需要使用 CSS 来覆盖默认的浏览器行为。

<el-input  type="textarea"  :rows="2"  :cols="30"  placeholder="请输入内容"  style="resize: none;"  
></el-input>

2、全局样式:在您的 CSS 文件中添加样式规则

.el-textarea__inner {  resize: none;  
}

确保这个 CSS 规则在 Element UI 的样式之后加载,以确保它可以正确地覆盖默认样式。

3、Scoped CSS:如果您在单文件组件中使用 Vue,并希望仅在该组件中应用此样式,可以使用 scoped CSS。

<style scoped>  
.el-textarea__inner {  resize: none;  
}  
</style>

同样,确保这个样式规则在 Element UI 的样式之后加载。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用于显著提高检索速度和降低成本的二进制和标量嵌入量化

我们引入了嵌入量化的概念&#xff0c;并展示了它们对检索速度、内存使用、磁盘空间和成本的影响。我们将讨论理论上和实践中如何对嵌入进行量化&#xff0c;然后介绍一个 演示&#xff0c;展示了 4100 万维基百科文本的真实检索场景。 演示地址https://hf.co/spaces/sentence-…

说说你对栈、队列的理解?应用场景?

一、栈 栈&#xff08;stack&#xff09;又名堆栈&#xff0c;它是一种运算受限的线性表&#xff0c;限定仅在表尾进行插入和删除操作的线性表 表尾这一端被称为栈顶&#xff0c;相反地另一端被称为栈底&#xff0c;向栈顶插入元素被称为进栈、入栈、压栈&#xff0c;从栈顶删…

JS控制元素平滑滚动,页面自动滚动锚点实现

使用 scrollIntoView 实现元素内子元素的平滑滚动&#xff0c; 下面是模拟接口list返回&#xff0c;然后通过按钮切换下一个&#xff0c;页面就会滚动到响应的位置 具体 scrollIntoView 有一些其他参数来配置滚动的具体交换&#xff0c;网上去查即可 备注&#xff1a;下面的代码…

Element ui 动态展示表格列,动态格式化表格列的值

需求 后台配置前端展示的表格列&#xff0c;遇到比如 文件大小这样的值&#xff0c;如果后台存的是纯数字&#xff0c;需要进行格式化展示&#xff0c;并且能控制显示的小数位数&#xff0c;再比如&#xff0c;部分列值需要加单位等信息&#xff0c;此外还有状态类&#xff0…

19c ADG补丁升级及回退

一、环境说明 主 备 IP 192.168.37.201 192.168.37.202 系统版本 RedHat 7.9RedHat 7.9 数据库版本 19.3.0.0.019.3.0.0.0 SID pristd hostname primarystandby 二、OPatch配置 19c 19.22版本补丁&#xff0c;需要的Opatch的版本为12.2.0.1.40或者高于此版本才可以。 2.1…

数据结构--循环队列

1.队列的定义: 和栈相反,队列(queue)是一种先进先出(first in first out,缩写为FIFO)的线性表.它只允许在表的一端进行插入,而在另一端删除元素. 在队列中,允许插入的一端叫做队尾(rear),允许删除的一端则称为队头(front). 2.循环队列的设计图示: 3.循环队列的结构设计: ty…

很严重,大家开始存钱吧

hello大家好&#xff0c;我是张大哥&#xff0c;今天给大家聊的话题是资产和负债&#xff01;2024年&#xff0c;特别建议大家&#xff1a;一定要捂紧钱袋子&#xff0c;尽量减少不必要的消费支出&#xff0c;避免遭受经济波动的最直接影响。 什么是资产&#xff0c;就是能提供…

Vue.js npm错误:transpileDependencies.map不是一个函数

这个错误通常是由于npm版本不兼容导致的。在旧版本的npm中&#xff0c;transpileDependencies是一个字符串数组&#xff0c;我们可以直接配置需要编译的依赖库。而在较新版本的npm中&#xff0c;transpileDependencies被改成了一个对象&#xff0c;并且需要使用map()方法来处理…

刷好题,固基础-10

今天打天梯赛模拟赛有一道全排列的题&#xff08;在我看来是啦&#xff0c;虽然只拿了25/30&#xff0c;一个点超时了呜呜呜呜呜&#xff09; 在此纪念一下自己推导得出的得到两种不同全排列的方法&#xff1a; 方法一&#xff1a;按照字典序大小推导得出的全排列顺序 p是全…

【数据交换格式】网络socket编程温度采集智能存储与上报项目技术------JSON、TLV

作者简介&#xff1a; 一个平凡而乐于分享的小比特&#xff0c;中南民族大学通信工程专业研究生在读&#xff0c;研究方向无线联邦学习 擅长领域&#xff1a;驱动开发&#xff0c;嵌入式软件开发&#xff0c;BSP开发 作者主页&#xff1a;一个平凡而乐于分享的小比特的个人主页…

Git删除未跟踪的文件Untracked files

在 Git 中&#xff0c;要删除未跟踪的文件&#xff08;Untracked files&#xff09;&#xff0c;你可以使用 git clean 命令。请注意&#xff0c;这个命令会从你的工作目录中永久删除这些文件&#xff0c;因此在执行之前请确保你不再需要这些文件或已经妥善备份。 以下是如何使…

DataSource

目录 1、 DataSource 1.1、 * 建立数据库连接的参数对象 1.1.1、 * 数据库url 1.1.2、 * 数据库用户名 1.1.3、 * 数据库密码 1.1.4、 * 数据库驱动名称 <

【C++成长记】C++入门 | 类和对象(上) |面向过程和面向对象初步认识、类的引入、类的定义、类的访问限定符及封装

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;C❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 一、面向过程和面向对象初步认识 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步…

C++设计模式:代理模式(十三)

1、代理模式 定义&#xff1a;为其他对象提供一种代理以控制&#xff08;隔离使用接口&#xff09;对这个对象的访问等。 动机 在面向对象系统中&#xff0c;有些对象由于某种原因&#xff08;比如对象需要进程外的访问等&#xff0c;例如在分布式的系统中&#xff09;&#x…

【ZZULIOJ】1063: 最大公约与最小公倍(Java)

目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy 提示 code 题目描述 输入两个正整数&#xff0c;输出其最大公约数和最小公倍数。 输入 输入两个正整数n和m&#xff08;n,m<1000000)。输入保证最终结果在int范围内。 输出 输出两个整数&#xff0c;用空格…

【项目实战经验】DataKit迁移MySQL到openGauss(下)

上一篇我们分享了安装、设置、链接、启动等步骤&#xff0c;本篇我们将继续分享迁移、启动~ 目录 9. 离线迁移 9.1. 迁移插件安装 中断安装&#xff0c;比如 kill 掉java进程&#xff08;安装失败也要等待300s&#xff09; 下载安装包准备上传 缺少mysqlclient lib包 mysq…

oracle rac打补丁后sqlplus / as sysdba ora-12537

sqlplus / as sysdba 报错&#xff1a; ORA-12537: TNS:connection closed 检查用户属组&#xff1a; [rootrac1 ~]# id oracle uid1102(oracle) gid1101(oinstall) groups1101(oinstall),1102(dba) [rootrac1 ~]# id grid uid1101(grid) gid1101(oinstall) groups1101(oin…

大语言模型LLM《提示词工程指南》学习笔记03

文章目录 大语言模型LLM《提示词工程指南》学习笔记03链式提示思维树检索增强生成自动推理并使用工具自动提示工程师Active-Prompt方向性刺激提示Program-Aided Language ModelsReAct框架Reflexion多模态思维链提示方法基于图的提示大语言模型LLM《提示词工程指南》学习笔记03 …

【零基础学数据结构】双向链表

1.双向链表的概念 1.1头节点 1.2带头双向循环链表 注意&#xff1a; 哨兵位创建后&#xff0c;首尾连接自己 1.3双链表的初始化 // 双向链表的初始化 void ListInit(ListNode** pphead) {// 给双链表创建一个哨兵位*pphead ListBuyNode(-1); } 2.双向链表的打印 // 双向…

怎么用docker安装MySQL

可以访问 Docker Hub 上的 MySQL 镜像仓库。在 MySQL 官方仓库页面上&#xff0c;会列出所有可用的镜像标签及其对应的版本。 以下是使用 Docker 安装 MySQL 8 的基本步骤&#xff1a; 拉取官方的 MySQL 8 镜像&#xff1a; docker pull mysql:8 运行一个 MySQL 容器实例&a…