控制tooltip开启关闭以及超过字符省略号显示

最新推荐文章于 2024-01-29 16:22:37 发布

星梦冷寒

最新推荐文章于 2024-01-29 16:22:37 发布

阅读量982

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_48556641/article/details/123097848

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

vue:

<el-descriptions-item >
<template slot="label"> {{ $t("operating.correspondingreasons") }}</template>
<div class="descriptionsStyle">
<el-tooltip :disabled="isShowTooltip" class="item" effect="dark" :content="`${reasonForm.operationContents}`" placement="top-end">
<div @mouseover="operationContentsShow()">
<span >{{reasonForm.operationContents | operationContentsValue }}</span>
</div>
</el-tooltip>
</div>
</el-descriptions-item>

return:

isShowTooltip:false,

//超过字符省略号显示

filters:

operationContentsValue(operationContents){
if (!operationContents) return '';
if (operationContents.length > 250) {
return operationContents.slice(0, 250) + "...";
}
return operationContents;
},

methods:

operationContentsShow(){
var MaxLength = this.reasonForm.length
var lengths = 250
if(MaxLength>lengths){
this.isShowTooltip =true
}else{
this.isShowTooltip =false
}
},