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

news2024/12/25 9:28:45

背景

在 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.coloradmin.cn/o/1592162.html

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

相关文章

CH254X 8051芯片手册介绍

1 8051CPU 8051是一种8位元的单芯片微控制器&#xff0c;属于MCS-51单芯片的一种&#xff0c;由英特尔(Intel)公司于1981年制造。Intel公司将MCS51的核心技术授权给了很多其它公司&#xff0c;所以有很多公司在做以8051为核心的单片机&#xff0c;如Atmel、飞利浦、深联华等公…

【Tars-go】腾讯微服务框架学习使用03-- TarsUp协议

3 TarsUP协议 统一通信协议 TarsTup | TarsDocs (tarscloud.github.io) TarsDocs/base at master TarsCloud/TarsDocs (github.com) &#xff1a; 有关于tars的所有介绍 每一个rpc调用双方都约定一套数据序列化协议&#xff0c;gprc用的是protobuff&#xff0c;tarsgo是统一…

《黑马点评》Redis高并发项目实战笔记(上)P1~P45

P1 Redis企业实战课程介绍 P2 短信登录 导入黑马点评项目 首先在数据库连接下新建一个数据库hmdp&#xff0c;然后右键hmdp下的表&#xff0c;选择运行SQL文件&#xff0c;然后指定运行文件hmdp.sql即可&#xff08;建议MySQL的版本在5.7及以上&#xff09;&#xff1a; 下面这…

Vivado抓信号——提高效率的工具化生成XDC(Python脚本)

操作目录 一、要抓取信号的txt列表二、操作流程 通常情况下&#xff0c;Vivado上板抓取信号的方法主要有两类&#xff1a; &#xff08;1&#xff09;通过在信号前添加(mark_debug“true”)&#xff0c;综合完之后点击Set Up Debug&#xff0c;将需要抓取的信号添加进去&#x…

电脑端微信截图文字识别功能效率更高了

近期发现微信中的截图文字识别比QQ中的截图文字识别效率高更高&#xff0c;效果更好。 使用方法&#xff1a; 安装电脑端微信客户端&#xff1a;https://weixin.qq.com/(如果没有下载&#xff0c;可以安装一下) 默认截图组合快捷键是&#xff1a;ALTA (使用下来感觉不是很顺手…

网桥的原理

网桥的原理 1.1 桥接的概念 简单来说&#xff0c;桥接就是把一台机器上的若干个网络接口“连接”起来。其结果是&#xff0c;其中一个网口收到的报文会被复制给其他网口并发送出去。以使得网口之间的报文能够互相转发。 交换机就是这样一个设备&#xff0c;它有若干个网口…

基于SpringBoot+Vue的毕业设计管理系统(源码+文档+部署+讲解)

一.系统概述 二十一世纪我们的社会进入了信息时代&#xff0c;信息管理系统的建立&#xff0c;大大提高了人们信息化水平。传统的管理方式对时间、地点的限制太多&#xff0c;而在线管理系统刚好能满足这些需求&#xff0c;在线管理系统突破了传统管理方式的局限性。于是本文针…

GoC模拟试题2

GoC测试模拟题(2017.3.23)第1题&#xff1a;领奖台 题目描述 小C同学在学校GoC编程比赛中获得了一等奖&#xff0c;他希望在领奖会上能站在一个漂亮的领奖台上。设计的领奖台如下图&#xff0c;请你帮忙使用GoC编程绘制。 说明&#xff1a; 上图中红色数字是标明尺寸的&#…

4月全新热文高科技,套用模板一键生成热文,没脑子拷贝,第二天出盈利

撰写热门文章&#xff0c;如今日头条或微信公众号文章&#xff0c;通常需要多长时间呢&#xff1f;从构思主题、搜集资料&#xff0c;到撰写成文&#xff0c;整个过程至少需要1小时&#xff0c;有时甚至可能需要2小时。 项目 地 址&#xff1a;laoa1.cn/1627.html 现在&…

Fence同步

在《Android图形显示系统》没有介绍到帧同步的相关概念&#xff0c;这里简单介绍补充一下。 在图形显示系统中&#xff0c;图形缓存GraphicBuffer可以被不同的硬件来访问&#xff0c;如CPU、GPU、HWC都可以对缓存进行读写&#xff0c;如果同时对图形缓存进行操作&#xff0c;有…

数据结构--循环队列

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

napi系列学习进阶篇——NAPI生命周期

什么是NAPI的生命周期 我们都知道&#xff0c;程序的生命周期是指程序从启动&#xff0c;运行到最后的结束的整个过程。生命周期的管理自然是指控制程序的启动&#xff0c;调用以及结束的方法。 而NAPI中的生命周期又是怎样的呢&#xff1f;如下图所示&#xff1a; 从图上我们…

foreach无法修改数组值解决方案

效果展示&#xff1a; 解决办法&#xff1a; this.sportList.forEach((item,index) >{let that this;if(item.idinfo.id) {that.sportList[index].sportTime e.detail.value} }) 这里小编解释下&#xff0c;将this赋值给that通常是为了在回调函数或者异步代码中保持对Vu…

C++11 设计模式4. 抽象工厂(Abstract Factory)模式

问题的提出 从前面我们已经使用了工厂方法模式 解决了一些问题。 现在 策划又提出了新的需求&#xff1a;对于各个怪物&#xff0c;在不同的场景下&#xff0c;怪物的面板数值会发生变化&#xff0c; //怪物分类&#xff1a;亡灵类&#xff0c;元素类&#xff0c;机械类 …

Unity让地图素材遮挡人物

点击编辑/项目设置/图形&#xff0c;透明度排序模式设置自定义轴&#xff0c;透明度排序轴Y设置为1其他为0。 此时人物和地图素材的图层排序相等&#xff0c;当人物的高度大于地图素材时&#xff0c;人物则被遮挡。

使用ArrayList.removeAll(List list)导致的机器重启

背景 先说一下背景&#xff0c;博主所在的业务组有一个核心系统&#xff0c;需要同步两个不同数据源给过来的数据到redis中&#xff0c;但是每次同步之前需要过滤掉一部分数据&#xff0c;只存储剩下的数据。每次同步的数据与需要过滤掉的数据量级大概在0-100w的数据不等。 由…

【C语言】字符串函数和内存函数及其模拟实现

文章目录 前言 一、常见字符串库函数1.strlen函数2.长度不受限制的字符串函数2.1 strcpy2.2 strcat2.3 strcmp 3.长度受限制的字符串函数3.1 strncpy3.2 strncat3.3 strncmp 二、字符串查找函数strstrstrtok 三、strerror函数四、内存操作函数1.memcpy2.memmove3.memcmp 五、字…

Unity之Unity面试题(三)

内容将会持续更新&#xff0c;有错误的地方欢迎指正&#xff0c;谢谢! Unity之Unity面试题&#xff08;三&#xff09; TechX 坚持将创新的科技带给世界&#xff01; 拥有更好的学习体验 —— 不断努力&#xff0c;不断进步&#xff0c;不断探索 TechX —— 心探索、心进取…