Showing
3 changed files
with
38 additions
and
2 deletions
@@ -210,6 +210,15 @@ a { | @@ -210,6 +210,15 @@ a { | ||
210 | text-overflow: ellipsis; | 210 | text-overflow: ellipsis; |
211 | white-space: nowrap; | 211 | white-space: nowrap; |
212 | } | 212 | } |
213 | + | ||
214 | +.text-overflow-line2{ | ||
215 | + word-break: break-all; | ||
216 | + overflow: hidden; | ||
217 | + text-overflow: ellipsis; | ||
218 | + display: -webkit-box; | ||
219 | + -webkit-box-orient: vertical; | ||
220 | + -webkit-line-clamp: 2; | ||
221 | +} | ||
213 | /*下划线*/ | 222 | /*下划线*/ |
214 | .text-link{ | 223 | .text-link{ |
215 | text-decoration: underline; | 224 | text-decoration: underline; |
@@ -71,7 +71,19 @@ | @@ -71,7 +71,19 @@ | ||
71 | style="width: 100px;height: 100px;border-radius: 100px;margin: 0px auto 10px;margin-top: 10px;color: white;line-height: 100px;text-align: center;"> | 71 | style="width: 100px;height: 100px;border-radius: 100px;margin: 0px auto 10px;margin-top: 10px;color: white;line-height: 100px;text-align: center;"> |
72 | <span>{{item.shortName}}</span> | 72 | <span>{{item.shortName}}</span> |
73 | </div> | 73 | </div> |
74 | - <p style="text-align: center;word-break: break-all;padding: 0px 25px;">{{item.taskName}}</p> | 74 | + <div class="text-overflow-line2 align-center" style="padding: 0px 25px;"> |
75 | + <!--<el-tooltip | ||
76 | + effect="light" | ||
77 | + placement="top-start"> | ||
78 | + <template #content> | ||
79 | + {{item.taskName}} | ||
80 | + </template> | ||
81 | + {{item.taskName}} | ||
82 | + </el-tooltip>--> | ||
83 | + <el-tooltip :content="item.taskName" placement="bottom" effect="light" :disabled="item.isShowTooltip && item.isShowTooltip == true"> | ||
84 | + <span class="member-label member-span text-hidden" @mouseenter="visibilityChange($event,item)"> {{item.taskName}}</span> | ||
85 | + </el-tooltip> | ||
86 | + </div> | ||
75 | </div> | 87 | </div> |
76 | </div> | 88 | </div> |
77 | </div> | 89 | </div> |
@@ -107,6 +107,20 @@ export default { | @@ -107,6 +107,20 @@ export default { | ||
107 | service.sendEventNormalDialog(emit, proxy.$global, props.faultNo, props.targetType.toLocaleLowerCase(), '',type); | 107 | service.sendEventNormalDialog(emit, proxy.$global, props.faultNo, props.targetType.toLocaleLowerCase(), '',type); |
108 | } | 108 | } |
109 | 109 | ||
110 | + const visibilityChange = (e,item) => { | ||
111 | + const ev = e.target; | ||
112 | + const ev_weight = ev.scrollWidth; | ||
113 | + const content_weight = ev.target.offsetWidth; | ||
114 | + | ||
115 | + if (ev_weight > content_weight) { | ||
116 | + // 实际宽度 > 可视宽度 文字溢出 | ||
117 | + item.isShowTooltip = true; | ||
118 | + } else { | ||
119 | + // 否则为不溢出 | ||
120 | + item.isShowTooltip = false; | ||
121 | + } | ||
122 | + } | ||
123 | + | ||
110 | // 挂载完 | 124 | // 挂载完 |
111 | Vue.onMounted(() => { | 125 | Vue.onMounted(() => { |
112 | getDialtestList(); | 126 | getDialtestList(); |
@@ -124,7 +138,8 @@ export default { | @@ -124,7 +138,8 @@ export default { | ||
124 | openBusScenarios, | 138 | openBusScenarios, |
125 | openKpiList, | 139 | openKpiList, |
126 | getFaultItemValue: service.getFaultItemValue, | 140 | getFaultItemValue: service.getFaultItemValue, |
127 | - openDiagnosticItem | 141 | + openDiagnosticItem, |
142 | + visibilityChange | ||
128 | } | 143 | } |
129 | } | 144 | } |
130 | } | 145 | } |
-
Please register or login to post a comment