青岛网站制作公司排名,重庆喷绘制作,都江堰住房和城乡建设厅网站,赣州智美互联网科技有限公司在大佬那看到这个小技巧#xff0c;我觉得这个功能点还挺常用#xff0c;所以给大家分享下具体的实现。当未读消息数小于100的时候显示准确数值#xff0c;大于99的时候显示99。
1. 实现效果 2. 组件封装
templatespan classcolsup :styl…在大佬那看到这个小技巧我觉得这个功能点还挺常用所以给大家分享下具体的实现。当未读消息数小于100的时候显示准确数值大于99的时候显示99。
1. 实现效果 2. 组件封装
templatespan classcolsup :style{--num:num}{{num}}/sup/span
/templatescript
export default {name: unread,props:{num:{type: Number,default: 0}}
}
/script
style
.col {display: inline-flex;width: 4rem; height: 4rem;align-items: center;justify-content: center;
}.col sup {position: absolute;box-sizing: border-box;min-width: 1rem;padding: 0 0.1875rem;color: #fff;font-size: min(.75rem, calc(10000px - var(--num) * 100px));line-height: 1.2;text-align: center;background-color: #eb4646;border: 1px solid #fff;border-radius: 1rem;transform: translate(calc(40% .375rem), -.75rem);/* 数值为0的时候隐藏 */opacity: var(--num);
}
.col sup::before {content: 99;font-size: min(.75rem, calc(var(--num) * 100px - 9900px));
}
/style3. 使用 Unread :num0/ // 为0隐藏Unread :num9/Unread :num99/Unread :num999/
