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

This commit is contained in:
icssoa
2025-09-15 11:14:33 +08:00
parent 25a980894a
commit 8b60579a31

View File

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