修复光标动画重复创建问题

This commit is contained in:
icssoa
2025-11-13 22:33:46 +08:00
parent e646f4544f
commit 629652c500

View File

@@ -60,7 +60,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, nextTick, onMounted, ref, watch, type PropType, type Ref } from "vue"; import { computed, nextTick, onMounted, ref, watch, type PropType, type Ref } from "vue";
import type { ClInputType, PassThroughProps } from "../../types"; import type { ClInputType, PassThroughProps } from "../../types";
import { createAnimation, isDark, isEmpty, last, parsePt } from "@/cool"; import { AnimationEngine, createAnimation, isDark, isEmpty, last, parsePt } from "@/cool";
defineOptions({ defineOptions({
name: "cl-input-otp" name: "cl-input-otp"
@@ -159,6 +159,9 @@ const list = computed<string[]>(() => {
return arr; return arr;
}); });
// 光标动画引擎
let animationEngine: AnimationEngine | null = null;
/** /**
* 光标动画 * 光标动画
*/ */
@@ -171,7 +174,11 @@ async function onCursor() {
// 开始动画 // 开始动画
// #ifdef APP // #ifdef APP
createAnimation(last(cursorRef.value), { if (animationEngine != null) {
animationEngine!.stop();
}
animationEngine = createAnimation(last(cursorRef.value), {
duration: 600, duration: 600,
loop: -1, loop: -1,
alternate: true alternate: true
@@ -228,6 +235,9 @@ onMounted(() => {
&__list { &__list {
@apply flex flex-row relative; @apply flex flex-row relative;
margin: 0 -10rpx; margin: 0 -10rpx;
// #ifdef APP-IOS
padding-bottom: 0.1rpx;
// #endif
} }
&__item { &__item {