vue3-color-picker-gradient/build/js/app.419cf296.js

vue3,颜色选择器,线性（纯色）、渐变选择器,支持角度、多点渐变

(function(e){function o(o){for(var t,n,a=o[0],i=o[1],p=o[2],d=0,b=[];d<a.length;d++)n=a[d],Object.prototype.hasOwnProperty.call(c,n)&&c[n]&&b.push(c[n][0]),c[n]=0;for(t in i)Object.prototype.hasOwnProperty.call(i,t)&&(e[t]=i[t]);s&&s(o);while(b.length)b.shift()();return l.push.apply(l,p||[]),r()}function r(){for(var e,o=0;o<l.length;o++){for(var r=l[o],t=!0,a=1;a<r.length;a++){var i=r[a];0!==c[i]&&(t=!1)}t&&(l.splice(o--,1),e=n(n.s=r[0]))}return e}var t={},c={app:0},l=[];function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,o,r){n.o(e,o)||Object.defineProperty(e,o,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,o){if(1&o&&(e=n(e)),8&o)return e;if(4&o&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&o&&"string"!=typeof e)for(var t in e)n.d(r,t,function(o){return e[o]}.bind(null,t));return r},n.n=function(e){var o=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(o,"a",o),o},n.o=function(e,o){return Object.prototype.hasOwnProperty.call(e,o)},n.p="";var a=window["webpackJsonp"]=window["webpackJsonp"]||[],i=a.push.bind(a);a.push=o,a=a.slice();for(var p=0;p<a.length;p++)o(a[p]);var s=i;l.push([0,"chunk-vendors"]),r()})({0:function(e,o,r){e.exports=r("56d7")},1066:function(e,o,r){var t=r("24fb");o=t(!1),o.push([e.i,"#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;margin:60px 50px}.select{height:30px;width:150px;margin-bottom:30px}.color_poick{display:flex;justify-content:space-between;width:590px}.box_xxx{width:300px;height:300px}.box1{margin-left:50px}",""]),e.exports=o},"3a04":function(e,o,r){var t=r("24fb"),c=r("b7d1");o=t(!1),o.i(c),o.push([e.i,'.color_picker_wrapper[data-v-496fca66]{width:218px}.color_picker_wrapper .color_picker_box[data-v-496fca66]{box-shadow:0 0 16px 0 rgba(0,0,0,.16);border-radius:4px;background:#f7f8f9;padding:15px 10px}.color_picker_wrapper .color_picker_box[data-v-496fca66]  .hu-color-picker{box-shadow:none;border-radius:0;background:#f7f8f9;padding:0}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-496fca66]{display:block;display:flex;align-items:center}.color_picker_wrapper .color_picker_box .gcolor_deg .gcolor_deg_span[data-v-496fca66]{font-size:12px;margin-right:10px}.color_picker_wrapper .color_picker_box .gcolor_deg .number_input[data-v-496fca66]{min-width:20px;max-width:20px;float:none;order:1;margin-left:10px;margin-top:0;display:flex;align-items:center;text-align:center;color:#606266;font-size:12px;padding:3px;background-color:#fff;border:1px solid #dcdfe6;border-radius:4px}.color_picker_wrapper .color_picker_box .gcolor_deg .number_input[data-v-496fca66]:focus{border-color:#409eff;outline:0}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-496fca66]  .el-input-number__decrease,.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-496fca66]  .el-input-number__increase{display:none}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-496fca66]  .el-input--mini .el-input__inner{padding:0;width:100%!important;height:22px;line-height:22px}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-496fca66]  .el-slider{display:flex;flex:1}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-496fca66]  .el-slider__input{min-width:2em;max-width:2em;float:none;order:1;margin-left:10px;margin-top:0;display:flex;align-items:center}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-496fca66]  .el-slider__runway.show-input{margin-right:0;flex:1;order:0;height:3px}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-496fca66]  .el-slider__button{width:13px;height:13px;border-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.4)}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-496fca66]  .el-slider__bar{height:3px}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-496fca66]  .el-slider__button-wrapper{top:-17px}.color_picker_wrapper .color_picker_box .color_hd[data-v-496fca66]{margin-bottom:15px}.color_picker_wrapper .color_picker_box .color_hd_0[data-v-496fca66]{margin-bottom:0}.color_picker_wrapper .color_picker_box .title[data-v-496fca66]{font-size:16px;display:flex;justify-content:space-between}.color_picker_wrapper .color_picker_box .title .close_box[data-v-496fca66]{speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;color:#909399;width:26px;height:100%;font-size:21px;cursor:pointer}.color_picker_wrapper .color_picker_box .gcolor[data-v-496fca66]{position:relative;margin:10px 0 20px}.color_picker_wrapper .color_picker_box .gcolor_bar[data-v-496fca66]{position:relative;margin-top:3px;height:16px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJ0lEQVQoU2M8c/X2fwYkYKylgsxlYKSDgv///6O44ey1O6huoL0CAJgaKeXe+C99AAAAAElFTkSuQmCC") repeat;border-radius:2px}.color_picker_wrapper .color_picker_box .gcolor_bar_bg[data-v-496fca66]{position:absolute;left:0;right:0;top:0;bottom:0}.color_picker_wrapper .color_picker_box .gcolor_bar_pot_box[data-v-496fca66]{position:absolute;left:8px;top:0;bottom:0;z-index:1;width:calc(100% - 16px);pointer-events:none}.color_picker_wrapper .color_picker_box .gcolor_bar_pot[data-v-496fca66]{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);height:16px;width:12px;cursor:pointer;border:2px solid #fff}.color_picker_wrapper .color_picker_box .gcolor_bar_pot.on[data-v-496fca66]{z-index:2}.color_picker_wrapper .color_picker_box .gcolor_bar_pot.on[data-v-496fca66]:before{visibility:visible}.color_picker_wrapper .color_picker_box .gcolor_bar_pot[data-v-496fca66]:after{content:"";position:absolute;left:-3px;right:-3px;top:-3px;bottom:-3px;border:1px solid #999;border-radius:3px}.color_picker_wrapper .color_picker_box .gcolor_bar_pot[data-v-496fca66]:before{content:"";position:absolute;left:-4px;right:-4px;top:-4px;bottom:-4px;border:2px solid var(--hoverColor);visibility:hidden;z-index:1;border-radius:3px}',""]),e.exports=o},"4c9f":function(e,o,r){var t=r("1066");t.__esModule&&(t=t.default),"string"===typeof t&&(t=[[e.i,t,""]]),t.locals&&(e.exports=t.locals);var c=r("499e").default;c("56a435ef",t,!0,{sourceMap:!1,shadowMode:!1})},"56d7":function(e,o,r){"use strict";r.r(o);var t=r("7a23");const c={id:"app"},l={class:"color_poick"},n={style:{display:"flex"}};function a(e,o,r,a,i,p){const s=Object(t["resolveComponent"])("ColorPicker");return Object(t["openBlock"])(),Object(t["createElementBlock"])("div",c,[Object(t["createElementVNode"])("div",{class:"select",onClick:o[0]||(o[0]=(...e)=>a.showPicker&&a.showPicker(...e))},"展示选择器"),Object(t["createElementVNode"])("div",l,[Object(t["createVNode"])(s,{modelValue:e.isShowColorPicker,"onUpdate:modelValue":o[1]||(o[1]=o=>e.isShowColorPicker=o),type:"linear",onChangeColor:a.changeColor,onOnClose:a.onClosePicker,pDeg:90,pColor:e.pColor,pColors:e.pColors,showClose:!0,closeOnClickBody:!1},null,8,["modelValue","onChangeColor","onOnClose","pColor","pColors"]),Object(t["createVNode"])(s,{modelValue:e.isShowColorPicker1,"onUpdate:modelValue":o[2]||(o[2]=o=>e.isShowColorPicker1=o),type:"gradient",onChangeColor:a.changeColor1,onOnClose:a.onClosePicker1,pDeg:90,pColor:e.pColor,pColors:e.pColors,showClose:!0,closeOnClickBody:!1},null,8,["modelValue","onChangeColor","onOnClose","pColor","pColors"])]),Object(t["createElementVNode"])("div",n,[Object(t["createElementVNode"])("div",{class:"box_xxx",style:Object(t["normalizeStyle"])(e.style)},null,4),Object(t["createElementVNode"])("div",{class:"box_xxx box1",style:Object(t["normalizeStyle"])(e.style1)},null,4)])])}const i=e=>(Object(t["pushScopeId"])("data-v-496fca66"),e=e(),Object(t["popScopeId"])(),e),p={class:"color_picker_wrapper"},s={key:0,class:"title"},d={key:1,class:"gcolor"},b={key:0,class:"gcolor_deg"},u=i(()=>Object(t["createElementVNode"])("div",{class:"gcolor_deg_span"},"角度",-1)),g={class:"gcolor_bar",ref:"refColorBar"},f={class:"gcolor_bar_pot_box"},_=["onMousedown","onClick"],x={key:0,class:"gradient_box"},h={key:1,class:"linear"};function k(e,o,r,c,l,n){const a=Object(t["resolveComponent"])("Slider"),i=Object(t["resolveComponent"])("ColorPicker");return Object(t["withDirectives"])((Object(t["openBlock"])(),Object(t["createElementBlock"])("div",p,[Object(t["createElementVNode"])("div",{class:"color_picker_box",ref:"refBox",onClick:o[4]||(o[4]=Object(t["withModifiers"])(()=>{},["stop"]))},[Object(t["createElementVNode"])("div",{class:Object(t["normalizeClass"])(["color_hd",r.showClose||r.titleConfig.show||r.titleConfig.text?"":"color_hd_0"])},[!1!==r.titleConfig.show?(Object(t["openBlock"])(),Object(t["createElementBlock"])("div",s,[Object(t["createElementVNode"])("span",{style:Object(t["normalizeStyle"])(r.titleConfig.style||{})},Object(t["toDisplayString"])(r.titleConfig.text),5),r.showClose?(Object(t["openBlock"])(),Object(t["createElementBlock"])("span",{key:0,class:"close_box",onClick:o[0]||(o[0]=(...e)=>c.close&&c.close(...e))},"x")):Object(t["createCommentVNode"])("",!0)])):Object(t["createCommentVNode"])("",!0),"gradient"===r.type?(Object(t["openBlock"])(),Object(t["createElementBlock"])("div",d,[r.disabledColorDeg?Object(t["createCommentVNode"])("",!0):(Object(t["openBlock"])(),Object(t["createElementBlock"])("div",b,[u,Object(t["createVNode"])(a,{modelValue:e.deg,"onUpdate:modelValue":o[1]||(o[1]=o=>e.deg=o),min:0,max:360,"show-tooltip":!1},null,8,["modelValue"]),Object(t["withDirectives"])(Object(t["createElementVNode"])("input",{class:"number_input","onUpdate:modelValue":o[2]||(o[2]=o=>e.deg=o)},null,512),[[t["vModelText"],e.deg]])])),Object(t["createElementVNode"])("div",g,[Object(t["createElementVNode"])("div",{class:"gcolor_bar_bg",style:Object(t["normalizeStyle"])("background: "+c.barStyle),onClick:o[3]||(o[3]=(...e)=>c.handlePotBar&&c.handlePotBar(...e))},null,4),Object(t["createElementVNode"])("div",f,[(Object(t["openBlock"])(!0),Object(t["createElementBlock"])(t["Fragment"],null,Object(t["renderList"])(e.colors,(o,r)=>(Object(t["openBlock"])(),Object(t["createElementBlock"])("div",{class:Object(t["normalizeClass"])(["gcolor_bar_pot",{on:e.selectIndex===r}]),key:`${o.pst}_${r}`,style:Object(t["normalizeStyle"])({left:c.getBarPst(o.pst)}),onMousedown:e=>c.sliderPotDown(r),onClick:e=>c.clickGColorPot(r)},null,46,_))),128))])],512)])):Object(t["createCommentVNode"])("",!0)],2),"gradient"===r.type?(Object(t["openBlock"])(),Object(t["createElementBlock"])("div",x,[(Object(t["openBlock"])(!0),Object(t["createElementBlock"])(t["Fragment"],null,Object(t["renderList"])(e.colors,(o,r)=>(Object(t["openBlock"])(),Object(t["createElementBlock"])(t["Fragment"],{key:`${o.pst}_${r}`},[r===e.selectIndex?(Object(t["openBlock"])(),Object(t["createBlock"])(i,{key:0,theme:"light",color:o.color,"sucker-hide":!0,onChangeColor:c.changeColor},null,8,["color","onChangeColor"])):Object(t["createCommentVNode"])("",!0)],64))),128))])):(Object(t["openBlock"])(),Object(t["createElementBlock"])("div",h,[Object(t["createVNode"])(i,{theme:"light",color:e.color.color,"sucker-hide":!0,onChangeColor:c.changeColor},null,8,["color","onChangeColor"])]))],512)],512)),[[t["vShow"],r.modelValue]])}r("caad");var m=r("b4f0"),v=r("5bda"),C=r.n(v);function w(e){let o;if(Array.isArray(e))o=[],e.forEach(e=>{o.push(w(e))});else if("object"===typeof e&&null!==e){o={};for(const r in e)Object.hasOwnProperty.call(e,r)&&(o[r]=w(e[r]))}else o=e;return o}function y(e,o=2){const r=new RegExp(`^\\d+(?:\\.\\d{0,${o}})?`,"g");return e.match(r)?e.match(r):""}function O(e,o,r,c=!1){const l=Object(t["reactive"])({mouseStartPst:{},movePst:{x:0,y:0},pageX:0,pageY:0}),n=document.body;let a=!1;function i(){a=!1,l.mouseStartPst={},l.movePst.x=0,l.movePst.y=0}function p(){n.addEventListener("mousedown",d,c),n.addEventListener("mousemove",b,c),n.addEventListener("mouseup",u,c)}function s(){n.removeEventListener("mousedown",d,c),n.removeEventListener("mousemove",b,c),n.removeEventListener("mouseup",u,c)}function d(o){a=!0,l.mouseStartPst.x=o.pageX,l.mouseStartPst.y=o.pageY,l.dragEleDistPst={},"function"===typeof e&&e(o)}function b(e){a&&(l.movePst.x=e.pageX-l.mouseStartPst.x,l.movePst.y=e.pageY-l.mouseStartPst.y,l.pageX=e.pageX,l.pageY=e.pageY,"function"===typeof o&&o(e))}function u(e){a=!1,g(),"function"===typeof r&&r(e)}function g(){s()}function f(){p()}return{...Object(t["toRefs"])(l),clearDraggble:g,enableDraggle:f,resetDraggle:i}}var j=r("ea3b"),P=r.n(j),B=(r("9a84"),{name:"ColorPickerGradient",components:{ColorPicker:m["a"],Slider:P.a},props:{modelValue:{type:Boolean,default:!0},type:{type:String,default:"linear"},disabledColorDeg:{type:Boolean,default:!1},pDeg:{type:Number,default:90},pColor:{type:Object,default(){return{hex:"#000000",rgba:{r:0,g:0,b:0,a:1},color:"rgba(0,0,0,1)"}}},pColors:{type:Array,default(){return[{color:"rgba(255, 255, 255, 1)",hex:"#ffffff",rgba:{r:255,g:255,b:255,a:1},pst:100},{color:"rgba(0, 0, 0, 1)",hex:"#000000",rgba:{r:0,g:0,b:0,a:1},pst:0}]}},showClose:{type:Boolean,default:!0},closeOnClickBody:{type:Boolean,default:!1},titleConfig:{type:Object,default(){return{text:"颜色选择器",style:{}}}}},setup(e,{emit:o}){const{type:r,pColors:c,pDeg:l,pColor:n}=Object(t["toRefs"])(e),a=Object(t["reactive"])({refColorBar:null,refBox:null,color:n.value,deg:l.value,colors:c.value,selectIndex:0,startMovePst:0}),i=Object(t["computed"])(()=>{if(!a.colors)return"";const e=w(a.colors).sort((e,o)=>e.pst-o.pst).map(e=>`${e.color} ${y(String(e.pst)||0,5)}%`);return`linear-gradient(${a.deg}deg, ${e.join(",")});`}),{movePst:p,enableDraggle:s,resetDraggle:d}=O(m,j,v);function b(){if(u(),"gradient"===r.value){const e=w(a.colors).sort((e,o)=>e.pst-o.pst);a.selectIndex=a.colors.findIndex(o=>o.pst===e[0].pst),Object(t["nextTick"])(()=>{E({style:i.value})})}else E({color:w(a.color)})}function u(){"gradient"===r.value&&window.addEventListener("keyup",_),e.closeOnClickBody&&window.addEventListener("click",f)}function g(){"gradient"===r.value&&window.removeEventListener("keyup",_),e.closeOnClickBody&&window.removeEventListener("click",f)}function f(){o("update:modelValue",!1),o("onClose")}function _(e){[8,46].includes(e.keyCode)&&x()}function x(){2!==a.colors.length&&(a.colors.splice(a.selectIndex,1),b())}function h(e){const o=a.refColorBar.getBoundingClientRect(),r=o.left,t=e.pageX-r;console.log(w(a.colors));const c=w(a.colors).sort((e,o)=>e.pst-o.pst).map(e=>e.hex),l=new C.a(0,o.width,c),n=l.getColor(t).toHexString(),i=l.getColor(t).toRGBAString(),p=100*t/o.width;a.colors.push({color:i,hex:n,pst:p}),a.selectIndex=a.colors.length-1}function k(e){V(e),s()}function m(){a.startMovePst=a.colors[a.selectIndex].pst}function v(){d()}function j(){var e;const o=null===(e=a.refColorBar)||void 0===e?void 0:e.getBoundingClientRect().width;let r=(a.startMovePst*o/100+p.value.x)/o;r>1?r=1:r<0&&(r=0),a.colors[a.selectIndex].pst=Math.round(100*r)}function P(e){return`calc(${e}% - 8px)`}function B(e){const o=e.rgba,t=e.hex;if("linear"===r.value){const e=`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`;a.color={rgba:o,hex:t,color:e},E({color:w(a.color)})}else S(e)}function E({style:e,colors:r=w(a.colors),color:t=w(a.color),deg:c=a.deg}){o("changeColor",{style:e,colors:r,color:t,deg:c})}function S(e){const o=e.rgba;a.colors[a.selectIndex].color=`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`,a.colors[a.selectIndex].hex=e.hex,a.colors[a.selectIndex].rgba=e.rgba}function V(e){a.selectIndex!==e&&(a.selectIndex=e)}function A(){f()}return Object(t["onUnmounted"])(()=>{o("onClose"),g()}),Object(t["onMounted"])(()=>{b()}),Object(t["watch"])(i,e=>{"linear"!==r.value&&E({style:e})}),Object(t["watch"])(n,e=>{a.color=w(e)},{deep:!0}),Object(t["watch"])(c,e=>{a.selectIndex>=e.length&&(a.selectIndex=e.length-1),a.colors=w(e)},{deep:!0}),{...Object(t["toRefs"])(a),changeColor:B,getBarPst:P,barStyle:i,clickGColorPot:V,sliderPotDown:k,handlePotBar:h,close:A}}}),E=(r("f8b2"),r("6b0d")),S=r.n(E);const V=S()(B,[["render",k],["__scopeId","data-v-496fca66"]]);var A=V,N={name:"App",components:{ColorPicker:A},setup(){const e=Object(t["reactive"])({isShowColorPicker:!0,isShowColorPicker1:!0,style:"",style1:"",titleConfig:{show:!0,text:"颜色选择器"},pDeg:60,pColor:{hex:"#194d33",hex8:"#194d33",hsl:{h:150,s:.5,l:.2,a:1},hsv:{h:150,s:.66,v:.3,a:1},rgba:{r:25,g:77,b:51,a:1},a:1,color:"rgba(0,0,0,1)"},pColors:[{color:"rgba(255, 255, 255, 1)",hex:"#ffffff",rgba:{r:255,g:255,b:255,a:1},pst:100},{color:"rgba(0, 0, 0, 1)",hex:"#000000",rgba:{r:0,g:0,b:0,a:1},pst:0}]});function o({style:o,colors:r,deg:t,color:c}){console.log(o,r,t,c),e.style="background: "+c.color}function r(){e.isShowColorPicker=!0,e.isShowColorPicker1=!0}function c(){}function l({style:o,colors:r,deg:t,color:c}){console.log(o,r,t,c),e.style1="background: "+o}function n(){e.isShowColorPicker1=!0}function a(){}return{...Object(t["toRefs"])(e),changeColor:o,showPicker:r,onClosePicker:c,changeColor1:l,showPicker1:n,onClosePicker1:a}}};r("b8c2");const D=S()(N,[["render",a]]);var I=D;Object(t["createApp"])(I).mount("#app")},"6b48":function(e,o,r){var t=r("3a04");t.__esModule&&(t=t.default),"string"===typeof t&&(t=[[e.i,t,""]]),t.locals&&(e.exports=t.locals);var c=r("499e").default;c("50b19eee",t,!0,{sourceMap:!1,shadowMode:!1})},b8c2:function(e,o,r){"use strict";r("4c9f")},f8b2:function(e,o,r){"use strict";r("6b48")}});
//# sourceMappingURL=app.419cf296.js.map