解决 cl-input-opt 在小程序兼容问题
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user