@tarojs/components
Version:
1 lines • 3.52 kB
JavaScript
import{r as t,c as i,h as s,H as e,g as h}from"./p-d0cabaaa.js";const o=class{constructor(s){t(this,s),this.onChange=i(this,"change",7),this.onChanging=i(this,"changing",7),this.handleTouchStart=t=>{this.touching||this.disabled||(this.touching=!0,this.touchId=t.targetTouches[0].identifier,this.totalWidth=this.sliderInsRef.clientWidth||1,this.ogX=t.targetTouches[0].pageX,this.ogPercent=this.percent)},this.handleTouchMove=t=>{const{disabled:i,touching:s,touchId:e,totalWidth:h,max:o,min:a,ogX:r,ogPercent:l}=this;if(!s||i)return;if(t.targetTouches[0].identifier!==e)return;t.preventDefault();let n=(t.targetTouches[0].pageX-r)/h*100+l;n=this.handleValueUpdate(n,0,100),this.updateByStep(a+.01*n*(o-a)),this.onChanging.emit({detail:t.detail,value:this.value})},this.handleTouchEnd=t=>{const{disabled:i,touching:s}=this;s&&!i&&(this.percent!==this.ogPercent&&this.onChange.emit({detail:t.detail,value:this.value}),this.touching=!1,this.touchId=null,this.ogX=0,this.ogPercent=0)},this.handleValueUpdate=(t,i=this.min,s=this.max)=>(t=isNaN(t)?0:t,Math.max(i,Math.min(t,s))),this.min=0,this.max=100,this.step=1,this.disabled=!1,this.value=0,this.activeColor="#1aad19",this.backgroundColor="#e9e9e9",this.blockSize=28,this.blockColor="#ffffff",this.showValue=!1,this.name="",this.totalWidth=1,this.touching=!1,this.ogX=0,this.touchId=null,this.percent=0,this.ogPercent=void 0,this.isWillLoadCalled=!1}function(t){if(!this.isWillLoadCalled)return;const{max:i,min:s}=this;if(null!==t){const e=this.handleValueUpdate(t,s,i);this.updateByStep(e)}}componentDidLoad(){this.handler.addEventListener("touchstart",this.handleTouchStart),this.handler.addEventListener("touchmove",this.handleTouchMove),this.handler.addEventListener("touchend",this.handleTouchEnd)}componentWillLoad(){this.isWillLoadCalled=!0;const{value:t,max:i,min:s}=this,e=this.handleValueUpdate(t,s,i);this.updateByStep(e)}updateByStep(t){const{max:i,min:s,step:e}=this,h=Math.floor((i-s)/e);for(let i=0;i<=h;i++){const o=s+e*i,a=i===h?null:s+e*(i+1);if(t===o)break;if(!a&&t>o&&(t=o),a&&t>o&&t<a){t=t-o<e/2?o:a;break}}const o=(t-s)/(i-s)*100;this.value=t,this.percent=o}render(){const{showValue:t,backgroundColor:i,activeColor:h,blockColor:o,name:a,percent:r,value:l}=this;let n=this.blockSize;const d={backgroundColor:i},c=r>100?100:r,u={width:`${c}%`,backgroundColor:h};n<12&&(n=12),n>28&&(n=28);const p={left:`${c}%`,width:`${n}px`,height:`${n}px`,backgroundColor:o,marginTop:`-${Math.floor(n/2)}px`,marginLeft:`-${Math.floor(n/2)}px`};return s(e,{class:"weui-slider-box"},s("div",{class:"weui-slider"},s("div",{class:"weui-slider__inner",style:d,ref:t=>this.sliderInsRef=t},s("div",{style:u,class:"weui-slider__track"}),s("div",{class:"weui-slider__handler",ref:t=>{t&&(this.handler=t)},style:p}),s("input",{type:"hidden",name:a,value:l}))),t&&s("div",{class:"weui-slider-box__value"},l))}get el(){return h(this)}static get watchers(){return{value:["function"]}}};o.style=".weui-slider{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;box-shadow:0 0 4px rgba(0,0,0,.2)}.weui-slider-box{align-items:center;display:flex}.weui-slider-box .weui-slider{flex:1}.weui-slider-box__value{color:#888;text-align:center;min-width:24px;margin-left:.5em;font-size:14px}";export{o as taro_slider_core}