cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
4 lines (3 loc) • 4.36 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});
//! create date:2021/01/01
var t={};function i(i,e){this.$targetDom=$(i),this.option=$.extend(!1,t,e),this.id=this.getRandomString(),this.show=!1,this.eventList={},this.init(),this.addPosEvent(),this.addTargetEvent()}i.prototype={init(){this.rendtime(),this.setPosition(),this.addEvent(),this.initCallback(),this.initCurTime()},updateCurrentTime(t){var i=moment(t).format("HH"),e=moment(t).format("mm"),n=moment(t).format("ss"),s=i+":"+e+":"+n;this.trigger("confirm",{str:s,value:{hour:i,minute:e,second:n}})},initCurTime(){this.updateCurrentTime(this.option.time)},initCallback(){this.on("confirm",this.option.onConfirm)},addTargetEvent(){document.addEventListener("click",(t=>{t.target==this.$targetDom[0]||this.$targetDom.find(t.target)[0]&&!$(t.target).parents(".xntimepicker")[0]?this.changeShowStatus():$(t.target).parents(".xntimepicker")[0]&&$(t.target).parents(".xntimepicker")[0].id==this.id||this.changeShowStatus(!0)}),!0)},changeShowStatus(t){this.show||t?(this.show=!0,this.$container.hide()):(this.$container.show(),this.setPosition()),this.show=!this.show},addPosEvent:function(){var t=this;window.addEventListener("scroll",(function(){t.setPosition()})),window.addEventListener("resize",(function(){t.setPosition()}))},setPosition:function(){if(this.$container[0]){var t=document.documentElement.clientWidth;document.documentElement.clientHeight;var i=this.$targetDom[0],e=targetTop=i.getBoundingClientRect().top,n=targetLeft=i.getBoundingClientRect().left,s=this.$targetDom.outerWidth(),o=this.$targetDom.outerHeight(),a=this.$container.outerWidth();this.$container.outerHeight();e=e+o+8;n+a>t&&(n=s+targetLeft-a),this.$container[0].style.top=e+"px",this.$container[0].style.left=n+"px"}},rendtime(){this.option.format||(this.option.format="HH:mm:ss");var t=`\n <div class="xntimepicker" id="${this.id}">`,i='<ul class="hours">',e='<ul class="minutes">',n='<ul class="seconds">';for(let o=0;o<60;o++){let t=o<10?"0"+o:o;o<24&&(i+='<li data-i="'+t+'">'+t+"时</li>"),e+='<li data-i="'+t+'">'+t+"分</li>",n+='<li data-i="'+t+'">'+t+"秒</li>"}var s='\n <div><div class="time-cont">';s+=i+"</ul>",this.option.format.indexOf("mm")>-1&&(s+=e+"</ul>"),this.option.format.indexOf("ss")>-1&&(s+=n+"</ul>"),t+=' <div class="time-picker">'+(s+='</div><div class="time-btns"><span class="cur-time">当前时间</span><a class="confirm-time">确定</a></div></div>')+"</div>\n </div>\n ",this.$targetDom.append(t),this.$container=$("#"+this.id),this.changeShowStatus(!0)},addEvent(){this.$targetDom[0].addEventListener("click",(t=>{var i=$(t.target);this.selectTime(i.parents(".timecont").eq(0),i)})),this.$container[0].addEventListener("click",(t=>{var i=$(t.target);if(i.hasClass("confirm-time")&&this.confirm(),i.hasClass("cur-time")){var e=moment().format("HH"),n=moment().format("mm"),s=moment().format("ss"),o=e+":"+n+":"+s;this.trigger("confirm",{str:o,value:{hour:e,minute:n,second:s}}),this.changeShowStatus(!0)}}))},selectTime(t,i){if(i.parent().hasClass("timecont")){if("none"==t.children("div").css("display"))return;var e=t.children("span")[0].innerHTML.split(":"),n=e[0],s=e[1],o=e[2];return t.find(".on").removeClass("on"),t.find(".hours li[data-i="+n+"]").addClass("on"),t.find(".minutes li[data-i="+s+"]").addClass("on"),t.find(".seconds li[data-i="+o+"]").addClass("on"),void t.find(".on").each(((t,i)=>{var e=$(i).position().top-20;$(i).parent()[0].scrollBy(0,e)}))}if("LI"==i[0].nodeName)return i.parent().find("li").removeClass("on"),void i.addClass("on")},confirm(){var t=this.$container.find(".hours .on").attr("data-i")||"00",i=this.$container.find(".minutes .on").attr("data-i")||"00",e=this.$container.find(".seconds .on").attr("data-i")||"00",n=moment("1900-08-08 "+t+":"+i+":"+e).format(this.format||"HH:mm:ss");this.trigger("confirm",{str:n,value:{hour:t,minute:i,second:e}}),this.changeShowStatus(!0)},trigger(t,i){if(this.eventList[t])for(let e=0;e<this.eventList[t].func.length;e++)this.eventList[t].func[e](i)},on(t,i){this.eventList[t]?this.eventList[t].func.push(i):this.eventList[t]={func:[i]}},getRandomString(t){t=t||8;var i="ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz",e=i.length,n="";for(let s=0;s<t;s++)n+=i.charAt(Math.floor(Math.random()*e));return n}},exports.XNTimepicker=i;