一对一聊天源码，vue实现环形进度条组件

一对一聊天源码，vue实现环形进度条组件的相关代码

 

1

<template><br><div @click="togglePlaying"><br><svg  :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><br><circle r="50" cx="50" cy="50" fill="transparent"></circle><br><circle  r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray"//dashArra表示圆环的周长<br>:stroke-dashoffset="dashOffset"></circle><!-- fill是背景颜色，不是边框 --><br></svg>//dashOffset是圆环进度，dashOffset等于周长时进度为0，dashOffset等于0时进度100%<br><slot></slot>//默认插槽，可以填充一个图标。比如我在音乐项目中插入一个三角图标<br></div><br></template><br><script type="text/ecmascript-6"><br>const r = 50<br>export default {<br>props: {<br>radius: {<br>type: Number,<br>default: 100<br>},<br>percent:{<br>type:Number,<br>default:0<br>}<br>},<br>data() {<br>return {<br>}<br>},<br>components: {},<br>methods: {<br>togglePlaying(){<br>this.$emit('click')<br>}<br>},<br>mounted() {},<br>computed:{<br>dashArray(){<br>return 2*r*3.14<br>},<br>dashOffset(){<br>return (1 - this.percent)*this.dashArray<br>}<br>},<br>created() {},<br>watch: {}<br>}<br></script><br><style scoped rel="stylesheet/stylus"><br>    @import '../../common/stylus/variable'<br>    .progress-circle<br>        position: relative<br>        width 100%<br>        height 100%<br>        svg<br>          position absolute<br>          top 40%<br>          left 50%<br>          z-index 10<br>          transform translate(-50%,-50%)<br>          circle<br>            position absolute<br>            stroke-width: 8px<br>            transform-origin: center//旋转轴点，这里设置为中心点<br>            &.progress-background<br>              transform: scale(0.9)//&表示应用父元素，这里可理解为一种"&&"<br>              stroke: $color-theme-d<br>            &.progress-bar<br>              transform: scale(0.9) rotate(-90deg)//rotate作用是使进度从正上方开始<br>              stroke: $color-theme<br></style>

​

以上就是一对一聊天源码，vue实现环形进度条组件的相关代码， 更多内容欢迎关注之后的文章