更新记录

1.0.5（2024-06-26）

修复因text-align导致的input显示问题

1.0.4（2024-06-26）

更新隐藏input长度过短显示数字BUG

1.0.3（2024-06-19）

修复插件取消聚焦时的动画隐藏问题

平台兼容性

uni-app

uni-app x

线上预览

使用方法

<yi-code @onComplete="complete" @onChange="change"></yi-code>

参数

个人博客

www.masteryi.cn

示例代码

<template>
    <view class="page">
        <view class="card">
            <view class="title">block</view>
            <view class="body">
                <yi-code :width="600" @onComplete="complete" @onChange="change"></yi-code>
            </view>
        </view>

        <view class="card">
            <view class="title">dashed</view>
            <view class="body">
                <yi-code :focus="false" :maxlength="5" type="dashed"></yi-code>
            </view>
        </view>

        <view class="card">
            <view class="title">line</view>
            <view class="body">
                <yi-code :focus="false" :maxlength="4" type="line"></yi-code>
            </view>
        </view>

        <view class="card">
            <view class="title">dashed - hide</view>
            <view class="body">
                <yi-code :focus="false" hide="*" :maxlength="5" type="dashed" @onComplete="complete"></yi-code>
            </view>
        </view>
    </view>
</template>

<script>
    // 注意测试案例的时候 focus只保持一个自动聚焦， 其他设置false，防止调试输入不了；
    // 刚导入插件请重启一下项目防止缓存未加载
    export default {
        data() {
            return {
            }
        },
        onLoad() {

        },
        methods: {
            complete(code){
                console.log(`complete:${code}`);
            },
            change(code){
                console.log(`change:${code}`);
            }
        }
    }
</script>

<style lang="scss">
    .page {
        display: flex;
        flex-wrap: wrap;
        .card{
            width: 720rpx;
            margin: 30rpx auto;
            border: 1px solid #f0f0f0;
            border-radius: 12rpx;

            .title{
                font-size: 14px;
                text-align: center;
                line-height: 30px;
                border-bottom: 1px solid #f0f0f0;
            }

            .body{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 150rpx;
            }
        }
    }
</style>