同步代码

components/JPasswordInput/JPasswordInput.vue

@@ -0,0 +1,97 @@
+<template>
+  <view class="p-wrapper">
+    <input class="p-input" type="number" v-model="info" :focus="vdata.isFoucs" :maxlength="num" @input="inputChange" />
+    <view class="p-main" :style="{ margin: margin }">
+      <div class="p-number flex-center" v-for="v in num" :key="v" :class="{ 'p-active': v <= info.length }"></div>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+const emits = defineEmits(['inputChange'])
+const props = defineProps({
+  focus: { type: Boolean, default: false }, //是否自动获取焦点 默认false
+  num: { type: Number, default: 6 }, //密码框数量
+  margin: { type: String }, //边距
+})
+const info = ref('')
+
+const vdata = reactive({
+	isFoucs: false
+})
+
+onMounted(() => {
+	// 解决无法聚焦的问题，  怀疑页面没有渲染好导致。 nextTick也不好使。 
+	// 偶尔出现： 1. 键盘不弹出， 2.键盘弹出， 输入无法聚焦的input. 
+	if(props.focus){
+		setTimeout(() => {vdata.isFoucs = true}, 500)
+	}
+})
+
+
+const clearInput = () => (info.value = '')
+const inputChange = () => {
+  emits('inputChange', info.value)
+}
+
+
+defineExpose({ clearInput })
+</script>
+
+<style lang="scss" scoped>
+.p-wrapper {
+  position: relative;
+  width: 100%;
+  height: 80rpx;
+  overflow: hidden;
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    width: 95rpx;
+    height: 100%;
+  }
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+    width: 95rpx;
+    height: 100%;
+  }
+  .p-input {
+    position: absolute;
+    top: 10%;
+    left: -100vw;
+    right: 0;
+    opacity: 0;
+    color: transparent;
+    caret-color: transparent;
+  }
+  .p-main {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 95rpx;
+    .p-number {
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 12rpx;
+      background-color: #f2f2f2;
+    }
+    .p-active::after {
+      content: '';
+      display: block;
+      width: 20rpx;
+      height: 20rpx;
+      border-radius: 50%;
+      background-color: #000;
+    }
+  }
+}
+</style>