98 lines
2.1 KiB
Vue
98 lines
2.1 KiB
Vue
<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>
|