VUE 自定义取色器组件的实现

本文主要介绍了VUE 自定义取色器组件的实现，分享给大家，具体如下：

效果：

功能：

1。点击色块中任何一点，色块中的正方形显示该点的颜色。

2。点击色块上方的颜色圆点，色块选中该颜色所在的位置，并在正方形中显示相应颜色。

3。上方圆点如果不是rgb格式，需要转换。

4。组件的大小从调用它的页面中传过去。

组件代码(CanvasColor2.vue)：

调用：

颜色从十六进制转换成RGB格式：utils.js

String.prototype.colorRgb = function () {
    // 16进制颜色值的正则
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    // 把颜色值变成小写
    var color = this.toLowerCase();
    if (reg.test(color)) {
        // 如果只有三位的值，需变成六位，如：#fff => #ffffff
        if (color.length === 4) {
            var colorNew = "#";
            for (var i = 1; i < 4; i += 1) {
                colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
            }
            color = colorNew;
        }
        // 处理六位的颜色值，转为RGB
        var colorChange = [];
        for (var j = 1; j < 7; j += 2) {
            colorChange.push(parseInt("0x" + color.slice(j, j + 2)));
        }
        return "RGB(" + colorChange.join(",") + ")";
    } else {
        return color;
    }
};

注意：

组件中最外层的div的位置设为相对位置，页面中的坐标设置都是相对于最外层div的，所以在设置点击位置的时候要减去最外层div的距离顶部的高度。即

var pos = {
     x: e.clientX,
     y: e.clientY-outDiv.offsetTop//当该组件整体为相对位置时，y轴的坐标是当前点的位置-最外层距离顶点的高度
}

到此这篇关于VUE 自定义取色器组件的实现的文章就介绍到这了,更多相关VUE 取色器 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！