Vue文本内容单行或多行超出显示省略号判断,超出显示tooltip提示
Vue文本内容单行或多行超出显示省略号判断,超出显示tooltip提示
·
开发中经常遇到需要超出文本省略的需求,通常情况下只需要设置css的样式即可实现:
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
但是往往产品都是喜欢玩花活的,这天小明提出要实现超出换行并hover时通过tip提示的需求。一想这tm有啥难的。三方组件很多啊,比如element的Tooltip,于是开心的加上了组件实现
<el-tooltip class="item" :disabled="!showTip" effect="dark" :content="businessData.designerName +'-'+businessData.designerTel" placement="top-start">
<div class="designer-inner" v-if="showDesignerInfo">
<div ref="isOverflow" class="designer-inner-info designer-inner-info_width" type="textarea">{{ '卡社保卡吧撒空间才能卡啊随-1212123131'}}</div>
<!-- <div ref="isOverflow" class="designer-inner-info designer-inner-info_width">{{ businessData.designerName +'-'+businessData.designerTel}}</div> -->
</div>
</el-tooltip>
过一会小明又来了,你这能不能实现不超出时不加tip提示,超出时再加提示啊?我tm一个大逼斗就上去了。但是打归打,需求还是要尽力去实现的。
具体实现方案:
可以通过clientWidth与scrollWidth的比较来判断文本内容是否超出元素
html部分:通过ref获取dom
<el-tooltip class="item" :disabled="!showTip" effect="dark" :content="businessData.designerName +'-'+businessData.designerTel" placement="top-start">
<div class="designer-inner" v-if="showDesignerInfo">
<div ref="isOverflow" class="designer-inner-info designer-inner-info_width" type="textarea">{{ '卡社保卡吧撒空间才能卡啊随-1212123131'}}</div>
<!-- <div ref="isOverflow" class="designer-inner-info designer-inner-info_width">{{ businessData.designerName +'-'+businessData.designerTel}}</div> -->
</div>
</el-tooltip>
js部分:在合适的时机进行比较
mounted() {
this.showTip = this.$refs.isOverflow.clientWidth<this.$refs.isOverflow.scrollWidth;
}
},
css部分
.designer-inner-info_width{
width: 158px;
height: 32px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
``
# 多行省略判断其实和单行省略判断基本一致
> 样式上修改
```javascript
width: 200px;
text-overflow: ellipsis;
overflow: hidden;
// white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
只需要判断高度比较即可
this.$refs.pisOverflow.clientHeight,this.$refs.pisOverflow.scrollHeight
更多推荐
已为社区贡献3条内容
所有评论(0)