| 12 |
- import"./index-DF0Gm8tW.js";/* empty css */import{A as e}from"./index-CwUrIOki.js";import{k as a,r as s,P as t,D as n,R as l,x as i,F as u,$ as d,G as o,W as r,a8 as c,X as p}from"./vendor-CgKklJ4r.js";import{_ as m}from"./_plugin-vue_export-helper-BCo6x5W8.js";import"./index-B_-K9rXC.js";const v={class:"page-content"},_={class:"demo-section"},g={class:"number-display"},y={class:"demo-section"},f={class:"number-display"},b={class:"demo-section"},x={class:"number-display"},h={class:"demo-section"},C={class:"easing-demo"},O={class:"easing-label"},k={class:"number-display"},E={class:"trigger-center"},j={class:"demo-section"},I={class:"number-display"},R={class:"control-buttons"},S=m(a({__name:"index",setup(a){const m=s(0),S=s(),T=s(0),F=[{name:"Linear",type:"linear"},{name:"Ease Out Cubic",type:"easeOutCubic"},{name:"Ease Out Expo",type:"easeOutExpo"},{name:"Ease Out Sine",type:"easeOutSine"},{name:"Ease In Out",type:"easeInOutCubic"},{name:"Ease In Quad",type:"easeInQuad"}],P=()=>{var e;m.value=5e3,null==(e=S.value)||e.start(5e3)},Q=()=>{var e;null==(e=S.value)||e.pause()},A=()=>{var e;null==(e=S.value)||e.reset(),m.value=0},B=()=>{T.value=0===T.value?1e3:0},D=e=>{},G=e=>{},L=e=>{},U=()=>{};return(a,s)=>{const V=c;return n(),t("div",v,[s[9]||(s[9]=l("div",{class:"page-header"},[l("h1",null,"基于 VueUse useTransition 的 Count-To 组件"),l("p",null,"高性能数字滚动动画组件，支持完整的动画控制和事件监听")],-1)),l("div",_,[s[0]||(s[0]=l("h2",null,"基础用法",-1)),l("div",g,[i(e,{target:1e3,duration:2e3})])]),l("div",y,[s[1]||(s[1]=l("h2",null,"带前缀后缀",-1)),l("div",f,[i(e,{target:2e4,duration:2500,prefix:"¥",suffix:"元",decimals:2})])]),l("div",b,[s[2]||(s[2]=l("h2",null,"小数点和分隔符",-1)),l("div",x,[i(e,{target:2023.45,duration:3e3,decimals:2,separator:","})])]),l("div",h,[s[4]||(s[4]=l("h2",null,"动画效果对比",-1)),l("div",C,[(n(),t(u,null,d(F,(a=>l("div",{class:"easing-item",key:a.type},[l("div",O,p(a.name),1),l("div",k,[i(e,{target:T.value,duration:3e3,easing:a.type},null,8,["target","easing"])])]))),64))]),l("div",E,[i(V,{onClick:B},{default:o((()=>s[3]||(s[3]=[r("触发所有动画")]))),_:1,__:[3]})])]),l("div",j,[s[8]||(s[8]=l("h2",null,"控制按钮",-1)),l("div",I,[i(e,{ref_key:"countToRef",ref:S,target:m.value,duration:2e3,onStarted:D,onFinished:G,onPaused:L,onReset:U},null,8,["target"])]),l("div",R,[i(V,{onClick:P},{default:o((()=>s[5]||(s[5]=[r("开始")]))),_:1,__:[5]}),i(V,{onClick:Q},{default:o((()=>s[6]||(s[6]=[r("暂停")]))),_:1,__:[6]}),i(V,{onClick:A},{default:o((()=>s[7]||(s[7]=[r("重置")]))),_:1,__:[7]})])])])}}}),[["__scopeId","data-v-0cb4ebdd"]]);export{S as default};
|
