前端颜料盘？？

最新推荐文章于 2024-06-17 23:49:16 发布

就叫飞六吧

最新推荐文章于 2024-06-17 23:49:16 发布

阅读量340

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/weixin_52236586/article/details/135921679

版权

前端颜料盘？？

一、原生颜料盘

   <input type="color" placeholder="选择颜色">

在这里插入图片描述

二、第三方开源库

Pickr：

GitHub: https://github.com/Simonwep/pickr
官方网站: https://simonwep.github.io/pickr/
Pickr 是一个轻量级的颜色选择器，支持多种颜色格式，并且易于集成到任何项目中。

    <!-- One of the following themes -->
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css" />
            <!-- 'classic' theme -->
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" />
            <!-- 'monolith' theme -->
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css" />
            <!-- 'nano' theme -->

            <!-- Modern or es5 bundle -->
            <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
            
            <input type="text" id="color-input" class="layui-input" placeholder="选择颜色">

            <script>// Simple example, see optional options for more configuration.
                const pickr = Pickr.create({
                    el: '.color-picker',
                    theme: 'classic', // or 'monolith', or 'nano'

                    swatches: [
                        'rgba(244, 67, 54, 1)',
                        'rgba(233, 30, 99, 0.95)',
                        'rgba(156, 39, 176, 0.9)',
                        'rgba(103, 58, 183, 0.85)',
                        'rgba(63, 81, 181, 0.8)',
                        'rgba(33, 150, 243, 0.75)',
                        'rgba(3, 169, 244, 0.7)',
                        'rgba(0, 188, 212, 0.7)',
                        'rgba(0, 150, 136, 0.75)',
                        'rgba(76, 175, 80, 0.8)',
                        'rgba(139, 195, 74, 0.85)',
                        'rgba(205, 220, 57, 0.9)',
                        'rgba(255, 235, 59, 0.95)',
                        'rgba(255, 193, 7, 1)'
                    ],

                    components: {

                        // Main components
                        preview: true,
                        opacity: true,
                        hue: true,

                        // Input / output Options
                        interaction: {
                            hex: true,
                            rgba: true,
                            hsla: true,
                            hsva: true,
                            cmyk: true,
                            input: true,
                            clear: true,
                            save: true
                        }
                    }
                });
                // 监听颜色选择变化
                pickr.on('change', (color, instance) => {
                    const colorInput = document.getElementById('color-input');

                    // 获取选择的颜色值
                    const selectedColor = color.toHEXA().toString();

                    // 将颜色值赋给输入框
                    colorInput.value = selectedColor;
                });
            </script>

在这里插入图片描述