element-ui —— el-tooltip 超出部分显示省略号，鼠标悬浮显示详情

前言：el-tooltip 组件本身就是悬浮提示功能，在对它进行二次封装时，要对它进行优化，实现超出的文本加提示，没超出的不给予提示。

思路：加一个中间层，子集为数据全量，控制中间层的样式，并设置宽度，通过 ref 进行宽度对比，若子集比中间层更宽，既说明显示了...样式

<template><div class="text-tooltip"><el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top"><p class="over-flow" :class="className" @mouseover="onMouseOver(refName)"><span :ref="refName">{{content||'-'}}</span></p></el-tooltip></div>
</template><script>export default {name: 'textTooltip',props: {// 显示的文字内容content: {type: String,default: () => {return ''}},// 外层框的样式，在传入的这个类名中设置文字显示的宽度className: {type: String,default: () => {return ''}},// 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）refName: {type: String,default: () => {return ''}}},data() {return {isShowTooltip: true}},methods: {onMouseOver(str) {let parentWidth = this.$refs[str].parentNode.offsetWidth;let contentWidth = this.$refs[str].offsetWidth;// 判断是否开启tooltip功能if (contentWidth>parentWidth) {this.isShowTooltip = false;} else {this.isShowTooltip = true;}}}}
</script><style lang="scss" scoped>
.over-flow {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.wid190 {width: 100%;
}
p{margin: 0;
}
</style>

在需要用到组件的页面中引入

import tooltipOver from './components/tooltipOver'

使用组件

<tooltip-over:content="tipText"class="wid190"refName="tooltipOver"
></tooltip-over>

tip：当同一页面使用多次组件时，需要定义不同的refName属性

element-ui —— el-tooltip 超出部分显示省略号，鼠标悬浮显示详情相关推荐

Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面
Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面官网示例可以看出文字描述在开关两边,看着很别扭. 上代码 <el-switchv-model=" ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
antv g2字体阴影_antv g2坐标轴文字过长时添加省略号，悬浮显示全部
antv g2坐标轴文字过长时添加省略号,悬浮显示全部示例改编自antv基础条形图 https://g2.antv.vision/zh/examples/bar/basic#basic import ...
鼠标悬浮显示禁止图标
鼠标悬浮显示禁止图标: /* 悬浮禁止 */ #customerName {cursor: no-drop; } 效果:红圈里面一条斜杠//没法截屏
鼠标悬浮显示图片和文字
1.引入jquery-1.11.0.min.js.配置文件config.js.业务js screen.js: 页面代码: <!DOCTYPE html> <html><h ...
鼠标悬浮显示文字，右击图片复制该文字
右击图片复制id 右击图片复制id 鼠标悬浮显示文字图片方法效果右击图片复制id 鼠标悬浮显示文字图片的alt属性可以产生鼠标悬浮,显示文字的功能.如果实现不了,可以加上title. 图片 ...
鼠标悬浮显示文字半透明背景
鼠标悬浮显示文字半透明背景鼠标悬浮头像,出现文字"上传头像",之前都是使用< a title="上传头像"></a>这样的title来 ...
“会议室使用情况”实现周日历和日程，可新建日程，鼠标悬浮显示当日日程
直接上图: 使用的数据可通过请求后台拿到,数据格式有点复杂,取得中间的事件需要先获取横向会议室id,再获取纵向日期,两个维度对应上即可渲染,具体格式参考代码中的occupyInfo对象. ...
Element UI table超出文本部分显示省略号，鼠标悬浮显示全部内容
1.先看下效果图: 当鼠标放置在第二行地址上时,会显示地址信息的全部内容. 2.本网页是vue项目,依赖啥的就不说了,直接上table.vue详尽代码 <template><div& ...

element-ui —— el-tooltip 超出部分显示省略号，鼠标悬浮显示详情

element-ui —— el-tooltip 超出部分显示省略号，鼠标悬浮显示详情相关推荐

最新文章

热门文章