日历组件显示内容超长滚动显示
最近有一个用vue写的日历组件。日历中显示的内容太长,需要滚动:主要思路是:1.监听内容变化2.判断内容长度和父级宽度3.添加动画html{data.defvalue.text}
{data.defvalue.value.status}
css/*单元格异常文字样式*/.calendar_status_text{红色;溢出:隐藏;空白:nowrap;}/*超长滚动显示*/.calendar_status{overflow:hidden;/*添加滚动类*/&>.scroll{text-overflow:unset;溢出:可见;动画:移动4s线性无限;}}@keyframes移动{0%{变换:translateX(100%);}100%{转换:translateX(-100%);}}jscheckScroll(){this.$nextTick(()=>{//获取选中的元素letselectedItems=[...document.querySelectorAll('.calendar_status')]selectedItems.forEach(item=>{letchild=item.querySelector('.calendar_status_text')if(child.scrollWidth>item.offsetWidth){//确定子文本宽度child.classList.add('scroll')}else{child.classList.remove('scroll')}})})},参考文档:https://www.jianshu.com/p/2f8…