Vue 100% 时如何为“边框”设置渐变颜色 - 自定义 css 包

Question

我正在使用这个包https://www.npmjs.com/package/vue-css-donut-chart#usage-with-all-the-available-props 根据进度设置图像周围的“边框”。 问题是我需要为“边框”设置渐变颜色，当它为 100% 时，道具不允许我这样做。因此，我尝试实现以下目标：

if(this.sections[0].value = 50) {
    this.sections[0].color = "transparent"
    this.sections[1].color = "transparent"
    let grad = document.querySelector(".cdc")
    grad.classList.add("border-gradient")
    console.log(grad)
}

我在整个应用程序的多个地方都使用了这个组件，而渐变色只应用在一个地方：

<Home>
<sidebar/> <-----

<router-view />
</Home>

Main.js

import Donut from "vue-css-donut-chart";
import "vue-css-donut-chart/dist/vcdonut.css";
Vue.use(Donut);

甜甜圈组件

<template>
<div>
     <vc-donut
          :sections="sections"
          :size="size"
          :start-angle="angle"
          :thickness="thickness"
          :foreground="'#D4DDFC85'"
        >
        <b-img v-if="profilePic" class="object-fit-contain rounded-circle p-1 m-0" :width="width" :src="profilePic"/>
        </vc-donut>
        </div>
</template>

<script>
import backend from "@/services/backend.js"

export default {
    props: ["profilePic", "size", "width", "thickness"],
 data: () => {
    return {
        me: null,
        angle: null,
      sections: [
        { value: 0, color: "#4ECB62" },
        { value: 0, color: "#223C9B" },
      ],
    };
  },
  mounted() {
      this.fetch_me()
  },



  methods: {
      async fetch_me() {
          this.me = (await backend.me()).data
         
          
       
         if(this.me.roles.indexOf('investor') != -1 && this.me.roles.indexOf('homeowner') != -1) {
            // Set values for homeowner depending on amount of listed properties
           /*  if(this.me.homes.length == 100) {
                 this.sections[1].value = 50
             } else if (this.me.homes.length >= 25) {
                 this.sections[1].value = 40
             } else if (this.me.homes.length >= 5) {
                 this.sections[1].value = 35
             } else {
                 this.sections[1].value = 25
             }*/

             this.sections[1].value = 50 
               this.sections[0].value = 50
               if(this.sections[0].value = 50) {
                   this.sections[0].color = "transparent"
                   this.sections[1].color = "transparent"
                   let grad = document.querySelector(".cdc")
                   grad.classList.add("border-gradient")
                   console.log(grad)
               }
            // Set the correct angle depending on the value (Investor & Homeowner)
                 if(this.sections[0].value == 40 || this.sections[1].value == 40) {
                    return this.angle = 35
                 } else if (this.sections[0].value == 50 || this.sections[1].value == 50) {
                    return this.angle = 0
                 } else if (this.sections[0].value == 35 || this.sections[1].value == 35) {
                    return this.angle = 90
                 }  else if (this.sections[0].value == 25 || this.sections[1].value == 25) {
                    return this.angle = 25
                 }
            
          } else if(this.me.roles.indexOf('homeowner') != -1) {
            if(this.me.homes.length == 100) {
                 this.sections[1].value = 100
             } else if (this.me.homes.length >= 25) {
                 this.sections[1].value = 85
             } else if (this.me.homes.length >= 5) {
                 this.sections[1].value = 65
             } else {
                 this.sections[1].value = 50
             }
        
    
            // Set the correct angle depending on the value (Homeowner)
                if(this.sections[1].value == 50) {
                    return this.angle = 90
                } else if(this.sections[1].value == 65) {
                    return this.angle = 62
                } else if(this.sections[1].value == 85) {
                    return this.angle = 27
                } else {
                    return 0
                }
          } else if(this.me.roles.indexOf('investor') != -1) {
              this.sections[0].value = 50
              if(this.sections[0].value == 50) {
                this.sections[0].value = 50;
              }
              // Set the correct angle depending on the value (Investor)
              if(this.sections[0].value == 50) {
                    return this.angle = 90
                } 
          }
      },

  }
}
</script>

The console.log(grad) shows that the class is added to the element, but the CSS isn't applied.

donut(ProfileImageRings)组件使用示例

<profile-image-rings v-if="user.picture" :width="160" :size="170" :thickness="7" :profilePic="user.picture"/>

custom.scss

.border-gradient {
    background: linear-gradient(90deg, #223C9B 0%, #4ECB62 100%) !important;
}

Answer 1

问题仅仅是因为我使用的是querySelector，它只 返回匹配选择器的第一个元素。

解决这个问题的方法是把querySelector改成getElementsByClassName，然后用匹配的类循环遍历元素的长度，然后将另一个类应用于元素。

this.sections[1].value = 50 
   this.sections[0].value = 50
   if(this.sections[0].value = 50) {
   this.sections[0].color = "transparent"
   this.sections[1].color = "transparent"
   let grad = document.getElementsByClassName("cdc")
      for(let i = 0; i < grad.length; i++) {
          grad[i].classList.add("border-gradient")
   }     
}