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

发布日期： 2024-10-24 阅读量： 作者： 网络

使用 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>

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯9106 】【 SEO推广9201 】

上一篇: mac如何关闭php-fpm

下一篇: C++ 函数中异常和错误处理的性能优化

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

随便看看