fix(colorpicker): 优化游标显示效果 (#1863)

src/css/layui.css

@@ -1551,10 +1551,10 @@ body .layui-util-face  .layui-layer-content{padding:0; background-color:#fff; co
 
 .layui-colorpicker-main{position: absolute; left: -999999px; top: -999999px; z-index: 77777777; width: 280px; margin: 5px 0; padding: 7px; background: #FFF; border: 1px solid #d2d2d2; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12);}
 .layui-colorpicker-main-wrapper{height: 180px; position: relative;}
-.layui-colorpicker-basis{width: 260px; height: 100%; position: relative;}
+.layui-colorpicker-basis{width: 260px; height: 100%; position: relative; overflow: hidden;}
 .layui-colorpicker-basis-white{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(90deg, #FFF, hsla(0,0%,100%,0));}
 .layui-colorpicker-basis-black{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(0deg, #000, transparent);}
-.layui-colorpicker-basis-cursor{width: 10px; height: 10px; border: 1px solid #FFF; border-radius: 50%; position: absolute; top: -3px; right: -3px; cursor: pointer;}
+.layui-colorpicker-basis-cursor{width: 10px; height: 10px; border: 1px solid #FFF; border-radius: 50%; position: absolute; top: 0%; right: 100%; cursor: pointer; transform: translate(-50%,-50%);}
 .layui-colorpicker-side{position: absolute; top: 0; right: 0; width: 12px; height: 100%; background: linear-gradient(#F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);}
 .layui-colorpicker-side-slider{width: 100%; height: 5px; box-shadow: 0 0 1px #888888; box-sizing: border-box; background: #FFF; border-radius: 1px; border: 1px solid #f0f0f0; cursor: pointer; position: absolute; left: 0;}
 .layui-colorpicker-main-alpha{display: none; height: 12px; margin-top: 7px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}
@@ -1566,7 +1566,7 @@ body .layui-util-face  .layui-layer-content{padding:0; background-color:#fff; co
 .layui-colorpicker-pre-isalpha{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}
 .layui-colorpicker-pre.layui-this{box-shadow: 0 0 3px 2px rgba(0,0,0,.15);}
 .layui-colorpicker-pre > div{height: 100%; border-radius: 2px;}
-.layui-colorpicker-main-input{text-align: right; padding-top: 7px; position: relative; z-index: 10;}
+.layui-colorpicker-main-input{text-align: right; padding-top: 7px;}
 .layui-colorpicker-main-input .layui-btn-container .layui-btn{margin: 0 0 0 10px;}
 .layui-colorpicker-main-input div.layui-inline{float: left; font-size: 14px;}
 .layui-colorpicker-main-input input.layui-input{width: 168px; height: 30px; color: #5F5F5F; padding-left: 5px;}

src/modules/colorpicker.js

@@ -488,14 +488,14 @@ layui.define(['jquery', 'lay'], function(exports){
       var move = function(e){
         var top = oldtop + (e.clientY - oldy)
         ,left = oldleft + (e.clientX - oldx)
-        ,maxh = basis[0].offsetHeight - 3
+        ,maxh = basis[0].offsetHeight
-        ,maxw = basis[0].offsetWidth - 3;
+        ,maxw = basis[0].offsetWidth;
-        if(top < -3)top = -3;
+        if(top < 0)top = 0;
         if(top > maxh)top = maxh;
-        if(left < -3)left = -3;
+        if(left < 0)left = 0;
         if(left > maxw)left = maxw;
-        var s = (left + 3)/260*100
+        var s = left/260*100
-        ,b = 100 - (top + 3)/180*100;
+        ,b = 100 - top/180*100;
         _b = b;
         _s = s;
         change(_h, s, b, _a); 
@@ -507,14 +507,14 @@ layui.define(['jquery', 'lay'], function(exports){
     });
     
     basis.on('mousedown', function(e){
-      var top = e.clientY - $(this).offset().top - 3 + $win.scrollTop()
+      var top = e.clientY - $(this).offset().top + $win.scrollTop()
-      ,left = e.clientX - $(this).offset().left - 3 + $win.scrollLeft()
+      ,left = e.clientX - $(this).offset().left + $win.scrollLeft()
-      if(top < -3)top = -3;
+      if(top < 0)top = 0;
-      if(top > this.offsetHeight - 3)top = this.offsetHeight - 3;
+      if(top > this.offsetHeight)top = this.offsetHeight;
-      if(left < -3)left = -3;
+      if(left < 0)left = 0;
-      if(left > this.offsetWidth - 3)left = this.offsetWidth - 3;
+      if(left > this.offsetWidth)left = this.offsetWidth;
-      var s = (left + 3)/260*100
+      var s = left/260*100
-      ,b = 100 - (top + 3)/180*100;
+      ,b = 100 - top/180*100;
       _b = b;
       _s = s;
       change(_h, s, b, _a); 
@@ -602,16 +602,17 @@ layui.define(['jquery', 'lay'], function(exports){
     var hex = HSBToHEX({h:h, s:100, b:100});
     var color = HSBToHEX({h:h, s:s, b:b});
     var sidetop = h/360*180;
-    var top = 180 - b/100*180 - 3;
+    var top = 180 - b/100*180;
-    var left = s/100*260 - 3;
+    var left = s/100*260;
+    var basisElem = that.elemPicker.find('.' + PICKER_BASIS)[0];
     
     that.elemPicker.find('.' + PICKER_SIDE_SLIDER).css("top", sidetop); //滑块的top
-    that.elemPicker.find('.' + PICKER_BASIS)[0].style.background = '#' + hex; //颜色选择器的背景
+    basisElem.style.background = '#' + hex; //颜色选择器的背景
     
     //选择器的top left
     that.elemPicker.find('.' + PICKER_BASIS_CUR).css({
-      "top": top
+      "top": top / basisElem.offsetHeight * 100 + '%',
-      ,"left": left
+      "left": left / basisElem.offsetWidth * 100 + '%' 
     });
     
     // if(type === 'change') return;