最近有个用 vue 写的日历组件,日历内显示的内容有超长须要滚动显示的:
次要的思路就是:
1、监听内容变动
2、判断内容长度与父级宽度
3、给内容增加 animation
html
<div class="calendar_status">
<div>{data.defvalue.text}</div>
<div class="calendar_status_text">{data.defvalue.value.status}
</div>
</div>
css
/* 单元格异样文字款式 */
.calendar_status_text {
color: red;
overflow: hidden;
white-space: nowrap;
}
/* 超长滚动显示 */
.calendar_status {
overflow: hidden;
/* 减少 scroll 类 */
& > .scroll {
text-overflow: unset;
overflow: visible;
animation: move 4s linear infinite;
}
}
@keyframes move {0% { transform: translateX(100%); }
100% {transform: translateX(-100%); }
}
js
checkScroll () {this.$nextTick(() => {
// 获取选中元素
let selectedItems = [...document.querySelectorAll('.calendar_status')]
selectedItems.forEach(item => {let child = item.querySelector('.calendar_status_text')
if (child.scrollWidth > item.offsetWidth) { // 判断 child 文字宽度
child.classList.add('scroll')
} else {child.classList.remove('scroll')
}
})
})
},
参考文档:https://www.jianshu.com/p/2f8…