@ruixinkeji/prism-ui 1.0.0

package/components/PrismCodeInput/PrismCodeInput.vue

@@ -0,0 +1,156 @@
+<template>
+  <view class="prism-code-input" :class="{ 'dark-mode': appStore.isDarkMode }">
+    <view class="code-boxes">
+      <view
+        v-for="(item, index) in codeLength"
+        :key="index"
+        class="code-box"
+        :class="{ 'active': focusIndex === index, 'filled': codeArray[index] }"
+        @click="handleFocus"
+      >
+        <text class="code-text">{{ codeArray[index] || '' }}</text>
+        <view class="cursor" v-if="focusIndex === index && !codeArray[index]"></view>
+      </view>
+    </view>
+    <input
+      ref="hiddenInput"
+      class="hidden-input"
+      type="number"
+      :maxlength="codeLength"
+      v-model="codeValue"
+      :focus="isFocused"
+      @input="handleInput"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    />
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  length: {
+    type: Number,
+    default: 6
+  },
+  modelValue: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'complete']);
+
+const appStore = useAppStore();
+const codeValue = ref(props.modelValue);
+const isFocused = ref(false);
+
+const codeLength = computed(() => props.length);
+
+const codeArray = computed(() => {
+  return codeValue.value.split('').slice(0, props.length);
+});
+
+const focusIndex = computed(() => {
+  if (!isFocused.value) return -1;
+  return Math.min(codeArray.value.length, props.length - 1);
+});
+
+function handleFocus() {
+  isFocused.value = true;
+}
+
+function handleInput(e) {
+  const value = e.detail.value.replace(/\D/g, '').slice(0, props.length);
+  codeValue.value = value;
+  emit('update:modelValue', value);
+
+  if (value.length === props.length) {
+    emit('complete', value);
+  }
+}
+
+watch(() => props.modelValue, (val) => {
+  codeValue.value = val;
+});
+</script>
+
+<style lang="scss">
+.prism-code-input {
+  position: relative;
+
+  .code-boxes {
+    display: flex;
+    gap: 16rpx;
+  }
+
+  .code-box {
+    width: 76rpx;
+    height: 88rpx;
+    background: var(--prism-input-bg, #EBEEF2);
+    border-radius: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transition: all 0.2s ease;
+    border: 2rpx solid transparent;
+
+    &.active {
+      border-color: var(--prism-primary-color, #3478F6);
+      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+    }
+
+    &.filled {
+      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+    }
+
+    .code-text {
+      font-size: 48rpx;
+      font-weight: 600;
+      color: var(--prism-text-primary, #1D2129);
+    }
+
+    .cursor {
+      position: absolute;
+      width: 4rpx;
+      height: 40rpx;
+      background: var(--prism-primary-color, #3478F6);
+      animation: blink 1s infinite;
+    }
+  }
+
+  .hidden-input {
+    position: absolute;
+    left: -9999rpx;
+    opacity: 0;
+    width: 1rpx;
+    height: 1rpx;
+  }
+
+  @keyframes blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+  }
+}
+
+.dark-mode .prism-code-input {
+  .code-box {
+    background: var(--prism-input-bg, #2A2A2A);
+
+    &.active {
+      background: rgba(52, 120, 246, 0.15);
+    }
+
+    &.filled {
+      background: rgba(52, 120, 246, 0.15);
+    }
+
+    .code-text {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+  }
+}
+</style>