更新记录

1.0.1（2024-03-07）

• 修复部分平台初始化失败问题
• 新增web端兼容（大部分浏览器）

1.0.0（2023-11-29）

• 本插件基于acr-slider开发
• 主要提供此类组件思路，具体组件还是需要根据具体业务修改

平台兼容性

参数配置

使用示例

<ColorSlider @change="change">
  <view>颜色选择器<view/>
<ColorSlider/>

const change = (e:string) => {
    const color = e
}

• 如需对rgb与hex颜色进行转换，可使用以下方法

    /* _____________⬇️hex转rgba⬇️_____________ */

    export const HexToRgba = (color: string, opc = 99) => {
        const str = color.substring(1)
        let arr: number[];
        if (str.length == 6) {
            arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)]
        } else if (str.length == 3) {
            arr = str.split('').map(d => parseInt(d.repeat(2), 16))
        } else {
            throw ('hex颜色值错误')
        }
        return opc != 99 ? `rgba(${arr[0]},${arr[1]},${arr[2]},${opc})` : `rgb(${arr[0]},${arr[1]},${arr[2]})`
        }

/* _____________⬇️rgb转hex⬇️_____________ */

    export const RgbToHex = (rgb: string) => {
        const arr = rgb.replace(/[^0-9,]/g, '').split(',')
        if (arr.length !== 3) {
            throw ('rgb颜色值错误')
        }
        let hexStr = (+arr[0] << 16 | +arr[1] << 8 | +arr[2]).toString(16)
        if (hexStr.length < 6) {
            hexStr = `0${new Array((6 - hexStr.length)).join("0")}${hexStr}`;
        }
        return `#${hexStr}`
    }

多端支持请自行测试

可扫码进小程序体验 主要针对小程序端实现

有问题咨询本人，不限于创意需求，本插件仅为基础版本

如果对您有帮助 请记得点点star