使用 Svelte 5 创建交互式颜色选择器

使用 svelte 5 创建交互式颜色选择器

svelte 5 提供了一种优雅而高效的方式来构建交互式 web 应用程序，而颜色选择器是展示其功能的完美示例。在这篇博文中，我们将探索如何使用 svelte 5 创建交互式颜色选择器，重点关注简单但实用的代码片段。

完整代码

<script>
    import svg from '../lib/assets/circle.svg';
    let colors = $state(['#bbff00', '#06f586', '#ff3e00', '#8d462e', '#ff0037']);

    let fillings = $state(0);

    $effect(() => {
        console.log(fillings);
    });
</script>

<div>
    <div class="flex gap-2 mb-4">
        {#each colors as color, index}
            <div class="flex flex-col gap-2">
                <button
                    onclick={() => (fillings = index)}
                    style:background={colors[index]}
                    class="w-24 h-24 mb-3 rounded-full"
                >
                    {#if index === fillings}
                        <img src={svg} alt={index.tostring()} />
                    {/if}
                </button>
                <span>
                    <code>
                        {colors[index]}
                    </code>
                </span>
            </div>
        {/each}
    </div>
    <input bind:value={colors[fillings]} type="color" name="color" />
</div>

了解代码结构

提供的代码创建了一个颜色选择器界面，用户可以从一组预定义的颜色中进行选择。其工作原理如下：

1. svg 图像导入：该组件首先导入 svg 文件，该文件将显示在所选颜色旁边。这种视觉提示增强了用户体验。

   import svg from '../lib/assets/circle.svg';

1. 颜色数组：使用 $state 定义颜色数组，它允许在 svelte 中进行反应式状态管理。

   let colors = $state(['#bbff00', '#06f586', '#ff3e00', '#8d462e', '#ff0037']);

1. 当前填充状态：另一个状态变量filling 跟踪当前选择的颜色索引。

   let fillings = $state(0);

1. effect hook：$effect 函数将填充物的当前值记录到控制台，允许开发者实时跟踪变化。

   $effect(() => {
       console.log(fillings);
   });

1. 渲染 ui：ui 是使用每个块和条件渲染的组合构建的。对于数组中的每种颜色，都会创建一个按钮。单击按钮时，它会更新填充状态以反映所选索引。所选颜色以 svg 图标突出显示。

   {#each colors as color, index}
       <button onclick={() => (fillings = index)} style:background={colors[index]} class="w-24 h-24 mb-3 rounded-full">
           {#if index === fillings}
               <img src={svg} alt={index.tostring()} />
           {/if}
       </button>
   {/each}

1. 颜色输入：颜色输入元素允许用户自定义所选颜色。它绑定到当前选择的颜色，确保更改立即反映在 ui 中。

   <input bind:value={colors[fillings]} type="color" name="color" />

提升用户体验

通过这个简单的设置，用户可以轻松选择颜色，实时反馈增强了参与度。 svg 图标提供了所选颜色的视觉表示，使界面更加直观。

结论

在 svelte 5 中创建交互式颜色选择器是一个简单的过程，展示了该框架在反应性和简单性方面的优势。此示例可以作为更复杂应用程序的基础，允许开发人员在此基本功能的基础上添加附加功能，例如保存颜色首选项或与设计工具集成。 svelte 拥有无限的可能性，使其成为现代 web 开发的绝佳选择。