如何使用比较冷门的灯光调光器（iro.js）

相信大家在一些物联网设备链接的或者一些智能控制的项目中或许会遇到灯光的色温的调试，那么这个可能就需要一个插件来进行配合使用了。下面来说一下这款小众的插件------https://iro.js.org/

本人也是根据B站找到的唯一视频进行编写总结的。下面附上html代码：

   //此代码是模拟的一个灯泡的开关以及颜色的调整
 <div class="container">
        <div class="bulb_container">
            <div class="wire"></div>
            <div class="light">
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <div class="settings">
        <div class="toggle on" id="toggle"></div>
            <h1 class="kaiguan">开关</h1>
            <div class="picker" id="picker"></div>
    </div>

接下来是比较繁琐的css样式：

        :root{
            --light-color:#fff;
            --toggle-color:#828282;
            --toggle-head-color:#dedede;
        }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            width: 100%;
            height: 100vh;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
        }
        .bulb_container{
            width: 100%;
            background: #222;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .settings{
            display: none;
            right: 60px;
            background: transparent;
            z-index: 100;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 100px;
        }
        .light{
            position: relative;
            width: 100px;
            height: 100px;
            background: var(--light-color);
            border-radius: 50%;
            z-index: 2;
        }
        .kaiguan{
            position: absolute;
            top: 70px;
            right: 120px;
            font-weight: 600;
            font-size: 30px;
            font-family: cursive;
            color: white;
            text-align: center;
            margin-bottom: 15px;
        }
        .light::before{
            position: absolute;
            content: "";
            width: 35px;
            height: 80px;
            background: var(--light-color);
            border-radius: 10%;
            left: 31%;
            top: -50px;
            border-top: 30px solid black;
        }
        .light span:nth-child(1){
            position: absolute;
            width: 30px;
            height: 30px;
            background: transparent;
            box-shadow: 20px 20px 0 10px var(--light-color);
            border-bottom-right-radius: 40px;
            transform: rotate(340deg);
            top: -16px;
            left: 5px;
        }
        .light span:nth-child(2){
            position: absolute;
            width: 30px;
            height: 30px;
            background: transparent;
            box-shadow: 20px 20px 0 10px var(--light-color);
            border-bottom-right-radius: 40px;
            transform: rotate(110deg);
            top: -16px;
            right: 8px;
        }
        .wire{
            position: absolute;
            width: 4px;
            height: 400px;
            background: #000;
            top: -25px;
            z-index: 1;
            background: #8f8e8e;
        }
        .light::after{
            position: absolute;
            content: "";
            width: 140px;
            height: 140px;
            background: var(--light-color);
            border-radius: 50%;
            left: 7%;
            top: 60%;
            filter: blur(40px);
            transform: translate(-18%,-40%);
            box-shadow: 0 0 10px var(--light-color),
                        0 0 30px var(--light-color),
                        0 0 60px var(--light-color),
                        0 0 120px var(--light-color),
                        0 0 200px var(--light-color);
        }
        .toggle{
            position: absolute;
            top: 80px;
            right: 100px;
            width: 35px;
            height: 17px;
            border-radius: 10px;
            background: var(--light-color);
            margin: 30px;
            cursor: pointer;
        }
        .toggle::after{
            position: absolute;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            left: 0;
            transition: 0.7s;
            background:var(--toggle-head-color);
            content: "";
        }
       .toggle.on{
            --toggle-color:#76343d;
            --toggle-head-color:red;
       }
       .toggle.on::after{
         left: 50% !important;
       }
       .picker{
        position: absolute;
        top: 300px;
        right: 100px;
       }

最后附上最重要的js代码

先引入：

<scriptsrc="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>

        var switchOn = true;
        var blubOn = true;
        var colorValue = "#fff"

        var colorPicker = new iro.ColorPicker('#picker',{
            width:200,
            color: this.colorValue,
        });
        // 监听颜色选择器的color:change事件
        colorPicker.on("color:change",function(color){
            colorValue = color.hexString;
            if(blubOn){
                changeBlubColor(colorValue)
            }
        })

        var toggle = document.getElementById("toggle")
        toggle.onclick = function (){ 
            if(!switchOn){
                toggle.classList.add("on")
            }else {
                toggle.classList.remove("on")
            }
            switchOn = !switchOn;
            blubOn = !blubOn;
            if(blubOn){
                changeBlubColor(colorValue)
            }else {
                changeBlubColor("#5a5a5a")
            }
        }

        function changeBlubColor(color){
            document.documentElement.style.setProperty('--light-color',color)

        }

如果需要在vue框架中使用的话首先需要下载：

$ npm install @jaames/iro --save

接下来需要在你所需要的页面进行引入：

import iro from'@jaames/iro';

然后在vue项目中进行：

大概就是这样子啦。其他的大家可以浏览官网看看