设置默认值后动态更新js调色板

Question

我想使用 jscolor 创建一个颜色选择器，它还将最近的颜色选择保存到调色板中。所以我需要在更改时动态更新调色板...我觉得这将是一个常见的问题，但我没有看到任何可以做到这一点的...任何帮助将不胜感激！

jscolor 文档页面：https://jscolor.com/docs/

let customColors =  [
        '#2C2B2B', '#FFEE92', '#17C3B2', '#71A5DE', '#C27EC2', '#FE6D73',
    ];

jscolor.presets.default = {
    position: 'right',
    palette: customColors,
    //paletteCols: 12,
    hideOnPaletteClick: true,
};
const colorPicker = document.getElementById('color-picker');
colorPicker.addEventListener('input', () => {
        customColors.push(colorPicker.value);
        
        //somehow update the palette here........
});

我尝试弄乱预设并使用 jscolor.install();但无法更新调色板。

Answer 1

根据其文档，您需要从 jscolor 的实例更新

option

。

let customColors =  [
        '#2C2B2B', '#FFEE92', '#17C3B2', '#71A5DE', '#C27EC2', '#FE6D73',
    ];

jscolor.presets.default = {
    position: 'right',
    palette: customColors,
    //paletteCols: 12,
    hideOnPaletteClick: true,
};
const colorPicker = document.getElementById('color-picker');
colorPicker.addEventListener('input', () => {
    customColors.push(colorPicker.value);

    // update palette option from instance
    colorPicker.jscolor.option('palette', customColors);
});