更新记录

0.0.9（2025-02-19） 下载此版本

• feat: 增加type类型

0.0.8（2025-02-10） 下载此版本

• chore: uniappx ios input无尺寸问题

0.0.7（2025-02-10） 下载此版本

• chore: 更新文档

平台兼容性

lime-code-input 验证码输入框

• 验证码输入框，密码输入框

安装

在插件市场导入即可，首次导入可能需要重新编译

文档

code-input

代码演示

基础使用

通过v-model双向绑定值

<l-code-input v-model="value"></l-code-input>

const value = ref('')

自定义长度

通过length属性来设置码长度

<l-code-input v-model="value"></l-code-input>

const value = ref('')

明文展示

将 mask 设置为 false 可以明文展示输入的内容，适用于短信验证码等场景。

<l-code-input v-model="value" :mask="false"></l-code-input>

const value = ref('')

提示信息

通过 info 属性设置提示信息，通过 error-info 属性设置错误提示，例如当输入六位时提示密码错误。

<l-code-input v-model="value" info="请输入验证码" :error-info="errorInfo"></l-code-input>

const value = ref('')
const errorInfo = ref('')

watch(value, (newVal) => {
    if (newVal.length == 6 && newVal != '123456') {
        errorInfo.value = '密码错误';
    } else {
        errorInfo.value = '';
    }
});

查看示例

• 导入后直接使用这个标签查看演示效果

 // 代码位于 uni_modules/lime-code-input/compoents/lime-code-input 
<lime-code-input />

插件标签

• 默认 l-code-input 为 component
• 默认 lime-code-input 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Props

Events

Slots

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式)。uvue app无效。

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。