当前位置: 首页> 游戏> 单机 > Vue iview-ui 被tooltip包裹的标题,点击跳转后,提示框不消失

Vue iview-ui 被tooltip包裹的标题,点击跳转后,提示框不消失

时间:2025/7/8 8:41:30来源:https://blog.csdn.net/qq_45094682/article/details/140212072 浏览次数:0次

tooltip包裹的标题,点击跳转后,提示框不消失iview  Tooltip

就会有这种显示问题

iview  Tooltip

下面这种错误方法不可行,解决办法往下翻

css写得没错,问题出在Javascript当中的 getElementsByClassName(“xxabc”),
这个方法得到的是一个由class="xxx"的所有元素组成的集合,而不是单个元素;
集合是没有display属性的,集合中的元素才有display属性。当你试图做 集合.style.display的时候,自然会报错。
所以你这个问题的解决方案应该是:遍历集合中所有的元素,然后给每个元素都加上display="none"的属性

iview  Tooltip
iview Tooltip

解决方法如下

view Tooltip

<p v-for="(value, key) in item.data" :key="key" class="itemTxt" @click="toClaimReceiptList(key)"><template v-if="key=='头程待合单数'"><Tooltip placement="right" transfer-class-name="xxabc"><span style="color: blueviolet;cursor: pointer;">*{{ key }}</span><span class="itemNum">({{ value }})</span><div slot="content"><div class="Errata"><p v-for="(item1, idx1) in platformCountObj" :key="idx1 + '_1'">{{ item1.platform }}:{{ item1.count }}</p></div></div></Tooltip></template><template v-else><span>{{ key }}</span><span class="itemNum">({{ value }})</span></template></p>

js

var divset = document.getElementsByClassName('xxabc')for (var i = 0; i < divset.length; i++) {divset[i].style.display = 'none'};

全部代码

toClaimReceiptList(key) { // 跳转var status = -1var name = ''switch (key) {case '头程待确认数':name = 'doc-management'status = '4'breakcase '头程待合单数':name = 'doc-management'status = '3'break}if (name == 'doc-management') {console.log('头程待合单数', name, document.getElementsByClassName('xxabc'))var divset = document.getElementsByClassName('xxabc')for (var i = 0; i < divset.length; i++) {divset[i].style.display = 'none'};}this.$router.push({name: name,params: { status: status }})}
关键字:Vue iview-ui 被tooltip包裹的标题,点击跳转后,提示框不消失

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: