一對一聊天原始碼，vue實現環形進度條元件的相關程式碼

<template>
<div @click="togglePlaying">
<svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle r="50" cx="50" cy="50" fill="transparent"></circle>
<circle 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 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>

​

以上就是一對一聊天原始碼，vue實現環形進度條元件的相關程式碼， 更多內容歡迎關注之後的文章