vue2-color-picker-gradient/build/js/app.043fc04b.js

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

(function(e){function o(o){for(var r,s,c=o[0],a=o[1],n=o[2],d=0,h=[];d<c.length;d++)s=c[d],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&h.push(i[s][0]),i[s]=0;for(r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r]);p&&p(o);while(h.length)h.shift()();return l.push.apply(l,n||[]),t()}function t(){for(var e,o=0;o<l.length;o++){for(var t=l[o],r=!0,c=1;c<t.length;c++){var a=t[c];0!==i[a]&&(r=!1)}r&&(l.splice(o--,1),e=s(s.s=t[0]))}return e}var r={},i={app:0},l=[];function s(o){if(r[o])return r[o].exports;var t=r[o]={i:o,l:!1,exports:{}};return e[o].call(t.exports,t,t.exports,s),t.l=!0,t.exports}s.m=e,s.c=r,s.d=function(e,o,t){s.o(e,o)||Object.defineProperty(e,o,{enumerable:!0,get:t})},s.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,o){if(1&o&&(e=s(e)),8&o)return e;if(4&o&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(s.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&o&&"string"!=typeof e)for(var r in e)s.d(t,r,function(o){return e[o]}.bind(null,r));return t},s.n=function(e){var o=e&&e.__esModule?function(){return e["default"]}:function(){return e};return s.d(o,"a",o),o},s.o=function(e,o){return Object.prototype.hasOwnProperty.call(e,o)},s.p="";var c=window["webpackJsonp"]=window["webpackJsonp"]||[],a=c.push.bind(c);c.push=o,c=c.slice();for(var n=0;n<c.length;n++)o(c[n]);var p=a;l.push([0,"chunk-vendors"]),t()})({0:function(e,o,t){e.exports=t("56d7")},"0aea":function(e,o,t){var r=t("24fb");o=r(!1),o.push([e.i,"#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin:60px 50px}.select{height:30px;width:150px;text-align:left}.color_poick{display:flex;justify-content:space-between;width:590px}.box_xxx{width:300px;height:300px}.box1{margin-left:50px}",""]),e.exports=o},"104d":function(e,o,t){"use strict";t("6e25")},"511c":function(e,o,t){var r=t("24fb");o=r(!1),o.push([e.i,'.color_picker_wrapper[data-v-ecb812c6]{width:240px}.color_picker_wrapper .color_picker_box[data-v-ecb812c6]{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-ecb812c6]  .hu-color-picker{box-shadow:none;border-radius:0;background:#f7f8f9;padding:0}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-ecb812c6]{display:block;display:flex;align-items:center}.color_picker_wrapper .color_picker_box .gcolor_deg .gcolor_deg_span[data-v-ecb812c6]{font-size:12px;margin-right:10px}.color_picker_wrapper .color_picker_box .gcolor_deg .number_input[data-v-ecb812c6]{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-ecb812c6]:focus{border-color:#409eff;outline:0}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-ecb812c6]  .el-input-number__decrease,.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-ecb812c6]  .el-input-number__increase{display:none}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-ecb812c6]  .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-ecb812c6]  .el-slider{display:flex;flex:1}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-ecb812c6]  .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-ecb812c6]  .el-slider__runway.show-input{margin-right:0;flex:1;order:0;height:3px}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-ecb812c6]  .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-ecb812c6]  .el-slider__bar{height:3px}.color_picker_wrapper .color_picker_box .gcolor_deg[data-v-ecb812c6]  .el-slider__button-wrapper{top:-17px}.color_picker_wrapper .color_picker_box .color_hd[data-v-ecb812c6]{margin-bottom:15px}.color_picker_wrapper .color_picker_box .color_hd_0[data-v-ecb812c6]{margin-bottom:0}.color_picker_wrapper .color_picker_box .title[data-v-ecb812c6]{font-size:16px;display:flex;justify-content:space-between;padding-left:4px;color:#606266}.color_picker_wrapper .color_picker_box .title .close_box[data-v-ecb812c6]{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:20px;height:100%;font-size:21px;cursor:pointer}.color_picker_wrapper .color_picker_box .gcolor[data-v-ecb812c6]{position:relative;margin:10px 0 20px}.color_picker_wrapper .color_picker_box .gcolor_bar[data-v-ecb812c6]{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-ecb812c6]{position:absolute;left:0;right:0;top:0;bottom:0}.color_picker_wrapper .color_picker_box .gcolor_bar_pot_box[data-v-ecb812c6]{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-ecb812c6]{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-ecb812c6]{z-index:2}.color_picker_wrapper .color_picker_box .gcolor_bar_pot.on[data-v-ecb812c6]:before{visibility:visible}.color_picker_wrapper .color_picker_box .gcolor_bar_pot[data-v-ecb812c6]: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-ecb812c6]: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},"56d7":function(e,o,t){"use strict";t.r(o);var r=t("2b0e"),i=function(){var e=this,o=e._self._c;return o("div",{attrs:{id:"app"}},[o("div",{staticClass:"select",on:{click:e.showPicker}},[e._v("展示选择器")]),o("div",{staticClass:"color_poick"},[o("ColorPicker",{attrs:{type:"linear",pDeg:90,pColor:e.pColor,pColors:e.pColors,showClose:!0,closeOnClickBody:!1},on:{changeColor:e.changeColor,onClose:e.onClosePicker},model:{value:e.isShowColorPicker,callback:function(o){e.isShowColorPicker=o},expression:"isShowColorPicker"}}),o("ColorPicker",{attrs:{type:"gradient",pDeg:90,pColor:e.pColor,pColors:e.pColors,showClose:!0,closeOnClickBody:!1},on:{changeColor:e.changeColor1,onClose:e.onClosePicker1},model:{value:e.isShowColorPicker1,callback:function(o){e.isShowColorPicker1=o},expression:"isShowColorPicker1"}})],1),o("div",{staticStyle:{display:"flex"}},[o("div",{staticClass:"box_xxx",style:e.style}),o("div",{staticClass:"box_xxx box1",style:e.style1})])])},l=[],s=function(){var e=this,o=e._self._c;return o("div",{directives:[{name:"show",rawName:"v-show",value:e.value,expression:"value"}],ref:"refBox",staticClass:"color_picker_wrapper"},[o("div",{staticClass:"color_picker_box",on:{mousedown:function(e){e.stopPropagation()}}},[o("div",{staticClass:"color_hd",class:e.showClose||e.titleConfig.show||e.titleConfig.text?"":"color_hd_0"},[!1!==e.titleConfig.show?o("div",{staticClass:"title"},[o("span",{style:e.titleConfig.style||{}},[e._v(e._s(e.titleConfig.text))]),e.showClose?o("span",{staticClass:"close_box",on:{click:e.handleClosePicker}},[e._v("x")]):e._e()]):e._e(),"gradient"===e.type?o("div",{staticClass:"gcolor"},[e.disabledColorDeg?e._e():o("div",{staticClass:"gcolor_deg"},[o("div",{staticClass:"gcolor_deg_span"},[e._v("角度")]),o("Slider",{attrs:{min:0,max:360,"show-tooltip":!1},model:{value:e.deg,callback:function(o){e.deg=o},expression:"deg"}}),o("input",{directives:[{name:"model",rawName:"v-model",value:e.deg,expression:"deg"}],staticClass:"number_input",domProps:{value:e.deg},on:{input:function(o){o.target.composing||(e.deg=o.target.value)}}})],1),o("div",{ref:"refColorBar",staticClass:"gcolor_bar"},[o("div",{staticClass:"gcolor_bar_bg",style:"background:"+e.barStyle,on:{click:e.handlePotBar}}),o("div",{staticClass:"gcolor_bar_pot_box"},e._l(e.colors,(function(t,r){return o("div",{key:`${t.pst}_${r}`,staticClass:"gcolor_bar_pot",class:{on:e.selectIndex===r},style:{left:e.getBarPst(t.pst)},on:{mousedown:function(o){return e.sliderPotDown(r,o)},click:function(o){return e.clickGColorPot(r)}}})})),0)])]):e._e()]),"gradient"===e.type?o("div",{staticClass:"gradient_box"},[e._l(e.colors,(function(t,r){return[r===e.selectIndex?o("SketchColorPicker",{key:`${t.pst}_${r}`,attrs:{theme:"light",value:t.color,"sucker-hide":!0},on:{input:e.changeColor}}):e._e()]}))],2):o("div",{staticClass:"linear"},[o("SketchColorPicker",{attrs:{theme:"light",value:e.color.color,"sucker-hide":!0},on:{input:e.changeColor}})],1)])])},c=[],a=(t("caad"),t("5bda")),n=t.n(a);function p(e){let o;if(Array.isArray(e))o=[],e.forEach(e=>{o.push(p(e))});else if("object"===typeof e&&null!==e){o={};for(const t in e)Object.hasOwnProperty.call(e,t)&&(o[t]=p(e[t]))}else o=e;return o}function d(e,o=2){const t=new RegExp(`^\\d+(?:\\.\\d{0,${o}})?`,"g");return e.match(t)?e.match(t):""}var h=t("20cf"),g=t.n(h),u=t("c345");t("b5c2");const b=document.body;let _=!1;var x={name:"ColorPickerGradient",components:{SketchColorPicker:u["Sketch"],Slider:g.a},props:{value:{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:"#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:{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{show:!0,text:"颜色选择器",style:{}}}}},data(){return{color:{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)"},deg:0,colors:[],selectIndex:0,startMovePst:0,mouseStartPst:{x:0,y:0},movePst:{x:0,y:0},pageX:0,pageY:0}},created(){this.deg=this.pDeg,this.colors=this.pColors,"string"===typeof this.pColor?-1!==this.pColor.indexOf("#")?this.color.hex=this.pColor:this.color.color=this.pColor:this.color=this.pColor,this.pColors.length<2&&this.warn("The pColors default length cannot be less than 2")},computed:{barStyle(){if(!this.colors)return"";const e=p(this.colors).sort((e,o)=>e.pst-o.pst).map(e=>`${e.color} ${d(String(e.pst)||"",5)}%`);return`linear-gradient(${this.deg}deg, ${e.join(",")});`}},mounted(){this.initColors(),this.value&&this.bindEvents()},methods:{initColors(){if("gradient"===this.type){const e=p(this.colors).sort((e,o)=>e.pst-o.pst);this.selectIndex=this.colors.findIndex(o=>o.pst===e[0].pst),this.$nextTick(()=>{this.emitColorChange({style:this.barStyle})})}else this.emitColorChange({color:p(this.color)})},bindEvents(){"gradient"===this.type&&window.addEventListener("keyup",this.handleKeyup),this.closeOnClickBody&&window.addEventListener("mousedown",this.handleClosePicker)},bindEventsDoc(e=!1){b.addEventListener("mousemove",this.handleEleMouseMove,e),b.addEventListener("mouseup",this.handleEleMouseUp,e)},unbindEvents(){"gradient"===this.type&&window.removeEventListener("keyup",this.handleKeyup),this.unbindEventsDoc(),this.closeOnClickBody&&window.removeEventListener("mousedown",this.handleClosePicker)},unbindEventsDoc(e=!1){b.removeEventListener("mousemove",this.handleEleMouseMove,e),b.removeEventListener("mouseup",this.handleEleMouseUp,e)},handleEleMouseMove(e){_&&(this.movePst.x=e.pageX-this.mouseStartPst.x,this.movePst.y=e.pageY-this.mouseStartPst.y,this.pageX=e.pageX,this.pageY=e.pageY,this.sliderMove(e))},handleEleMouseUp(e){_=!1,this.sliderDone(e)},resetDraggle(){_=!1,this.mouseStartPst={x:0,y:0},this.movePst.x=0,this.movePst.y=0,this.unbindEventsDoc()},handleClosePicker(){this.$emit("input",!1),this.$emit("onClose")},handleKeyup(e){[8,46].includes(e.keyCode)&&this.deleteColorPot()},deleteColorPot(){2!==this.colors.length&&(this.colors.splice(this.selectIndex,1),this.initColors())},handlePotBar(e){const o=this.$refs.refColorBar.getBoundingClientRect(),t=o.left,r=e.pageX-t,i=p(this.colors).sort((e,o)=>e.pst-o.pst).map(e=>e.hex),l=new n.a(0,o.width,i),s=l.getColor(r).toHexString(),c=l.getColor(r).toRGBAString(),a=100*r/o.width;this.colors.push({color:c,rgba:c,hex:s,pst:a}),this.selectIndex=this.colors.length-1},sliderPotDown(e,o){this.bindEventsDoc();const t=o;this.clickGColorPot(e),_=!0,this.mouseStartPst.x=t.pageX,this.mouseStartPst.y=t.pageY,this.sliderStart(t)},sliderStart(){this.startMovePst=this.colors[this.selectIndex].pst},sliderMove(){var e;const o=null===(e=this.$refs.refColorBar)||void 0===e?void 0:e.getBoundingClientRect().width;let t=(this.startMovePst*o/100+this.movePst.x)/o;t>1?t=1:t<0&&(t=0),this.colors[this.selectIndex].pst=Math.round(100*t)},sliderDone(){this.resetDraggle()},getBarPst(e){return`calc(${e}% - 8px)`},changeColor(e){const o=e.rgba,t=e.hex;if("linear"===this.type){const e=`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`;this.color={rgba:o,hex:t,color:e},this.emitColorChange({color:p(this.color)})}else this.handleGradientColorChange(e)},emitColorChange({style:e,colors:o=p(this.colors),color:t=p(this.color),deg:r=this.deg}){this.$emit("changeColor",{style:e,colors:o,color:t,deg:r})},handleGradientColorChange(e){const o=e.rgba;this.colors[this.selectIndex].color=`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`,this.colors[this.selectIndex].hex=e.hex,this.colors[this.selectIndex].rgba=e.rgba},clickGColorPot(e){this.selectIndex!==e&&(this.selectIndex=e)},warn(e){this.$nextTick(()=>{console.error(e)})}},watch:{value:{handler(e){e?this.bindEvents():(this.unbindEvents(),this.unbindEventsDoc())},deep:!0},barStyle:{handler(e){"linear"!==this.type&&this.emitColorChange({style:e})},deep:!0},pColor:{handler(e){this.color=p(e)},deep:!0},pColors:{handler(e){this.selectIndex>=e.length&&(this.selectIndex=e.length-1),this.colors=p(e)},deep:!0},deg:{handler(e){const o=Number(parseInt(e))||0;this.deg=o>360?360:o<0?0:o}}},destroyed(){this.unbindEvents(),this.unbindEventsDoc()}},f=x,v=(t("104d"),t("2877")),k=Object(v["a"])(f,s,c,!1,null,"ecb812c6",null),C=k.exports,w={name:"App",components:{ColorPicker:C},data(){return{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}]}},methods:{changeColor({style:e,colors:o,deg:t,color:r}){console.log(e,o,t,r),this.style="background: "+r.color},showPicker(){this.isShowColorPicker=!0,this.isShowColorPicker1=!0},onClosePicker(){},changeColor1({style:e,colors:o,deg:t,color:r}){console.log(e,o,t,r),this.style1="background: "+e},showPicker1(){this.isShowColorPicker1=!0},onClosePicker1(){}},watch:{}},m=w,y=(t("d6ec"),Object(v["a"])(m,i,l,!1,null,null,null)),P=y.exports;r["default"].config.productionTip=!1,new r["default"]({render:e=>e(P)}).$mount("#app")},"6e25":function(e,o,t){var r=t("511c");r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);var i=t("499e").default;i("b59ffea4",r,!0,{sourceMap:!1,shadowMode:!1})},d436:function(e,o,t){var r=t("0aea");r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);var i=t("499e").default;i("b2a95bee",r,!0,{sourceMap:!1,shadowMode:!1})},d6ec:function(e,o,t){"use strict";t("d436")}});
//# sourceMappingURL=app.043fc04b.js.map