经常会使用到搜索功能,查看历史数据,但是搜索历史按钮的长度并不固定。因此:
toggleHistoryData() {
let idx = 0 // 第三行第一个数据的下标
let count = 0 // 行数
let iIndex0 = 0
this.$nextTick(() => {
if (!document.querySelector('.historyItemBox')) return
const ulChid = document.querySelector('.historyItemBox').childNodes // 获取父容器所有子节点
// console.log('ulChid', ulChid)
this.hasMoreBtn = false
ulChid.forEach((i, index) => {
if (index === 0) {
// 将第一项靠最左边的元素的偏移值赋值
iIndex0 = i.offsetLeft
}
if (i.offsetLeft === iIndex0) {
count++
if (count === 3) { // 存在第三个靠最左边的元素,即有第三行
idx = index - 1 // 获取第二行最后一个数据的下标
this.hasMoreBtn = true // 展示更多按钮的标识
}
}
})
// 超过2行截断数据
if (idx > 0) {
// 展示数据
this.history = [...new Set(this.history)].slice(0, idx)
}
})
},