修复光标动画重复创建问题
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user