<el-input> textarea文本域显示滚动条(超过高度就自动显示)

news2024/11/19 9:28:53

需求:首先是给定高度,输入文本框要自适应这个高度。文本超出高度就会显示滚动条否则不显示。

<el-row class="textarea-row">
        <el-col :span="3" class="first-row-title">天气</el-col>
        <el-col :span="21" class="multi-rmk-col ">
          <el-form-item prop="weather">
            <el-input
              type="textarea"
              v-model="form.weather"
              style="height: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
.multi-rmk-col >>> .el-form-item__content,
.multi-rmk-col >>> .el-textarea__inner{
  height: 100% !important;
}
::-webkit-scrollbar {
  width: 6px; /*滚动条宽度*/
  height: 6px; /*滚动条高度*/
}
.multi-rmk-col >>>.el-textarea__inner::-webkit-scrollbar-thumb {
  background-color: rgba(168, 168, 168,.4);/*滚动条默认显示的颜色*/
}
 
.multi-rmk-col >>>.el-textarea__inner::-webkit-scrollbar {   
   width: 8px;   
   height: 8px;
   background-color: #4a4a4a;/*滚动条背景色显示的颜色*/
 }

参考文章

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

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

相关文章

多目标优化两种算法:加权、智能优化算法

传统数学优化算法&#xff08;加权&#xff09; 使用数学优化算法解决多目标优化问题通常是将各个子目标聚合成一个带权重的单目标函数&#xff0c;系数由决策者决定&#xff0c;或者由优化方法自适应调整。即通过加权等方式将多目标问题转化为单目标问题进行求解。 这样每次只…

编程每日一练(多语言实现)基础篇:控制台打印九九乘法口诀表

文章目录 一、实例描述二、技术要点三、代码实现3.1 C 语言实现3.2 Python 语言实现3.3 Java 语言实现3.4 JavaScript 语言实现3.5 Go 语言实现 一、实例描述 本实例要求打印出乘法口诀表&#xff0c;在乘法口诀有行和列项的相乘得出的乘法结果。根据这个特点&#xff0c;使用…

Configuration of phpstudy and sqli-labs

Go download the app&#xff1a; 小皮面板(phpstudy) - 让天下没有难配的服务器环境&#xff01; (xp.cn) Have done. Then enter the program. Enable both functions&#xff1a; Apache and MySQL. Open the website&#xff1a; Next, Lets make the sqli-liab. GitHub…

Web server failed to start. Port 8080 was already in use

一、问题 package com.djc.boot;import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annota…

几个G视频能压缩成几百MB吗?跟我学视频压缩

视频大小是可以压缩的&#xff0c;现在很多情况下&#xff0c;视频文件的大小都会限制我们的行动&#xff0c;例如需要将大量视频文件随身携带&#xff0c;或者在有限的网络带宽下传输视频文件。为了解决这些问题&#xff0c;下面给大家分享几个视频压缩的技巧&#xff0c;轻松…

6-8 求链表的倒数第m个元素 分数 15

ElementType Find(List L, int m) {int count 0;for (struct Node* cur L; cur ! NULL; cur cur->Next){count;}if (m > count) {return ERROR;}int n count - m 1;struct Node* cur L;while(--n)cur cur->Next;return cur->Data; }

鹿客携手小度、天翼数字生活等生态伙伴,开启全联接Opening计划

物联网、AI等新一代信息技术的飞速发展&#xff0c;各类家居家电智能水平与日俱增。作为智能家居入口级产品&#xff0c;智能门锁行业技术也在不断内卷&#xff0c;从密码解锁&#xff0c;到指纹识别、人脸识别、生物识别&#xff0c;不断升级。寻求更安全、更便捷、更智能的新…

Android之App跳转其他软件

文章目录 前言一、效果图二、实现步骤1.弹框xml(自己替换图标)2.弹框utils3.两个弹框动画4.封装方便调用5.调用6.长按事件方法7.跳转步骤8.复制utils 总结 前言 最近遇到一个需求&#xff0c;就是App内大面积需要长按复制并跳转指定App&#xff0c;没办法&#xff0c;只能埋头…

微信CRM系统:微商不可或缺的客户管理利器!

在这个竞争激烈的时代&#xff0c;微信客户已成为微商生存和发展的关键。如何更好地了解客户需求&#xff0c;提高客户满意度和忠诚度&#xff0c;已成为微商们亟待解决的问题。而解决这些问题&#xff0c;关键在于个微是否有一套完善的客户关系管理&#xff08;CRM&#xff09…

9.变换之平移

愿你出走半生,归来仍是少年 通过顶点着色器实现图形的整体平移。 1.知识点 1.1.齐次坐标 在GLSL 中Vec4进行坐标表达时&#xff0c;作为齐次坐标(x,y,z,w).当w1时&#xff0c;这个vec4可以表达一个点的三维坐标。在进行平移时&#xff0c;应保证偏移量的W为0。 1.2矢量相加运…

【Vue面试题三】、Vue中的v-show 和 v-if 怎么理解 ?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;v-show和v-if有什么区别…

Linux防火墙之--SNAT和DNAT

1.SNAT是什么 SNAT又称源地址转换。源地址转换是内网地址向外访问时&#xff0c;发起访问的内网ip地址转换为指定的ip地址&#xff08;可指定具体的服务以及相应的端口或端口范围&#xff09;&#xff0c;这可以使内网中使用保留ip地址的主机访问外部网络&#xff0c;即内网的多…

VR模拟鸡胚培养接种实验,打造沉浸式的学习环境

在医学教育领域&#xff0c;传统的鸡胚接种实验一直是教学的重要组成部分。然而&#xff0c;这种实验方法存在一定的局限性&#xff0c;如操作难度大、成本高、安全隐患等。为了解决这些问题&#xff0c;越来越多的教育机构开始尝试引入虚拟现实(VR)技术&#xff0c;以模拟鸡胚…

Safran与是德科技合作推出基于GNSS技术的5G LBS方案

概述 虹科Safran与是德科技&#xff08;Keysight&#xff09;联手推进基于全球导航卫星系统&#xff08;GNSS&#xff09;技术的5G定位服务&#xff08;LBS&#xff09;&#xff0c;利用虹科Safran先进的全球导航卫星系统&#xff08;GNSS&#xff09;仿真功能扩展是德科技的5G…

成为黄金代理,必须考虑到这一点

目前很多投资者都会选择黄金代理进行现货黄金投资账户的开立。一方面是市场中各种各样的现货黄金代理&#xff0c;越来越专业&#xff0c;提供的交易服务越来越好&#xff0c;另一方面是黄金代理和黄金平台进行合作&#xff0c;如果平台选得好&#xff0c;投资者在平台开户还是…

深入探究 C++ 编程中的资源泄漏问题

目录 1、GDI对象泄漏 1.1、何为GDI资源泄漏&#xff1f; 1.2、使用GDIView工具排查GDI对象泄漏 1.3、有时可能需要结合其他方法去排查 1.4、如何保证没有GDI对象泄漏&#xff1f; 2、进程句柄泄漏 2.1、何为进程句柄泄漏&#xff1f; 2.2、创建线程时的线程句柄泄漏 …

Android Studio 是如何和我们的手机共享剪贴板的

背景 近期完成了target33的项目适配升级,随着AGP和gradle的版本升级,万年老版本Android Studio(后文简称AS)也顺便升级到了最新版Android Studio Giraffe | 2022.3.1,除了新UI外,最让我好奇的是这次的Running Devices功能(官方也称为Device mirroring)可以控制真机了. 按照操…

静态住宅代理的优缺点以及使用方法

住宅代理ip分为静态住宅代理和动态住宅代理&#xff0c;住宅代理就是代理ip是真人网络中出发&#xff0c;以代理地址来对目标网站进行访问&#xff0c;具有高匿名度和安全性&#xff0c;在跨境业务中经常使用。而静态住宅代理的特征就是ip地址长时间固定不变&#xff0c;具有唯…

DevEco Studio下载/安装与配置开发环境

一、下载与安装DevEco Studio 在HarmonyOS应用开发学习之前&#xff0c;需要进行一些准备工作&#xff0c;首先需要完成开发工具DevEco Studio的下载与安装以及环境配置。 1.进入DevEco Studio下载官网 单击“立即下载”进入下载页面。 DevEco Studio提供了Windows版本和Mac…

html2Canvas截图中特殊字体出不来原因

项目中有正常字体和特殊字体,但是导出成图片时特殊字体无法正常显示 下图为导出的截图: 原因: 特殊字体的名称定义 因为之前特殊字体的font-family,是以数字开头,放在html中被转义了,所以一直出不来,前面改成英文后可以正常显示