如何在Quasar/Vue中无需硬编码加载调色板？

方法一：直接配置QColor的palette属性 #

Quasar的QColor组件palette属性支持传入分组式的颜色数组，你可以把store里的colorPalettes数组映射成符合要求的结构，不用手动循环组件。

1. 在组件中转换store的颜色数组为调色板格式：

<script setup>
import { useStore } from 'pinia' // 用Vuex则对应其取值方式
const store = useStore()

// 将颜色对象数组映射为纯颜色值数组，组成调色板分组
const customPalette = {
  自定义调色板: store.colorPalettes.map(item => item.value)
}
</script>

2. 模板中绑定palette属性：

<template>
  <q-color v-model="selectedColor" :palette="customPalette" />
</template>

QColor会自动渲染该分组下的所有颜色方块，不会重复整个组件。

方法二：手动渲染自定义调色板色块 #

如果需要自定义调色板样式（比如显示颜色名称、调整布局），可以单独渲染色块并关联颜色选择器的选中值：

1. 定义选中变量和点击事件：

<script setup>
import { ref } from 'vue'
import { useStore } from 'pinia'
const store = useStore()
const selectedColor = ref('#E53935') // 默认选中第一个颜色

const setSelectedColor = (colorValue) => {
  selectedColor.value = colorValue
}
</script>

2. 模板中渲染颜色选择器和自定义色块：

<template>
  <!-- 主颜色选择器 -->
  <q-color v-model="selectedColor" />

  <!-- 自定义调色板色块 -->
  <div class="flex flex-wrap gap-2 mt-3">
    <div
      v-for="color in store.colorPalettes"
      :key="color.id"
      class="w-8 h-8 rounded-full cursor-pointer shadow-sm"
      :style="{ backgroundColor: color.value }"
      @click="setSelectedColor(color.value)"
      :title="color.name"
    ></div>
  </div>
</template>

这种方式能完全控制调色板样式，同时避免重复渲染QColor组件。

内容的提问来源于stack exchange，提问作者Ants