Vue自定义svg百分比圆环组件

不熟悉svg，看文档做的这个东西。

菜鸟教程

先上效果图

使用说明

js里引入组件

1
import svgcircle from '@/components/svgcircle'

components里面声明下

1
2
3
components: {
     'svgcircle': svgcircle,
}

vue文件里面使用

1
2
3
4
5
6
7
8
9
<svgcircle
    rate="0.6"
    :size="svgcircleSize"
    :text="svgcircleText"
    :textSize="svgcircleTextSize"
    stroke-width="6"
    strokeBgColor="rgba(255, 160, 0, 0.5)"
    stroke-color="#FFA000"
></svgcircle>

组件开放了很多自定义属性，具体看代码了，如上，svgcircleSize、svgcircleText、svgcircleTextSize，都是data()里面定义的，其中svgcircleSize是圆环的半径，svgcircleText是圆环中间文字，svgcircleTextSize是中间文字的大小。

这个组件是为了大屏里面使用的，为了响应屏幕尺寸的变化，写了个方法，动态修改圆环的半径、中间文字大小，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 动态调整圆环里的文字，根据自己需求定义，1366是设计图的宽
resizeCircle() {
    window.screenWidth = document.body.clientWidth
    let screenWidth = window.screenWidth
    let tempSize = Math.round((this.svgcircleSize / 1366) * screenWidth)
    console.log('svgcircleSize:', screenWidth, tempSize)
    this.svgcircleSize = tempSize
    this.svgcircleTextSize = tempSize * 0.6
 },
init() {
    let vm = this
    setTimeout(() => {
         window.addEventListener('resize', () => {
             vm.resizeCircle()
         })
    }, 50)
},
destroyed() {
    window.removeEventListener('resize', this.init, 20)
},

当然，自适应这些可以直接组件里面写好的，有空再弄了~~~

工程代码

整个项目的代码在下面地址

大屏开发框架工程代码

详见目录 components — svgcircle.vue

代码使用例子在 views — Home 页面