输入框内容和占位符过长悬浮提示

news2024/10/6 18:25:15

1. 输入框内容过长,内容悬浮提示

在这里插入图片描述

            <el-tooltip :disabled="isShowTooltip" effect="dark" :content="formData.toChineseCode" placement="top">
              <el-input
                v-model="formData.toChineseCode"
                @mouseover.native="handleMouseOver($event)"
               />
            </el-tooltip>
const isShowTooltip = ref(false);
const formData = ref({
	toChineseCode:''
})
const handleMouseOver = (e) => {
// 比较元素的宽度和滚动宽度
  if (e.target.offsetWidth < e.target.scrollWidth) {
    isShowTooltip.value = false;
  } else {
    isShowTooltip.value = true;
  }
};

2. 输入框占位符过长,以省略号代替,并悬浮提示

在这里插入图片描述
输入框中没有输入值时,会悬浮提示出占位符的内容,有输入值时则不显示,可以按各自的需求来。

          <el-tooltip :disabled="!(formData.dataUnit==='')" effect="dark" :content="placeholderUnit" placement="top">
            <el-input
              v-model.trim="formData.dataUnit"
              :placeholder="placeholderUnit"
              clearable />
            </el-tooltip>
          </el-form-item>
const formData = ref({
	dataUnit:''
})

const placeholderUnit = ref('请输入单位,后面是字测试文字测试文字测试文字"')

设置超出文字以省略号显示,因为用的是element-plus, 所以是在这个输入框的类名上设置

:deep(.el-input__inner) {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

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

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

相关文章

【开源项目】超经典开源项目实景三维数字孪生海洋牧场、海上平台

飞渡科技数字孪生海上运营平台&#xff0c;基于数字孪生、物联网IOT、远程控制与遥感等技术&#xff0c;结合前端智能感知设备数据和专业模型算法&#xff0c;对海洋养殖环境、船只、网箱、监测设备等各要素态势进行综合监测分析&#xff0c;对各类异常事件进行可视化预警、告警…

微信开放平台第三方授权(第一篇)

1.项目需要的功能 需求不可以用微信原有的开发接管方式&#xff0c;之后发现可以进行第三方授权。先登录微信开放平台&#xff0c;找到第三方平台。 微信开放平台 配置第三方平台 基本概念介绍 | 微信开放文档 进入到管理配置 以上连接配置参考 接收授权事件&#xff1a;h…

深度解析Java8社招面试题:Lambda序列化到底行不行?

大家好&#xff0c;我是小米&#xff0c;一个热爱技术分享的小伙伴。今天&#xff0c;我们来聊一个关于Java8的话题&#xff0c;一个颇具技术深度的问题&#xff1a;“社招面试题&#xff1a;Java8中的Lambda表达式可以序列化吗&#xff1f;”废话不多说&#xff0c;让我们一起…

stm32中的SPI

SPI的简介 文章目录 SPI的简介物理层协议层基本通讯过程起始和终止信号数据有效性CPOL/CPHA及通讯模式 STM3的SPI特性及架构通讯引脚时钟控制逻辑数据控制逻辑整体控制逻辑通讯过程 代码配置实现指令集结构体的定义SPI时钟信号的定义SPI端口定义SPI命令 flash驱动代码初始化代码…

【Python】paddleocr快速使用及参数详解

文章目录 1. paddleocr快速使用1.1 使用默认模型路径1.2 设定模型路径 2. PaddleOCR其他参数介绍PaddleOCR模型推理参数解释 其它相关推荐&#xff1a; PaddleOCR模型训练及使用详细教程 官方网址&#xff1a;https://github.com/PaddlePaddle/PaddleOCR PaddleOCR是基于Paddle…

【软考问题】-- 3 - 知识精讲 - 项目整合管理

一、基本问题 1&#xff1a;项目章程的内容包括什么&#xff1f;&#xff08;助记&#xff1a;疯木鱼-要进庙里-发神经&#xff09; 疯&#xff1a;项目整体风险木&#xff1a;项目目标鱼&#xff1a;整体预算要&#xff1a;概要设计进&#xff1a;总体里程碑进度庙&#xff1a…

深度学习(4)--Keras安装

目录 Keras安装: 1.1.安装CUDA/cuDDN工具包 1.1.1.安装前准备 1.1.2.安装CUDA 1.1.3.安装cuDDN 1.2.安装Anaconda 1.3.安装tensorflow框架 1.3.1.使用cmd安装 1.3.2.使用Anaconda Prompt安装 1.4.安装Keras框架 1.5.打开jupyter notebook&#xff0c;执行import调用…

Linux/Academy

Enumeration nmap 首先扫描目标端口对外开放情况 nmap -p- 10.10.10.215 -T4 发现对外开放了22,80,33060三个端口&#xff0c;端口详细信息如下 结果显示80端口运行着http&#xff0c;且给出了域名academy.htb&#xff0c;现将ip与域名写到/et/hosts中&#xff0c;然后从ht…

Redis数据结构与底层实现揭秘

在高并发的系统开发中&#xff0c;缓存和高效的数据存储机制对于提升应用性能至关重要。Redis&#xff0c;作为其中的佼佼者&#xff0c;以其卓越的性能和丰富的数据结构赢得了开发者的青睐。本文将深入探讨Redis的数据结构及其底层实现&#xff0c;带领读者走进这个高性能数据…

【云原生】Docker的镜像创建

目录 1&#xff0e;基于现有镜像创建 &#xff08;1&#xff09;首先启动一个镜像&#xff0c;在容器里做修改 ​编辑&#xff08;2&#xff09;然后将修改后的容器提交为新的镜像&#xff0c;需要使用该容器的 ID 号创建新镜像 实验 2&#xff0e;基于本地模板创建 3&am…

【网站项目】基于SSM的249作业提交与查收系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

【Python爬虫入门到精通】小白也能看懂的知识要点与学习路线

文章目录 1. 写在前面2. 爬虫行业情况3. 学习路线 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【作者推荐】&#xff1a;对JS逆向感兴趣的朋友可以关…

计数指针:shared_ptr (共享指针)与函数 笔记

推荐B站视频&#xff1a; 4.shared_ptr计数指针_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL?p4&vd_sourcea934d7fc6f47698a29dac90a922ba5a3 5.shared_ptr与函数_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL?p5&vd_sourcea…

AI引爆算力需求,思腾推出支持大规模深度学习训练的高性能AI服务器

近日人工智能研究公司OpenAI公布了其大型语言模型的最新版本——GPT-4&#xff0c;可10秒钟做出一个网站&#xff0c;60秒做出一个游戏&#xff0c;参加了多种基准考试测试&#xff0c;它的得分高于88%的应试者&#xff1b;随后百度CEO李彦宏宣布正式推出大语言模型“文心一言”…

扫雷游戏——数组和函数实现

扫雷游戏的功能说明 使⽤控制台实现经典的扫雷游戏 游戏可以通过菜单实现继续玩或者退出游戏扫雷的棋盘是9*9的格⼦ 默认随机布置10个雷可以排查雷如果位置不是雷&#xff0c;就显⽰周围有⼏个雷如果位置是雷&#xff0c;就炸死游戏结束把除10个雷之外的所有⾮雷都找出来&…

域名缩短平台搭建

前言 当自己搭建的项目和网站相关文章的链接过长&#xff0c;可以参考一下本文搭建的平台 遵纪守法&#xff0c;不要乱缩网址。 代码&#xff1a; https://github.com/dyanst/shorturlhttps://github.com/dyanst/shorturl shorturl-main.zip官方版下载丨最新版下载丨绿色版…

Linux(linux版本 centos 7) 下安装 oracle 19c详细教程(新手小白易上手)

一、安装前准备 1、下载预安装包 wget http://yum.oracle.com/repo/OracleLinux/OL7/latest/x86_64/getPackage/oracle-database-preinstall-19c-1.0-1.el7.x86_64.rpm预安装包下载成功 2、下载oracle安装包 下载地址如下 https://www.oracle.com/cn/database/technologies…

Maven命令运行单元测试

使用idea开发多模块项目时,有时别的模块编译不通过会导致不能运行单元测试,这是我们可以使用maven命令来运行单元测试 格式 mvn -DtestDingTalkTest#getAllUsers 命令说明 mvn -Dtest 固定格式 DingTalkTest 单元测试类名 getAllUsers 单元测试方法 单元测试类和单元测试方法…

【LUA】mac状态栏添加天气

基于网络上的版本修改的&#xff0c;找不到出处了。第一个摸索的lua脚本&#xff0c;调了很久。 主要修改&#xff1a;如果风速不大&#xff0c;就默认不显示&#xff0c;以及调整为了一些格式 local urlApi http://.. --这个urlApi去申请个免费的就可以了 然后打开对应的json…

云轴科技ZStack成为交通运输业上云用云推进中心首批成员单位

近日&#xff0c;中国信息通信研究院、中国交通运输协会信息专业委员会联合发起成立“交通运输业上云用云推进中心”&#xff0c;上海云轴信息科技有限公司&#xff08;简称云轴科技ZStack&#xff09;凭借优秀的产品技术创新能力和在交通运输领域的实践经验成为首批成员单位并…