vue 环形进度条封装

最新推荐文章于 2024-09-12 08:05:29 发布

1234Wu

最新推荐文章于 2024-09-12 08:05:29 发布

阅读量271

点赞数

分类专栏： Web前端 # VUE 文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/qq_42866164/article/details/108388787

版权

Web前端同时被 2 个专栏收录

98 篇文章 3 订阅

订阅专栏

VUE

23 篇文章 0 订阅

订阅专栏

<template>
  <div>
    <svg :viewBox="`0 0 ${2 * radius + srtokeWidth} ${radius + srtokeWidth}`">
      <defs>
        <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" :stop-color="defaultNegativeColor" />
          <stop offset="100%" :stop-color="defaultPositiveColor" />
        </linearGradient>
      </defs>
      <path
        :d="
          `M ${srtokeWidth / 2} ${radius +
            srtokeWidth / 2} a ${radius} ${radius} 0 1 1 ${radius * 2} 0`
        "
        :stroke-width="srtokeWidth"
        :stroke="emptyColor"
        fill="none"
        stroke-linecap="round"
      ></path>
      <path
        :d="
          `M ${srtokeWidth / 2} ${radius +
            srtokeWidth / 2} a ${radius} ${radius} 0 1 1 ${radius * 2} 0`
        "
        :stroke-width="srtokeWidth"
        stroke="url(#linear)"
        fill="none"
        stroke-linecap="round"
        :stroke-dasharray="strokeDasharray"
        :stroke-dashoffset="strokeDashoffset"
      >
        <animate
          attributeName="stroke-dashoffset"
          :dur="`${durTime}ms`"
          fill="freeze"
          :from="strokeDasharray"
          :to="strokeDashoffset"
        ></animate>
      </path>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultDurTime: 800, // 进度条完结时间
      defaultEmptyColor: '#ECF2FF', // 默认底色
      defaultNegativeColor: '#d4fc78', // 80EDFF FF4456
      defaultPositiveColor: '#00ba5e', // 进行时底色
      defaultSrtokeWidth: 10, // 进度线宽度
      defaultRadius: 100
    }
  },
  props: ['options', 'value'],
  computed: {
    durTime() {
      return this.options
        ? this.options.durTime || this.defaultDurTime
        : this.defaultDurTime
    },
    radius() {
      return this.options
        ? this.options.radius || this.defaultRadius
        : this.defaultRadius
    },
    emptyColor() {
      return this.options
        ? this.options.emptyColor || this.defaultEmptyColor
        : this.defaultEmptyColor
    },
    srtokeWidth() {
      return this.options
        ? this.options.srtokeWidth || this.defaultSrtokeWidth
        : this.defaultSrtokeWidth
    },
    valueColor() {
      if (this.value < 0) {
        return this.options
          ? this.options.negativeColor || this.defaultNegativeColor
          : this.defaultNegativeColor
      } else {
        return this.options
          ? this.options.positiveColor || this.defaultPositiveColor
          : this.defaultPositiveColor
      }
    },
    strokeDasharray() {
      return 3.1415926 * this.radius
    },
    strokeDashoffset() {
      return this.strokeDasharray - this.strokeDasharray * this.value
      //   return 10
    }
  }
}
</script>