文本溢出显示省略号并显示tooltip组件

1.封装公共组件

<template><div class="text-over-tooltip"><el-tooltip :effect="effect" :disabled="isShowTooltip" :content="content" :placement="placement"><div class="isEllipsis" :class="className" @mouseover="onMouseOver(refName)"><span :ref="refName">{{ content }}</span></div></el-tooltip></div>
</template><script>
export default {name: 'TextOverTooltip',props: {// 显示的文字内容content: String,// 设置父元素的样式：比如宽度字体等，需可以自己在组件内部配置样式比如字体大小20：fs20className: String,// 子元素标识（如在同一页面中调用多次组件，此参数不可重复）refName: String,// 默认提供的主题 dark/lighteffect: {type: String,default: () => {return 'light';}},// Tooltip 的出现位置top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endplacement: {type: String,default: () => {return 'top';}},},data() {return {isShowTooltip: true // 是否需要禁止提示};},methods: {// 移入事件: 判断内容的宽度contentWidth是否大于父级的宽度onMouseOver(str) {let parentWidth = this.$refs[str].parentNode.offsetWidth;let contentWidth = this.$refs[str].offsetWidth;// 判断是否禁用tooltip功能this.isShowTooltip = contentWidth <= parentWidth;}}
};
</script><style lang="scss" scoped>
.text-over-tooltip {/* 文字超出宽度显示省略号 单行*/.isEllipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}/* 自定义样式 */.fs14 {font-size: 14px;font-weight: 600;color: #606266;line-height: 22px;}
}
</style>

使用以上公共组件实例

引入公共组件，封装的公共组件一般放在components文件夹下面

import TextOverTooltip from ‘@/components/TextOverTooltip.vue’;components: { TextOverTooltip },

使用公共组件

<div><text-over-tooltip refName="testName" className="fs14" content="28、如果能够控制自己的悲欢离合，那未必是件好事；因为只有在雨后才会见到彩虹，如果冬天来了，春天还会远吗？如果黑暗来临，光明还会远吗？"></text-over-tooltip>
</div>

页面效果

文本溢出显示省略号并显示tooltip组件相关推荐

文本溢出时，如何显示为省略号
文本溢出时,如何显示为省略号本文作者:无双,GitHub链接:https://github.com/wushuangzhao/blog/issues/2 更多内容查看开发者社区/更多招聘信息本文介 ...
iView表格显示图片和文字过长显示省略号，并且Tooltip提示
iView表格显示图片和文字过长显示省略号,并且Tooltip提示效果图代码 {title: 'LOGO',key: 'logo',align: "center",render ...
phpcms 文本溢出（······省略号）组合处理 - 代码篇
phpcms 文本溢出(······省略号)组合处理 - 代码篇可以调用任意字段. 效果图: 代码:  <div class="hpanel acti ...
css实现超出文本溢出用省略号代替
一.单行实现单行文本的溢出显示省略号使用text-overflow:ellipsis属性,但需要配合使用另外两个属性使用才能达到效果. 如下: overflow:hidden; text-overf ...
解决文本溢出，省略号无效问题（兼容IE）
单行文本,显示省略号兼容ie.主要是white-space: nowrap;这个属性 overflow: hidden;text-overflow: ellipsis;display: -webkit ...
微信小程序单行文本溢出部分省略号显示无效
微信小程序富文本换行问题文本溢出使用省略号
>需求场景:由于有高亮的需求,所以选择用富文本的标签<rich-text>,同时还有个需求是希望展示两行,然后溢出的情况用省略号. >解决思路:在nodes节点里面包一层div ...
Jupyter中显示数据data时只显示省略号不显示完整数据
在开头导入pandas后加入以下: 设置行不限制数量 pd.set_option('display.max_rows',None) 设置列不限制数量 pd.set_option('display.ma ...
文本溢出变成省略号可多行
给需要隐藏文本的元素添加一下代码 display: -webkit-box;overflow: hidden;white-space: normal !important;text-overflow: ...
CSS-文字溢出的省略号显示
单行文本溢出的省略号--必须满足3个条件先强制一行内显示文本 white-space: nowrap;/*默认是normal自动换行*/ 超出的部分隐藏 overflow: hidden; 文字用省 ...

文本溢出显示省略号并显示tooltip组件

1.封装公共组件

使用以上公共组件实例

页面效果

文本溢出显示省略号并显示tooltip组件相关推荐

最新文章

热门文章