更新记录

2.0（2022-12-21）

• 修复了一些问题
• VUE3支持

1.9（2021-06-01）

优化nvue使用

1.8（2021-05-21）

修复微信小程序焦点框总是选中第一个问题 修复重复弹出键盘 新增控制自动获取焦点

平台兼容性

1. 下载该插件，然后解压将其文件 “vcode-input” 拖入至项目的components中
2. 在需要使用的地方导入该组件并注册，使用
3. 编译样式需要安装scss插件，HBuilderX> 工具> 插件安装> scss/sass编译> 安装

获取值说明：

通过 @vcodeInput="" 调用方法 该方法会返回用户输入的值

示例代码如下：

<template>
    <view>
        <vcode-input ref="VcodeInput"
        @vcodeInput="vcodeInput">
        </vcode-input>
        <button type="primary" @click="setFocus">
            获取焦点
        </button>
        <button type="primary" @click="setBlur">
            失去焦点
        </button>
        <button type="primary" @click="clearValue">
            清除输入
        </button>
    </view>
</template>

<script>
    // #ifdef VUE3
    import {ref} from 'vue';
    // #endif
    export default {
        // #ifdef VUE3
        setup(){
            const VcodeInput=ref(null);
            return {
                VcodeInput
            };
        },
        // #endif
        data() {
            return {

            }
        },
        methods: {
            vcodeInput(val) {
                console.log(val);
            },
            // 控制组件获取焦点
            setFocus() {
                // #ifdef VUE3
                this.VcodeInput.setFocus();
                // #endif
                // #ifndef VUE3
                this.$refs.VcodeInput.setFocus();
                // #endif
            },
            // 控制组件失去焦点
            setBlur() {
                // #ifdef VUE3
                this.VcodeInput.setBlur();
                // #endif
                // #ifndef VUE3
                this.$refs.VcodeInput.setBlur();
                // #endif
            },
            // 清除已输入
            clearValue() {
                // #ifdef VUE3
                this.VcodeInput.clearValue();
                // #endif
                // #ifndef VUE3
                this.$refs.VcodeInput.clearValue();
                // #endif
            },

        }
    }
</script>

<style>

</style>