uv-ui/lib/components/swipe/swipe.cjs

基于vue3的移动端组件库

"use strict";const t=require("vue"),w=require("../../utils/common.cjs"),g=require("../../hooks/useContext.cjs"),j=require("../../hooks/useTouch.cjs");require("../../hooks/useCountDown.cjs");require("./swipe.vue_vue_type_style_index_0_lang.cjs");const q={class:"uv-swipe-indicators"},B={name:"UvSwipe"},N=Object.assign(B,{props:{autoplay:{type:Number,default:0},duration:{type:Number,default:500}},emits:["change"],setup(f,{emit:_}){const c=f,e=t.reactive({activeIndex:0,width:0,lockDuration:!0});t.watch(()=>e.activeIndex,n=>{_("change",n)});const m=t.ref(null),{childrenNum:o,fields:a}=g.useChildren("swipe",{props:c});t.onMounted(()=>{e.width=m.value.offsetWidth,d()});const r=t.computed(()=>o.value*e.width),i=j.useTouch(),s=t.ref(0),h=n=>{e.lockDuration=!0,e.activeIndex<0?(a[a.length-1].transform=0,e.activeIndex=o.value-1,s.value=-e.width*(o.value-1)):e.activeIndex>o.value-1?(a[0].transform=0,e.activeIndex=0,s.value=0):a.forEach(u=>{u.transform=0}),w.nextTickFrame(()=>{e.lockDuration=!1,w.call(n)})};let p=null,l=!1;function I(n){o.value<=1||(i.start(n),l=!0,E(),h(()=>{e.lockDuration=!0}),p=s.value)}function y(n){if(!l)return;i.move(n);const{deltaX:u}=i;u.value<0&&e.activeIndex===o.value-1?a[0].transform=r.value:u.value>0&&e.activeIndex===0&&(a[a.length-1].transform=-r.value),s.value=p+u.value}const x=40;function T(n){if(!l)return;const{deltaX:u}=i;u.value<-x?e.activeIndex++:u.value>x&&e.activeIndex--,l=!1,e.lockDuration=!1,s.value=-e.width*e.activeIndex,d()}const D=()=>{i.reset(),h(()=>{e.activeIndex===o.value-1&&(a[0].transform=r.value),e.activeIndex++,e.lockDuration=!1,s.value=-e.width*e.activeIndex})};let v=null;const d=()=>{+c.autoplay>0&&o.value>1&&(v=setTimeout(()=>{D(),d()},+c.autoplay))},E=()=>{v&&clearTimeout(v)};return(n,u)=>(t.openBlock(),t.createElementBlock("div",{class:"uv-swipe",ref_key:"swiperRef",ref:m},[t.createElementVNode("div",{onTouchstart:I,onTouchmove:y,onTouchend:T,class:"uv-swipe-list",style:t.normalizeStyle({width:`${t.unref(r)}px`,transform:`translateX(${s.value}px)`,transitionDuration:e.lockDuration?"0ms":`${f.duration}ms`})},[t.renderSlot(n.$slots,"default")],36),t.createElementVNode("div",q,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(a),(C,k)=>(t.openBlock(),t.createElementBlock("div",{key:k,class:t.normalizeClass([e.activeIndex%t.unref(o)===k?"uv-swipe-indicators-item-active":"","uv-swipe-indicators-item"])},null,2))),128))])],512))}});module.exports=N;