Vue.js: 如何在 <script> 下检索 css 变量

Question

我正在使用 chartJs 在我的应用程序中添加圆环图，但我需要在 <script> 下设置它的颜色，我想从 theme/variables.css 中获取颜色。

在下面的代码中，我有一个硬编码的 backgroundColor，但我想从 --ion-color-secondary 和 --ion-color-secondary-contrast 中获取它。我怎样才能做到这一点？

代码如下：

<template>
  <Doughnut
    :chart-data="chartData"
    :chart-options="chartOptions"
  /> 
</template>

<script lang=ts>
import { defineComponent, PropType } from 'vue'

import { Doughnut } from 'vue-chartjs'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement,
  CategoryScale,
  Plugin
} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)

export default defineComponent<{fastdata: any}>({
  name: 'MrProgress',
  components: {
    Doughnut
  },
  inject: ["fastdata"],
  setup() {
    const chartOptions = {
      responsive: true,
      maintainAspectRatio: true,
      cutout: "90%",
      borderWidth: 0,
    }
    return {
        chartOptions,
    };
  },
  computed: {
    chartData() {
      const pts = this.fastdata.user.pts;
      const missing = this.fastdata.user.proximo_nivel - pts;
      return {
        datasets: [
          {
            backgroundColor: ['#41B883', '#e4e0d8'],
            data: [pts, missing]
          }
        ]
      }
    }
  }
})
</script>

Answer 1

根据@EstusFlask 在关于 userCssVar 的评论中的提示，我设法通过以下方式解决了它：

npm i @vueuse/core

...
import { useCssVar } from '@vueuse/core'
import { ref } from 'vue'

<script>
...
      const color_pts = useCssVar(ref('--ion-color-secondary'), ref(null)).value;
      const color_missing = useCssVar(ref('--ion-background-color'), ref(null)).value;
      return {
        datasets: [
          {
            backgroundColor: [color_pts, color_missing],
            data: [pts, missing]
          }
        ]
      }
...
</script>

Vue.js: 如何在 <script> 下检索 css 变量

Vue.js: How to retrieve css var under <script>

javascript

css

vue.js

vuejs3