vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
2 lines (1 loc) • 1.47 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),L=require("../utils.cjs"),M=(v,r,n,d)=>{const f=c.computed(()=>{const{r:e,g:t,b:i}=L.HUEtoRGB(v.hue);return`rgba(${e}, ${t}, ${i}, 1)`}),u=c.computed(()=>v.width),o=c.ref(0),l=e=>{n.value&&(n.value.style.transform=`translate(${e}px, 0px)`);const t=Math.round(e/u.value*360*100)/100;d("update:hue",t)},a=e=>{if(!r.value||!n.value)return;e.cancelable&&e.preventDefault();let t=e instanceof MouseEvent?e.pageX-o.value:e.touches[0].pageX-o.value;t=Math.min(u.value,Math.max(0,t)),requestAnimationFrame(()=>l(t))},s=()=>{document.removeEventListener("mouseup",s),document.removeEventListener("mousemove",a),document.removeEventListener("touchend",s),document.removeEventListener("touchmove",a)},p=()=>{document.addEventListener("mouseup",s),document.addEventListener("mousemove",a),document.addEventListener("touchend",s,{passive:!1}),document.addEventListener("touchmove",a,{passive:!1})},m=()=>{if(r.value){const e=r.value.getBoundingClientRect();o.value=e.left}},g=()=>{const e=v.hue*u.value/360;n.value&&(n.value.style.transform=`translate(${e}px, 0px)`)},h=e=>{const t=e instanceof MouseEvent;if(p(),m(),e.target!==n.value){e.cancelable&&e.preventDefault();const i=t?e.pageX-o.value:e.touches[0].pageX-o.value,E=Math.min(u.value,Math.max(0,i));l(E)}};return c.onBeforeUnmount(()=>{s()}),{cursorColor:f,setSizePoses:m,setCursor:g,onMousedown:h}};exports.useHue=M;