背景

在標(biāo)簽功能中，由于有「背景色」屬性，每次新增標(biāo)簽時(shí)都為選擇哪種顏色犯難。因此，我們思考如何通過(guò)JS代碼生成隨機(jī)顏色，提取一個(gè)通用的隨機(jī)顏色生成工具，并基于React框架封裝隨機(jī)顏色選擇器組件。

實(shí)際效果

原理與思路

作為前端開(kāi)發(fā)人員，我們知道HTML接受 RGB、HEX、HSL三種格式的顏色。雖然是不同的格式，但是它們的本質(zhì)都是通過(guò)數(shù)字表達(dá)出顏色。

因?yàn)镽GB、HEX、HSL 本身都是數(shù)字，那么通過(guò)生成隨機(jī)數(shù)并組裝成符合格式要求的數(shù)字，也就達(dá)到預(yù)期隨機(jī)生成顏色的想法。

下面分別列舉RGB和HEX格式的隨機(jī)顏色生成思路

• 以RGB格式為例，rbg(0,0,0)代表黑色，rbg(255,255,255)代表白色。所以我們通過(guò)JS的Math.random方法隨機(jī)生成3個(gè)0～255之間的隨機(jī)數(shù)，并且取整，將生成的三個(gè)隨機(jī)數(shù)進(jìn)行字符串拼接即可得到一個(gè)RGB格式的顏色。
• 以HEX格式為例，#000000代表黑色， #FFFFFF代表白色。可以發(fā)現(xiàn)hex格式通常都是6位16進(jìn)制的數(shù)字，每?jī)晌?6進(jìn)制數(shù)字分為一組，比如1～2位代表red，3～4代表blue，5～6代表green。同樣的道理，通過(guò)Math.random方法隨機(jī)生成3個(gè)0～255之間的隨機(jī)數(shù)，通過(guò)JS的toString(16)方法將10進(jìn)制隨機(jī)數(shù)轉(zhuǎn)化成16進(jìn)制格式，最后通過(guò)字符串拼接得到HEX格式的顏色。

核心代碼

• RBG格式隨機(jī)顏色生成方法

  export function getRandomRGBColor(limit: number = 256) {
    //十六進(jìn)制顏色隨機(jī)
    const r = Math.floor(Math.random() * limit);
    const g = Math.floor(Math.random() * limit);
    const b = Math.floor(Math.random() * limit);
  
    const color = `rgb(${r},${g},$)`;
    return color;
  }
  

• HEX格式隨機(jī)顏色生成方法

  export function getRandomHEXColor(limit: number = 256) {
    const getRandomHexNumber = (limit: number): string => {
      let randomNum = Math.floor(Math.random() * limit).toString(16);
      if (randomNum.length < 2) {
        randomNum = "0" + randomNum;
      }
      return randomNum;
    };
  
    //十六進(jìn)制顏色隨機(jī)
    const r = getRandomHexNumber(limit);
    const g = getRandomHexNumber(limit);
    const b = getRandomHexNumber(limit);
  
    const color = `#${r}${g}$`;
    return color;
  }
  

React組件

這是標(biāo)簽背景隨機(jī)顏色選擇器的React組件代碼，實(shí)現(xiàn)是非常簡(jiǎn)單的，可以直接復(fù)制使用。

實(shí)際運(yùn)行效果可以看本文最開(kāi)始的「實(shí)際效果」截圖。

import { useMemo, useState } from "react";
import { getRandomColor } from "@/utils/color";
import classnames from "classnames";
import { Check, Refresh } from "@icon-park/react";
import { nanoid } from "nanoid";

interface ColorSelectProps {
  defaultValue: string;
  value?: string;
  onChange?: (value: string) => void;
}

export default function ColorSelect(props: ColorSelectProps) {
  const { defaultValue, value, onChange } = props;

  // 用于重新生成顏色
  const [randomId, setRandomId] = useState("");

  const colors = useMemo(() => {
    // 隨機(jī)生成6個(gè)顏色
    return new Array(6).fill(0).map(() => getRandomColor());
  }, [randomId]);

  const targetColors = useMemo(() => {
    // 過(guò)濾是否存在默認(rèn)值的情況
    return [...colors, defaultValue || ""].filter(
      v => !!v && !["#"].includes(v),
    );
  }, [defaultValue, colors]);

  return (
    <div className="flex gap-2">
      {targetColors.map(color => {
        console.log("color--->", color);
        return (
          <div
            key={color}
            data-color={color}
            onClick={() => onChange?.(color)}
            className={classnames(
              "h-8 w-8 cursor-pointer flex justify-center items-center",
            )}
            style={{ backgroundColor: color }}>
            {value === color && (
              <Check theme="multi-color" size="24" fill="#fff" />
            )}
          </div>
        );
      })}
      <div
        className="h-8 w-8 cursor-pointer flex justify-center items-center border border-solid border-color-BGBrown text-color-BGBrown text-P4-Regular"
        onClick={() => setRandomId(nanoid())}>
        <Refresh theme="outline" size="18" fill="#333" />
      </div>
    </div>
  );
}

到此這篇關(guān)于React實(shí)現(xiàn)隨機(jī)顏色選擇器的示例代碼的文章就介紹到這了,更多相關(guān)React 隨機(jī)顏色選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評(píng)論