vue实现环形进度条组件

<template>
	<div class="progress-circle" @click="togglePlaying">
		<svg  :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
			<circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"></circle>
			<circle  class="progress-bar" r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray"//dashArra表示圆环的周长
			:stroke-dashoffset="dashOffset"></circle><!-- fill是背景颜色，不是边框 -->
		</svg>//dashOffset是圆环进度，dashOffset等于周长时进度为0，dashOffset等于0时进度100%
		<slot></slot>//默认插槽，可以填充一个图标。比如我在音乐项目中插入一个三角图标
	</div>
</template>

<script type="text/ecmascript-6">
	const r = 50
	export default {
		props: {
			radius: {
				type: Number,
				default: 100
			},
			percent:{
				type:Number,
				default:0
			}
		},
		data() {
			return {

			}
		},
		components: {},
		methods: {
			togglePlaying(){
				this.$emit('click')
			}
		},
		mounted() {},
		computed:{
			dashArray(){
				return 2*r*3.14
			},
			dashOffset(){
				return (1 - this.percent)*this.dashArray
			}
		},
		created() {},
		watch: {}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '../../common/stylus/variable'
    .progress-circle
        position: relative
        width 100%
        height 100%
        svg
          position absolute
          top 40%
          left 50%
          z-index 10
          transform translate(-50%,-50%)
          circle
            position absolute
            stroke-width: 8px
            transform-origin: center//旋转轴点，这里设置为中心点
            &.progress-background
              transform: scale(0.9)//&表示应用父元素，这里可理解为一种"&&"
              stroke: $color-theme-d
            &.progress-bar
              transform: scale(0.9) rotate(-90deg)//rotate作用是使进度从正上方开始
              stroke: $color-theme
</style>