@tarojs/components
Version:
1 lines • 4.3 kB
JavaScript
import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-ab3c86da.js";var indexCss=".weui-slider{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:15px 18px}.weui-slider__inner{background-color:#e9e9e9;height:2px;position:relative}.weui-slider__track{background-color:#1aad19;width:0;height:2px}.weui-slider__handler{background-color:#fff;border-radius:50%;width:28px;height:28px;margin-top:-14px;margin-left:-14px;position:absolute;top:50%;left:0;-webkit-box-shadow:0 0 4px rgba(0,0,0,.2);box-shadow:0 0 4px rgba(0,0,0,.2)}.weui-slider-box{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.weui-slider-box .weui-slider{-ms-flex:1;flex:1}.weui-slider-box__value{color:#888;text-align:center;min-width:24px;margin-left:.5em;font-size:14px}";var Slider=function(){function e(e){var t=this;registerInstance(this,e);this.onChange=createEvent(this,"change",7);this.onChanging=createEvent(this,"changing",7);this.handleTouchStart=function(e){if(t.touching||t.disabled)return;t.touching=true;t.touchId=e.targetTouches[0].identifier;t.totalWidth=t.sliderInsRef.clientWidth||1;t.ogX=e.targetTouches[0].pageX;t.ogPercent=t.percent};this.handleTouchMove=function(e){var i=t,a=i.disabled,n=i.touching,r=i.touchId,o=i.totalWidth,l=i.max,s=i.min,h=i.ogX,d=i.ogPercent;if(!n||a)return;if(e.targetTouches[0].identifier!==r)return;e.preventDefault();var u=e.targetTouches[0].pageX;var c=u-h;var f=c/o*100+d;f=t.handleValueUpdate(f,0,100);var p=s+f*.01*(l-s);t.updateByStep(p);t.onChanging.emit({detail:e.detail,value:t.value})};this.handleTouchEnd=function(e){var i=t,a=i.disabled,n=i.touching;if(!n||a)return;if(t.percent!==t.ogPercent){t.onChange.emit({detail:e.detail,value:t.value})}t.touching=false;t.touchId=null;t.ogX=0;t.ogPercent=0};this.handleValueUpdate=function(e,i,a){if(i===void 0){i=t.min}if(a===void 0){a=t.max}e=isNaN(e)?0:e;return Math.max(i,Math.min(e,a))};this.min=0;this.max=100;this.step=1;this.disabled=false;this.value=0;this.activeColor="#1aad19";this.backgroundColor="#e9e9e9";this.blockSize=28;this.blockColor="#ffffff";this.showValue=false;this.name="";this.totalWidth=1;this.touching=false;this.ogX=0;this.touchId=null;this.percent=0;this.ogPercent=undefined;this.isWillLoadCalled=false}e.prototype.function=function(e){if(!this.isWillLoadCalled)return;var t=this,i=t.max,a=t.min;if(e!==null){var n=this.handleValueUpdate(e,a,i);this.updateByStep(n)}};e.prototype.componentDidLoad=function(){this.handler.addEventListener("touchstart",this.handleTouchStart);this.handler.addEventListener("touchmove",this.handleTouchMove);this.handler.addEventListener("touchend",this.handleTouchEnd)};e.prototype.componentWillLoad=function(){this.isWillLoadCalled=true;var e=this,t=e.value,i=e.max,a=e.min;var n=this.handleValueUpdate(t,a,i);this.updateByStep(n)};e.prototype.updateByStep=function(e){var t=this,i=t.max,a=t.min,n=t.step;var r=Math.floor((i-a)/n);for(var o=0;o<=r;o++){var l=a+n*o;var s=o===r?null:a+n*(o+1);if(e===l)break;if(!s&&e>l){e=l}if(s&&e>l&&e<s){if(e-l<n/2){e=l}else{e=s}break}}var h=(e-a)/(i-a)*100;this.value=e;this.percent=h};e.prototype.render=function(){var e=this;var t=this,i=t.showValue,a=t.backgroundColor,n=t.activeColor,r=t.blockColor,o=t.name,l=t.percent,s=t.value;var d=this.blockSize;var u={backgroundColor:a};var c=l>100?100:l;var f={width:"".concat(c,"%"),backgroundColor:n};if(d<12){d=12}if(d>28){d=28}var p={left:"".concat(c,"%"),width:"".concat(d,"px"),height:"".concat(d,"px"),backgroundColor:r,marginTop:"-".concat(Math.floor(d/2),"px"),marginLeft:"-".concat(Math.floor(d/2),"px")};return h(Host,{class:"weui-slider-box"},h("div",{class:"weui-slider"},h("div",{class:"weui-slider__inner",style:u,ref:function(t){return e.sliderInsRef=t}},h("div",{style:f,class:"weui-slider__track"}),h("div",{class:"weui-slider__handler",ref:function(t){if(t)e.handler=t},style:p}),h("input",{type:"hidden",name:o,value:s}))),i&&h("div",{class:"weui-slider-box__value"},s))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["function"]}},enumerable:false,configurable:true});return e}();Slider.style=indexCss;export{Slider as taro_slider_core};