vue 给div增加title属性

ops/2024/12/13 11:39:23/

省略号+ 移入显示文字

在很多时候,我们页面上其实有时候展示不出来很多很多文字的,这个时候我们就不得不对这个文字进行处理,但是我们鼠标放到文字上时,还想展示所有的文字,这种方式其实有2种

一Tooltip 文字提示

第一种是运用element ui的一个组件Tooltip 文字提示,常常用于鼠标hover时的提示信息

javascript"><el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top"><el-button>上边</el-button>
</el-tooltip>

 鼠标放到上边这个按钮上会提示“Top Left 提示文字”这个几个字。如果想要让content根据内容变化的话,可以这么做

javascript"><el-tooltip class="item" effect="dark" :content="TipsContent" placement="top"><el-button>{{TipsContent}}</el-button>
</el-tooltip>data(){return{TipsContent:'我是个内容'}
}

这样子的话,鼠标放在按钮上就会提示"我是个内容"啦,之后根据接口和实际用处修改TipsContent里面的内容就可以啦。

补充:placement是tooltip显示的位置,他总共有9种位置,分别是top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end,根据自己需要设置就好啦

说明:并不是只能在button上面加tooltip,div等标签也可以加tooltip,将el-button的那行代码换成自己显示的就可以啦

效果:

二给div增加title属性

第二种是给div增加title属性,这种方法的话个人感觉会更容易让人接收

javascript"><div title="我就是一个内容内容内容内容"><span>我是一个内容</span>
</div>

这样子的话页面上只会显示“我是一个内容”,但是鼠标放上去会显示“我就是一个内容内容内容”

想让title动态变化的话也非常简单

javascript"><div :title="titleTips"><span>我是一个内容</span>
</div>data(){return{titleTips:'我就是一个内容内容内容内容'}
}

javascript">     <divclass="mr10 categroy-name"style="padding-top: 7px":title="speci.specName">{{ speci.specName }}</div>  .categroy-name {width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

 


http://www.ppmy.cn/ops/141525.html

相关文章

共享无人系统,便捷生活触手可得

共享无人系统适用各种无人场景:共享麻将室、共享茶室、共享健身房、共享自习室、共享桌球室&#xff0c;实现线上预约&#xff0c;一键预约&#xff0c;自由组合时间&#xff0c;智能通断电&#xff0c;智能语音提醒。 优惠券是常用的营销工具&#xff0c;后台创建之后发放给会…

组件缓存keep-alive

希望点击面经详情回来之后该1面经详情停留在滚动条停止的位置 有些 组件是不需要缓存的&#xff0c;例如详情页不需要缓存。解决方法是keep-alive的三个属性 include:组件名数组&#xff0c;只有匹配的组件会被缓存exclude:组件名数组&#xff0c;任何匹配的组件都不会被缓存ma…

【Linux】网络服务

声明&#xff0c;以下内容均学习自《Linux就该这么学》一书 1、创建网络会话 Linux系统使用NetworkManager提供网络服务&#xff0c;它是一种动态管理网络配置的守护进程&#xff0c;能够让网络设备保持连接状态。 nmcli nmcli是一款基于命令行的网络配置工具&#xff0c;它…

线上维修记录查询,让车辆保养更省心!

车辆保养对于每一位车主来说都是一个必不可少的环节&#xff0c;它不仅可以延长车辆的使用寿命&#xff0c;还能提高行车安全性。然而&#xff0c;相信很多人都有这样的经历&#xff1a;不知道自己的车辆什么时候进行过维修&#xff0c;也不清楚维修的内容和费用。这样一来&…

每日计划-1212

1. 完成 SQL1 查询所有列 2. 八股部分 1) C 中多态性在实际项目中的应用场景有哪些&#xff1f; &#xff08;1&#xff09;图形绘制系统 场景描述&#xff1a;在一个图形绘制软件中&#xff0c;可能有多种图形&#xff0c;如圆形、矩形、三角形等。每种图形都需要有自己的…

【Windsurf】Windsurf:重塑编程未来的AI集成开发环境(IDE)深度解析

目录 一、下载与使用 二、Windsurf核心技术及实现原理 三、Windsurf功能特性详解 四、Windsurf使用技巧 五、Windsurf实际应用场景 六、Windsurf与Cursor的对比分析 七、总结与展望 参考资料 在当今这个技术日新月异的时代&#xff0c;人工智能&#xff08;AI&#xff…

SList(单链表)

文章目录 一&#xff1a;线性表二&#xff1a;数组2.1数组在内存中的存储 三&#xff1a;链式结构四&#xff1a;单链表4.1概念与结构4.1.1概念4.1.2 结构&#xff08;节点&#xff09;4.1.3链表的性质4.1.4链表的打印 4.2实现单链表 结语 欢迎大家来到我的博客&#xff0c;给生…

一个用于 SMB/CIFS 网络的 Java 库-JCIFS

1.引言 在网络通信中&#xff0c;服务器消息块&#xff08;SMB&#xff09;协议在计算机之间实现文件共享和通信方面发挥着重要作用。对于 Java 开发者来说&#xff0c;由于缺乏对该协议的内置支持&#xff0c;使用 SMB 可能会面临挑战。这时&#xff0c;JCIFS&#xff08;Jav…