uniapp实现自定义颜色组件

要在 Uniapp 中实现自定义颜色组件，可以按照以下步骤：

1. 在项目根目录下创建一个名为 `colorVars.scss` 的文件，并在其中定义你需要的颜色变量，例如：

$primary-color: #007bff;
$secondary-color: #6c757d;

2. 在 App.vue 中引入该文件，并在 `<style>` 标签中引入该文件：

<style lang="scss">
@import '@/colorVars.scss';
</style>

3. 创建一个自定义组件，例如：

<template>
  <div class="custom-component" :style="{ color: color }">{{ text }}</div>
</template>

<script>
export default {
  props: {
    text: String,
    color: String,
  },
};
</script>

<style lang="scss">
.custom-component {
  font-size: 16px;
}
</style>

4. 在组件中使用 `$primary-color` 或 `$secondary-color` 等颜色变量：

<template>
  <div>
    <custom-component text="Hello" color="$primary-color" />
    <custom-component text="World" color="$secondary-color" />
  </div>
</template>

<script>
import CustomComponent from '@/components/CustomComponent.vue';

export default {
  components: {
    CustomComponent,
  },
};
</script>

这样，你就可以在自定义组件中使用自定义的颜色变量了。