vue慕课网音乐项目手记:30-音乐环形进度条的实现
Posted catbrother
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue慕课网音乐项目手记:30-音乐环形进度条的实现相关的知识,希望对你有一定的参考价值。
环形进度条是基于svg实现的。
<template> <div class="progress-circle"> <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!-- width/height表示svg的宽高,viewBox表示根据svg的宽高拉出来的大小 --> <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent" /> <!-- r表示半径,cx 和 cy 属性定义圆点的 x 和 y 坐标 fill表示背景色 --> <circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray" :stroke-dashoffset="dashOffset"/> </svg> <slot></slot> </div> </template>
<style lang="stylus" scoped>
@import ‘~common/stylus/variable‘
.progress-circle
position relative
circle
stroke-width 8px
// stroke-width表示环形的宽度
transform-origin center
// 中心旋转
&.progress-background
transform scale(0.9)
stroke $color-theme-d
&.progress-bar
transform scale(0.9) rotate(-90deg)
stroke $color-theme
</style>
逻辑的实现:
以上是关于vue慕课网音乐项目手记:30-音乐环形进度条的实现的主要内容,如果未能解决你的问题,请参考以下文章
vue慕课网音乐项目手记:9-封装一个公用的scroll组件