|
|
@@ -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 {
|