vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
2 lines (1 loc) • 1.95 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),b=(e,r,d)=>{const s=c.ref(!1),v=c.computed(()=>({"is-horizontal":e.direction==="horizontal","is-vertical":e.direction==="vertical","is-disabled":e.disabled?e.disabled:!1})),f=c.computed(()=>({...e.direction==="vertical"?{height:`${e.height}px`}:{},"--slider-size":`${e.width}px`,"--slider-theme":e.theme?e.theme:"var(--app-theme)"})),o=c.computed(()=>(e.modelValue-e.min)/(e.max-e.min)*100),w=c.computed(()=>e.direction==="horizontal"?{width:`${o.value}%`}:{height:`${o.value}%`}),g=c.computed(()=>{if(e.direction==="horizontal")return{left:`${o.value}%`};{const i=16/(e.height||200)*100/2;return{bottom:`calc(${o.value}% - ${i}%)`}}}),h=(i,l)=>{if(!r.value)return;const a=r.value.getBoundingClientRect();let n=0;e.direction==="horizontal"?n=(i-a.left)/a.width:n=(a.bottom-l)/a.height,n=Math.min(1,Math.max(0,n));let t=e.min+n*(e.max-e.min);t=Math.round(t/e.step)*e.step,t=Math.min(e.max,Math.max(e.min,t)),t!==e.modelValue&&d("update:modelValue",t)};return{classNames:v,styles:f,fillStyle:w,thumbStyle:g,onClickTrack:i=>{e.disabled||(h(i.clientX,i.clientY),d("change",e.modelValue))},startDrag:i=>{if(e.disabled)return;i.cancelable&&i.preventDefault(),s.value=!0;let l=0;const a=t=>{t.cancelable&&t.preventDefault(),l&&cancelAnimationFrame(l),l=requestAnimationFrame(()=>{let u=0,m=0;"touches"in t?(u=t.touches[0].clientX,m=t.touches[0].clientY):(u=t.clientX,m=t.clientY),h(u,m)})},n=()=>{s.value=!1,d("change",e.modelValue),window.removeEventListener("mousemove",a),window.removeEventListener("mouseup",n),window.removeEventListener("touchmove",a),window.removeEventListener("touchend",n),l&&cancelAnimationFrame(l)};window.addEventListener("mousemove",a,{passive:!1}),window.addEventListener("mouseup",n,{once:!0}),window.addEventListener("touchmove",a,{passive:!1}),window.addEventListener("touchend",n,{passive:!0})}}};exports.useSlider=b;