在vue中实现picker样式_基于vue的颜色选择器vue-color-picker

/**

* author : alex

* email : 961163829@qq.com*/exportdefault{

props:{/*由父组件传递的默认颜色*/defaultColor:{

type:String,default:"#000000"},/*目标元素，可以是input框或者按钮等*/targetElem:null},

data(){return{

isShowPicker:false,

wheel:document.querySelector('.wheel'),

color:this.defaultColor,

containerId:"color-picker-container",

dom:{

hMarker:null,

slMarker:null,

color:null,

targetElem:null,

container:null},

radius:84,

square:100,

width:194}

},

mounted(){this.dom.container=document.querySelector('#'+this.containerId);this.dom.hMarker=document.querySelector('.h-marker');this.dom.slMarker=document.querySelector('.sl-marker');this.dom.color=document.querySelector('.color');this.dom.targetElem=document.querySelector(this.targetElem);this.init();

},

methods:{

init:function(){var self = this;

self.posInit();

self.eventBind();//Init color

self.setColor(self.color);

},

openPicker:function(){var self = this;this.isShowPicker = true;this.wheel=document.querySelector('.wheel');/*色盘打开的时候绑定点击事件*/document.addEventListener("click",self.documentClick);

},

closePicker:function(){this.isShowPicker = false;/*色盘关闭的时候解绑事件*/document.removeEventListener("click",this.documentClick);

},

eventBind:function(){var self = this;

self.dom.container.addEventListener("mousedown",self.mousedown);

},

documentClick:function(e){/*你可能不需要关闭色盘，那这个方法也是可以不需要的*/

var parents1 = this.getParents(e,this.dom.container,true);;var parents2 = this.getParents(e,this.dom.targetElem,true);if(parents1.length===0&&parents2.length===0){this.closePicker();

}

},

posInit:function(){/*色盘的位置计算*/

var target = this.dom.targetElem;var top = this.getElementViewTop(target);var left = this.getElementViewLeft(target);this.dom.container.style.position = "fixed";this.dom.container.style.top = (top)+'px';this.dom.container.style.left = (left + this.dom.targetElem.offsetWidth)+'px';

},

getElementViewLeft:function(element){/*获取元素距离视窗左部距离*/

var actualLeft =element.offsetLeft;var current =element.offsetParent;while (current !== null){

actualLeft+=current.offsetLeft;