更新记录

2.0(2022-12-21) 下载此版本

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

1.9(2021-06-01) 下载此版本

优化nvue使用

1.8(2021-05-21) 下载此版本

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

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.3.2 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
  1. 下载该插件,然后解压将其文件 “vcode-input” 拖入至项目的components中
  2. 在需要使用的地方导入该组件并注册,使用
  3. 编译样式需要安装scss插件,HBuilderX> 工具> 插件安装> scss/sass编译> 安装
props 类型 是否必填 默认值 说明
autofocus Boolean true 自动获取焦点
sum Number 6 验证码长度
isBorderLine Boolean false 显示的输入框的样式
borderColor String #DADADA 输入框未输入边框颜色
borderValueColor String #424456 输入框已输入边框颜色
borderActiveColor String #FF6B00 输入框选中边框颜色
isAutoComplete Boolean true 当输入长度达到sum规定时才回调
isPassword Boolean false 是否为密文输入

获取值说明:

通过 @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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问