tooltip包裹的標題,點擊跳轉后,提示框不消失
就會有這種顯示問題
下面這種錯誤方法不可行,解決辦法往下翻
css寫得沒錯,問題出在Javascript當中的 getElementsByClassName(“xxabc”),
這個方法得到的是一個由class="xxx"的所有元素組成的集合,而不是單個元素;
集合是沒有display屬性的,集合中的元素才有display屬性
。當你試圖做 集合.style.display的時候,自然會報錯。
所以你這個問題的解決方案應該是:遍歷集合中所有的元素,然后給每個元素都加上display="none"的屬性
解決方法如下
<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 }})}