react实现一个颜色选择器效果代码-html代码-BFW代码库

react实现一个颜色选择器效果代码

代码语言：html

所属分类：选择器

代码描述：react实现一个颜色选择器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap'>

    <style>
        body, html {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "Open Sans", sans-serif;
            background-color: #fafcff;
            background-image: radial-gradient(circle, transparent, #afb5bf), linear-gradient(transparent, #d3d8e0);
        }

        .color-picker {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }
        .color-picker .shade-selector,
        .color-picker .hue-selector {
            position: relative;
            width: 250px;
            margin: 15px;
            cursor: pointer;
            user-select: none;
            border-radius: 3px;
            box-shadow: inset 0 0 1px rgba(2, 31, 39, 0.4), inset 0 0 5px rgba(58, 77, 82, 0.2);
        }
        .color-picker .shade-selector {
            height: 250px;
            background: linear-gradient(transparent, black), linear-gradient(90deg, white, transparent), linear-gradient(var(--color), var(--color));
        }
        .color-picker .hue-selector {
            height: 8px;
            background-image: linear-gradient(90deg, red, #ff0, lime, cyan, blue, #f0f, red);
        }
        .color-picker .hue-selector .pointer {
            top: 4px;
        }
        .color-picker .pointer {
            position: absolute;
            z-index: 1;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            border: 5px solid white;
            transform: translate(-10px, -10px);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.2);
            background-color: var(--color);
        }

        .info-box {
            display: flex;
            justify-content: space-between;
            margin: 30px 10px 10px;
        }
        .info-box div {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-basis: 50px;
            font-size: 12px;
            height: 28px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 6px;
            user-select: all;
        }
        .info-box div::before {
            content: attr(title);
            position: absolute;
            top: -18px;
            font-weight: bold;
            font-size: 10px;
        }
        .info-box div:first-child {
            flex-basis: 80px;
        }
    </style>



</head>

<body>




    <script type="module">
        function _extends() {
            _extends = Object.assign || function (target) {
                for (var i = 1; i < arguments.length; i++) {
                    if (window.CP.shouldStopExecution(0)) break; var source = arguments[i]; for (var key in source) {
                        if (Object.prototype.hasOwnProperty.call(source, key)) {
                            target[key] = source[key];
                        }}}window.CP.exitedLoop(0); return target;
            }; return _extends.apply(this, arguments);
        }import React, {
            useCallback,
            useState,
            useEffect,
            useRef,
            useMemo,
            memo
        } from 'https://cdn.skypack.dev/react';
        import ReactDOM from 'https://cdn.skypack.dev/react-dom';
        import PropTypes from 'https://cdn.skypack.dev/prop-types';
        import {
            Movable
        } from 'https://cdn.skypack.dev/webrix/components';
        import {
            useDimensions
        } from 'https://cdn.skypack.dev/webrix/hooks';
        import convert from 'https://cdn.skypack.dev/color-convert';

        const {
            transform,
            trackpad,
            update
        } = Movable.Operations;
        const {
            clamp,
            map
        } = Movable.Transformers;

        const HueSelector = memo(({
            hsv, onChange
        }) => {
            const movable = useRef();
            const {
                width
            } = useDimensions(movable);
            const [left, setLeft] = useState(0);

            const props = Movable.useMove(useMemo(() => [
                trackpad(movable),
                transform(v => v.le.........完整代码请登录后点击上方下载按钮下载查看