这篇文章主要为大家详细介绍了vue实现百分比占比条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现百分比占比条的具体代码，供大家参考，具体内容如下
效果图
1.各自占比
/p>
2.左百分百
3.右百分百
代码实现
<div class="about"> <!-- <h1>This is an about page</h1> --><div class="step"> <!-- 左边100%的时候不显示斜边三角形，并且增加右边角 --><div class="left"> <div class="bar-tip-box"> <p>总数：{{ totalNum }}</p><p>绿色所占比例：{{ leftPercent }}%</p></div><div class="tip-arrow"></div> {{ leftPercent }}% </div><div class="right"> <div class="bar-tip-box"> <p>总数：{{ totalNum }}</p><p>灰色所占比例：{{ rightPercent }}%</p></div><div class="tip-arrow"></div> {{ rightPercent }}% </div></div></div> .step { position: relative; display: flex; margin: 100px; width: 200px; font-size: 0; .left { flex-grow: 0; position: relative; display: inline-block; background: #62c87f; color: #fff; text-align: center; font-weight: bold; width: 70%; font-size: 12px; line-height: 20px; height: 20px; min-width: 30px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } // 百分百的时候不显示该伪类 .tringle::after { content: " "; position: absolute; top: 0; right: -8px; border-width: 20px 8px; border-style: solid; border-color: #62c87f<span style="color:transparent">本文来源gaodai#ma#com搞*!代#%^码$网!</span> transparent transparent transparent; z-index: 10; } .right { flex-grow: 1; position: relative; display: inline-block; /* width:30%; */ background: #d0d4dc; color: #333; font-weight: bold; text-align: center; font-size: 12px; line-height: 20px; height: 20px; text-align: center; min-width: 35px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .full-left{ border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .full-right{ border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .tip-arrow { position: absolute; left: 50%; top: -10px; display: inline-block; width: 7px; height: 7px; transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); background-color: #7f7f7f; z-index: 10; } .bar-tip-box { position: absolute; top: -5px; right: 50%; transform: translate(50%, -100%); text-align: left; padding: 5px 10px; width: max-content; color: #fff; font-size: 12px; font-weight: 400; border-radius: 3px; background-color: #7f7f7f; z-index: 10; p { margin: 0; padding-bottom: 5px; } } }
以上就是vue实现百分比占比条效果的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现百分比占比条效果
转载请注明原文链接：vue实现百分比占比条效果
