当前位置: 首页 > news >正文

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.lryc.cn/news/338231.html

相关文章:

  • Rust腐蚀服务器常用参数设定详解
  • 无人机巡检技术革命性变革光伏电站运维管理
  • 【学习】软件信创测试中,如何做好兼容性适配
  • 阿里云ACK k8s集群迁移
  • 1.3 字符设备驱动
  • 计算机毕业设计springboot小区物业报修管理系统m8x57
  • 深度学习体系结构——CNN, RNN, GAN, Transformers, Encoder-Decoder Architectures算法原理与应用
  • js 数字的常用方法梳理
  • STM32H743VIT6使用STM32CubeMX通过I2S驱动WM8978(5)
  • Objective-C学习笔记(block,协议)4.10
  • AD7982BRMZRL7 二进制 500kSPS 模数转换芯片 ADI
  • 采集某新闻网资讯网站保存PDF
  • 03攻防世界-unserialize3
  • 蓝桥杯备考随手记: 常见的二维数组问题
  • Java | Leetcode Java题解之第28题找出字符串中第一个匹配项的下标
  • 【数据结构与算法】:二叉树经典OJ
  • uniapp——长按识别二维码
  • 云服务器环境web环境搭建之JDK、redis、mysql
  • 第1章 计算机网络体系结构
  • Docker之自定义镜像上传至阿里云
  • 《深入Linux内核架构》第2章 进程管理和调度 (2)
  • (四)PostgreSQL的psql命令
  • 前端使用minio传输文件
  • [大模型] BlueLM-7B-Chat WebDemo 部署
  • 一文了解ERC404协议
  • iOS cocoapods pod FrozenError and RuntimeError
  • 【鸿蒙开发】第二十章 Camera相机服务
  • JS阅读笔记
  • 基于spring boot的留守儿童爱心管理系统
  • python输入某年某月某日判断这一天是这一年的第几天