自定義組件雙重支付密碼

父組件

<template><view class="container"><view class="top"></view><navbar navTitle="修改支付密碼"></navbar><!-- 雙重支付密碼 --><view class="box">//核心代碼<paypassworddouble v-model="passwordValue" @complete="onPasswordComplete"></paypassworddouble></view></view>
</template><script setup>import { ref } from 'vue'import navbar from '@/pages/components/navbar.vue'import paypassworddouble from '../components/paypassworddouble.vue' //核心代碼const passwordValue = ref('')// 密碼輸入完成回調const onPasswordComplete = (password) => {console.log('密碼輸入完成獲取最新密碼:', password)passwordValue.value = password;// uni.showToast({//   title: '支付密碼修改完成',//   icon: 'success'// })}</script><style lang="scss" scoped>.container{width: 750rpx;height: 100%;background: #ffffff;.top{width: 100%;height: 88rpx;}.box{padding: 0 48rpx;}}       
</style>

子組件 全部復制過去直接用就完事了

<template><!-- 雙重驗證支付密碼組件 --><view class="password-container"><!-- 第一行：標題"請輸入支付密碼" --><view class="password-title">請輸入支付密碼</view><view class="password-tips">為了您的財產安全考慮，請輸入您的支付密碼進入！</view><!-- 第二行：6個密碼輸入框（第一組密碼） --><view class="password-input-container"><view class="password-input-row"><view v-for="index in 6" :key="index"class="password-input-box":class="{ 'active': currentInputGroup === 1 && currentFirstIndex === index - 1 }"><view v-if="firstPassword[index - 1]" class="password-text">{{ firstPassword[index - 1] }}</view><view v-else-if="firstPassword[index - 1] === ''" class="password-dot"></view></view></view></view><!-- 第三行：標題"請確認支付密碼" --><view class="password-title">請確認支付密碼</view><view class="password-tips">為了確認支付密碼是否正確，請再次輸入！</view><!-- 第四行：6個密碼輸入框（第二組密碼） --><view class="password-input-container password-input-container-two"><view class="password-input-row"><view v-for="index in 6" :key="index"class="password-input-box":class="{ 'active': currentInputGroup === 2 && currentSecondIndex === index - 1 }"><view v-if="secondPassword[index - 1]" class="password-text">{{ secondPassword[index - 1] }}</view><view v-else-if="secondPassword[index - 1] === ''" class="password-dot"></view></view></view></view><!-- 第五行：12宮格數字鍵盤 --><view class="number-keyboard"><view class="keyboard-row" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex"><view v-for="(key, keyIndex) in row" :key="keyIndex"class="keyboard-key"@click="handleKeyClick(key)"><text v-if="key.type === 'number'" class="key-text">{{ key.value }}</text><image class="delImg" v-if="key.type === 'delete'" src="/static/image/home/Frame.png" mode=""></image></view></view></view><!-- 密碼一致性提示 --><view class="password-match-tip" v-if="showMatchTip"><view v-if="isPasswordMatch && secondPassword.length === 6" class="tip-success"><uni-icons type="checkbox-filled" size="28rpx" color="#12a58c"></uni-icons><text class="tip-text success">兩次密碼輸入一致</text></view><view v-else-if="!isPasswordMatch && secondPassword.length === 6" class="tip-error"><uni-icons type="info-filled" size="28rpx" color="#ff0000"></uni-icons><text class="tip-text error">兩次密碼輸入不一致</text></view></view></view>
</template><script setup>
import { ref, computed, watch } from 'vue'// 定義props
const props = defineProps({modelValue: {type: String,default: ''}
})// 定義emits
const emits = defineEmits(['update:modelValue', 'complete', 'match'])// 數據狀態
const firstPassword = ref([])  // 第一組密碼
const secondPassword = ref([]) // 第二組密碼
const currentFirstIndex = ref(0)   // 第一組當前輸入位置
const currentSecondIndex = ref(0)  // 第二組當前輸入位置
const currentInputGroup = ref(1)   // 當前輸入組（1:第一組, 2:第二組）
const isCompleted = ref(false)     // 是否完成輸入// 鍵盤布局
const keyboardLayout = [[{ type: 'number', value: '1' },{ type: 'number', value: '2' },{ type: 'number', value: '3' }],[{ type: 'number', value: '4' },{ type: 'number', value: '5' },{ type: 'number', value: '6' }],[{ type: 'number', value: '7' },{ type: 'number', value: '8' },{ type: 'number', value: '9' }],[{ type: 'number', value: '*' },{ type: 'number', value: '0' },{ type: 'delete'}]
]// 計算屬性：密碼是否一致
const isPasswordMatch = computed(() => {return firstPassword.value.join('') === secondPassword.value.join('')
})// 計算屬性：第二行輸入完成開啟匹配是否顯示匹配提示
const showMatchTip = computed(() => {return secondPassword.value.length === 6
})// 監聽密碼完成狀態
watch([firstPassword, secondPassword], ([newFirst, newSecond]) => {// 當兩組密碼都輸入完成時if (newFirst.length === 6 && newSecond.length === 6) {isCompleted.value = trueconst firstPwd = newFirst.join('')const secondPwd = newSecond.join('')// 檢查密碼是否一致if (firstPwd === secondPwd) {emits('update:modelValue', firstPwd)emits('complete', firstPwd)emits('match', true)} else {emits('match', false)}} else {isCompleted.value = false}
},{ deep: true })
// 處理按鍵點擊
const handleKeyClick = (key) => {if (key.type === 'number') {// 輸入數字if (currentInputGroup.value === 1 && firstPassword.value.length < 6) {firstPassword.value.push(key.value)currentFirstIndex.value = firstPassword.value.length// 第一組輸入完成后自動切換到第二組if (firstPassword.value.length === 6) {currentInputGroup.value = 2}} else if (currentInputGroup.value === 2 && secondPassword.value.length < 6) {secondPassword.value.push(key.value)currentSecondIndex.value = secondPassword.value.length}} else if (key.type === 'delete') {// 刪除邏輯優化if (currentInputGroup.value === 1 && firstPassword.value.length > 0) {// 刪除第一組密碼firstPassword.value.pop()currentFirstIndex.value = firstPassword.value.length} else if (currentInputGroup.value === 2 && secondPassword.value.length > 0) {// 刪除第二組密碼secondPassword.value.pop()currentSecondIndex.value = secondPassword.value.length} else if (currentInputGroup.value === 2 && secondPassword.value.length === 0 && firstPassword.value.length === 6) {// 當第二組密碼為空時，切換回第一組currentInputGroup.value = 1currentFirstIndex.value = firstPassword.value.length}}
}// 重置密碼
const resetPassword = () => {firstPassword.value = []secondPassword.value = []currentFirstIndex.value = 0currentSecondIndex.value = 0currentInputGroup.value = 1isCompleted.value = false
}// 暴露方法給父組件
defineExpose({resetPassword
})
</script><style lang="scss" scoped>
.password-container {width: 100%;padding-top: 60rpx;box-sizing: border-box;.password-title {height: 56rpx;font-family: PingFang SC, PingFang SC;font-weight: 600;font-size: 56rpx;color: #171717;line-height: 56rpx;margin-bottom: 16rpx;}.password-tips {height: 42rpx;font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 28rpx;color: #737373;line-height: 42rpx;margin-bottom: 48rpx;}.password-input-container {margin-bottom: 48rpx;.password-input-row {display: flex;justify-content: space-between;.password-input-box {width: 96rpx;height: 112rpx;border-radius: 24rpx;border: 2rpx solid #171717;display: flex;align-items: center;justify-content: center;position: relative;&.active {border-color: #FF4001;}.password-text {font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 48rpx;color: #171717;}.password-dot {width: 20rpx;height: 20rpx;border-radius: 50%;background: #333;}}}}.password-input-container-two{margin-bottom: 156rpx;}.number-keyboard {margin-top: 40rpx;.keyboard-row {display: flex;justify-content: space-around;margin-bottom: 20rpx;.keyboard-key {width: 207rpx;height: 112rpx;background: #FAFAFA;border-radius: 24rpx;display: flex;align-items: center;justify-content: center;.key-text {font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 48rpx;color: #171717;}.delImg {width: 56rpx;height: 56rpx;}}}}.password-match-tip {margin-top: 30rpx;display: flex;justify-content: center;.tip-success, .tip-error {display: flex;align-items: center;.tip-text {font-size: 24rpx;margin-left: 10rpx;}.tip-text.success {color: #12a58c;}.tip-text.error {color: #ff0000;}}}
}
</style>

效果圖