Kaynağa Gözat

解决 cl-input-opt 在小程序兼容问题

icssoa 6 ay önce
ebeveyn
işleme
8b60579a31

+ 22 - 14
uni_modules/cool-ui/components/cl-input-otp/cl-input-otp.uvue

@@ -8,7 +8,7 @@
 			pt.className
 		]"
 	>
-		<view class="cl-input-otp__inner">
+		<view class="cl-input-otp__inner" @tap="onCursor()">
 			<cl-input
 				v-model="value"
 				ref="inputRef"
@@ -21,7 +21,6 @@
 				:maxlength="length"
 				:hold-keyboard="false"
 				:clearable="false"
-				@focus="onFocus"
 				@change="onChange"
 			></cl-input>
 		</view>
@@ -61,7 +60,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, watch, type PropType, type Ref } from "vue";
 import type { ClInputType, PassThroughProps } from "../../types";
-import { createAnimation, isDark, isEmpty, parsePt } from "@/cool";
+import { createAnimation, isDark, isEmpty, last, parsePt } from "@/cool";
 
 defineOptions({
 	name: "cl-input-otp"
@@ -171,20 +170,15 @@ async function onCursor() {
 	}
 
 	// 开始动画
-	createAnimation(cursorRef.value[0], {
+	// #ifdef APP
+	createAnimation(last(cursorRef.value), {
 		duration: 600,
 		loop: -1,
 		alternate: true
 	})
 		.opacity("0", "1")
 		.play();
-}
-
-/**
- * 输入框聚焦
- */
-function onFocus() {
-	onCursor();
+	// #endif
 }
 
 /**
@@ -221,13 +215,14 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .cl-input-otp {
-	@apply relative overflow-visible;
+	@apply relative;
 
 	&__inner {
 		@apply absolute top-0 h-full z-10;
 		opacity: 0;
-		left: 0;
-		width: 100%;
+		// 小程序隐藏 placeholder
+		left: -100%;
+		width: 200%;
 	}
 
 	&__list {
@@ -263,6 +258,19 @@ onMounted(() => {
 		@apply absolute bg-primary-500;
 		width: 2rpx;
 		height: 24rpx;
+
+		// #ifndef APP
+		animation: blink 1s infinite;
+
+		@keyframes blink {
+			0% {
+				opacity: 1;
+			}
+			50% {
+				opacity: 0;
+			}
+		}
+		// #endif
 	}
 
 	&--disabled {