当前位置：首页 > news >正文

iro.js 非常方便好用的 Web 颜色选择器

news 来源：原创 2025/5/7 7:17:39

在这里插入图片描述

iro.js 非常方便好用的 Web 颜色选择器

github：https://github.com/jaames/iro.js
例子：https://codepen.io/jaames/pen/XWbgwYm

一、vue 中使用

1. 安装组件

yarn add @jaames/iro

2. 在组件中使用

<script setup lang="ts">
import iro from "@jaames/iro";onMounted(() => {const colorPicker = new iro.ColorPicker('.color-picker', {width: 100,color: bgColor.value,layoutDirection: "horizontal",layout: [{component: iro.ui.Wheel,},{component: iro.ui.Box,},{component: iro.ui.Slider,options: {sliderType: 'hue'}},{component: iro.ui.Slider,options: {sliderType: 'saturation'}},{component: iro.ui.Slider,options: {sliderType: 'value'}},{component: iro.ui.Slider,options: {sliderType: 'alpha'}},]})colorPicker.on('color:change', color => {bgColor.value = color.hexStringconsole.log(bgColor.value)})
})
</script>
<template><div ref="refColorPicker" class="color-picker"></div>
</template>

3. 结果

在这里插入图片描述

二、普通 html 文件中使用

1. 下载 iro.js 原文件

下载后，放到你的项目目录中，自己能找到就行
https://github.com/jaames/iro.js/raw/refs/heads/master/dist/iro.min.js

2. 引用它

  <script src="./iro.min.js"></script>

在这里插入图片描述

3. 使用它

在 html 中预置一个 .color-picker 的 div，这个名字随便起，只要在使用的时候对应上就可以。
iro 组件会在这个元素中生成。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Drop and Show</title><link rel="shortcut icon" href="favicon.png" type="image/png"><link rel="stylesheet" href="drop.css?v=20250321171641"><script src="./iro.min.js"></script>
</head>
<body >
<div class="header"><div class="color-picker"></div>
</div>
</body>
</html><script>
/**=======================================*    COLOR PICKER=======================================*/let bgColor = localStorage.getItem('bg-color') || "rgba(0,0,0,0.98)"$('.container').style.backgroundColor = bgColorconst colorPicker = new iro.ColorPicker('.color-picker', {width: 50,color: bgColor,layoutDirection: "horizontal",})colorPicker.on('color:change', color => {localStorage.setItem('bg-color', color.hexString)// 在颜色变化的时候，将这个颜色应用到了 .container 中$('.container').style.backgroundColor = color.hexString$('.modal').style.backgroundColor = color.hexString})
</script>