caimei-applets-hehe/components/vcode-input/vcode-input.vue

<template>
    <view class="vcode-input-body">
        <text
            class="vcode-input-item"
            :class="{
                'vcode-input-line': isBorderLine,
                'vcode-input-border': !isBorderLine,
                on: textLength === index && focus
            }"
            v-for="(v, index) in sum"
            :key="index"
            @tap.stop="setFocus"
            :style="{
                borderColor:
                    text.length === index && focus
                        ? borderActiveColor
                        : text.length > index
                        ? borderValueColor
                        : borderColor,
                color: text.length > index ? borderValueColor : borderColor
            }"
        >
            {{ text[index] ? text[index] : '' }}
        </text>
        <view class="hidden-input">
            <input
                id="vcodeInput"
                ref="vcodeInput"
                type="number"
                :show-confirm-bar="false"
                auto-blur
                :focus="focus"
                :maxlength="sum"
                v-model="value"
                @blur="setBlur"
                :password="isPassword"
                placeholder="验证码"
            />
        </view>
    </view>
</template>

<script>
export default {
    name: 'VcodeInput',
    props: {
        sum: {
            type: Number,
            default: 6
        },
        isBorderLine: {
            type: Boolean,
            default: false
        },
        borderColor: {
            type: String,
            default: '#e8e8e8'
        },
        borderValueColor: {
            type: String,
            default: '#424456'
        },
        borderActiveColor: {
            type: String,
            default: '#FF6B00'
        },
        isAutoComplete: {
            type: Boolean,
            default: true
        },
        isPassword: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            focus: false,
            text: [],
            value: ''
        }
    },
    watch: {
        value(value, oldVal) {
            this.$emit('vcodeChange', value)
            if (this.isAutoComplete) {
                if (value.length >= this.sum) {
                    this.focus = false
                    this.$emit('vcodeInput', value)
                }
            } else {
                this.$emit('vcodeInput', value)
            }
            if (this.isPassword) {
                let val = ''
                for (let i = 0; i < value.length; i++) {
                    val += '●'
                }
                this.text = val
            } else {
                this.text = value.split('')
            }
        }
    },
    computed: {
        textLength() {
            return this.text.length
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initInput()
        })
    },
    methods: {
        initInput() {
            this.focus = true
            // #ifdef H5
            this.$refs.vcodeInput.$refs.input.setAttribute('type', 'number')
            this.$refs.vcodeInput.$refs.input.setAttribute('pattern', '[0-9]*')
            // #endif
        },
        setBlur() {
            this.$nextTick(() => {
                this.focus = false
            })
        },
        setFocus() {
            this.focus = !this.focus
        },
        clearValue() {
            this.value = ''
        }
    }
}
</script>

<style lang="scss" scoped>
@keyframes cursorflash {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0.2;
    }
}
.vcode-input-body {
    margin-left: -36rpx;
    margin-right: -36rpx;
    position: relative;
    overflow: hidden;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.vcode-input-item {
    width: 76rpx;
    height: 76rpx;
    margin-left: 12rpx;
    margin-right: 12rpx;
    line-height: 76rpx;
    text-align: center;
    font-weight: 500;
    color: #c4761f !important;
    border-radius: 4rpx;
}
.vcode-input-item.on::after {
    content: '|';
    animation: cursorflash 2s infinite ease-in-out;
}
.vcode-input-border {
    border-style: solid;
    border-width: 2rpx;
    border-color: $uni-border-color;
    border-radius: 4rpx;
}
.vcode-input-line {
    border-bottom-style: solid;
    border-bottom-width: 2rpx;
    border-color: $uni-border-color;
}
.hidden-input {
    width: 0px;
    height: 0px;
    position: absolute;
    left: -1px;
    top: -1px;
    overflow: hidden;
}
</style>