vue计算百分比,
这篇文章主要为大家详细介绍了某视频剪辑软件实现百分比占比条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现百分比占比条的具体代码，供大家参考，具体内容如下
效果图
1.各自占比
/p
2.左百分百
3.右百分百
代码实现
模板
div class="关于"
！-h1这是一个关于页面/h1 -
div class=step
！-左边100%的时候不显示斜边三角形，并且增加右边角-
差异
class=左
v-show=leftPercent
:class=[{ 全左:rightPercent }，{ tringle: rightPercent }]
:style={ width: leftPercent % }
@ mouse over= onmouse tooltip(LEFT _ BAR，SHOW_TIP)
@ mouseleave= onMouseTooltip(LEFT _ BAR，HIDE_TIP)
左栏。显示提示
p总数：{{ totalNum }}/p
p绿色所占比例：{{ leftPercent }}%/p
/div
div class= tip-arrow v-show=左栏。显示提示/div
{{ leftPercent }}%
/div
差异
对的
v-show=rightPercent
:class=[{ 右满:leftPercent }]
@ mouse over= onmouse tooltip(RIGHT _ BAR，SHOW_TIP)
@ mouse leave= onMouseTooltip(RIGHT _ BAR，HIDE_TIP)
右栏。显示提示
p总数：{{ totalNum }}/p
p灰色所占比例：{{ rightPercent }}%/p
/div
div class= tip-arrow v-show=右栏。显示提示/div
{{ rightPercent }}%
/div
/div
/div
/模板
脚本
const LEFT _ BAR= left
const RIGHT _ BAR= right
const SHOW _ TIP= show
const HIDE _ TIP= hide
导出默认值{
data() {
返回{
左栏：左栏，
右_吧：右_吧，
显示提示：显示提示
隐藏提示：隐藏提示，
总数：1000,
左百分比：100,
左栏：{
isShowTip:假的，
延迟布局：空
},
右栏：{
isShowTip:假的，
延迟布局：空
}
};
},
方法：{
onMouseTooltip(tipType，actionType) {
设bar=空
if (tipType==LEFT_BAR) {
bar=this.leftBar
} else if (tipType==RIGHT_BAR) {
bar=this.rightBar
}否则{
返回；
}
if (actionType===SHOW_TIP) {
this.showBarTooltip(酒吧);
} else if(actionType===HIDE _ TIP){
this.hideBarTooltip(酒吧);
}否则{
返回；
}
},
showBarTooltip(bar) {
if (bar.delayOut！=null) {
清除超时(栏。delayout)；
}
bar.delayOut=null
bar.isShowTip=true
},
hideBarTooltip(bar) {
清除超时(栏。delayout)；
酒吧。delayout=setTimeout(function(){
bar.isShowTip=false
}, 100);
},
},
计算值：{
右百分比：函数(){
返回100-这个。左侧百分比；
}
}
};
/脚本
style lang=less 范围。步骤{
位置：相对；
显示器：flex
边距：100像素
宽度：200像素
字体大小：0;左侧{
灵活增长：0;
位置：相对；
显示：内嵌-块；
背景：# 62c87f
颜色：# fff
文本对齐：居中；
字体粗细：粗体；
宽度：70%;
字体大小：12px
行高：20px
高度：20px
最小宽度：30px
border-top-left-radius:5px；
边框-底部-左侧-半径：5px
}
//百分百的时候不显示该伪类。三角形：在{
内容："";
位置：绝对；
top:0；
右：-8px；
边框宽度：20像素8像素
边框样式：纯色；
边框-颜色：#62c87f透明透明；
z指数：10;
}。右{
伸缩增长：1;
位置：相对；
显示：内嵌-块；
/*宽度：30%;*/
背景：# d0d 4 DC；
颜色：# 333;
字体粗细：粗体；
文本对齐：居中；
字体大小：12px
行高：20px
高度：20px
文本对齐：居中；
最小宽度：35px
border-top-right-radius:5px；
边框-底部-右侧-半径：5px
}。全左{
border-top-right-radius:5px；
边框-底部-右侧-半径：5px
}。全右{
border-top-left-radius:5px；
边框-底部-左侧-半径：5px
}。提示-箭头{
位置：绝对；
左：50%;
top:-10px；
显示：内嵌-块；
宽度：7px
高度：7px
变换：旋转台(45度);
-WebKit-transform:rotateZ(45度)；
背景色：# 7 F7 f7f；
z指数：10;
}。工具栏-提示框{
位置：绝对；
顶：-5px；
右：50%;
转换：平移(50%,-100%);
文本对齐：左对齐；
填充：5px 10px
宽度：最大内容；
颜色：# fff
字体大小：12px
字体粗细：400;
边框半径：3px
背景色：# 7 F7 f7f；
z指数：10;
p {
边距：0;
垫底：5px
}
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。