更新记录

0.0.2(2024-11-13) 下载此版本

  • chore: 更新文档

0.0.1(2024-11-13) 下载此版本

  • init

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.32 app-vue app-uvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

lime-password-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

参数 说明 类型 默认值
v-model 密码值 string -
value 密码值 string -
info 输入框下方文字提示 string -
errorInfo 输入框下方错误提示 string -
length 密码最大长度 6 number 6
gutter 输入框格子之间的间距,如 20px 20rpx,默认单位为px string 20rpx
mask 是否隐藏密码内容 boolean true
focused 是否已聚焦,聚焦时会显示光标 boolean false
line 是否使用下划线模式 boolean false
borderColor 描边色 string -
width 格子宽度 string -
height 格子高度 string -
radius 格子圆角 string -
fontSize 字体大小 string -
activeBgColor 激活格子背景色 string -
activeBorderColor 激活格子描边色 string -
color 文本色 string -
bgColor 格子背景色 string -
cursorColor 光标色 string -
disabledKeyboard 禁用系统键盘 boolean false
disabledDot 禁输入. boolean true
insertAt 指定位置插入符号,{index:2, symbol:'*'} object ``
lastElementStyle 最后一个元素样式 string ``
lastElementPlaceholder 最后一个元素占位提示 string ``
lastElementPlaceholderStyle 最后一个元素占位提示样式 string ``

Events

事件名 说明 回调参数
change 值变化时触发 event: string
focus 聚焦时触发
finish 完成时 event: string

主题定制

样式变量

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

名称 默认值 描述
--l-code-input-height: 50px -
--l-code-input-margin: 0 $spacer -
--l-code-input-font-size: 20px -
--l-code-input-radius: 6px -
--l-code-input-bg-color: $gray-1 -
--l-code-input-info-color: $text-color-3 -
--l-code-input-info-font-size: $font-size -
--l-code-input-error-info-color: $error-color -
--l-code-input-dot-size: 10px -
--l-code-input-dot-color: $text-color-1 -
--l-code-input-text-color: $text-color-1 -
--l-code-input-cursor-color: $text-color-1 -
--l-code-input-cursor-width: 1px -
--l-code-input-cursor-height: 40% -
--l-code-input-cursor-duration: 1s -
--l-code-input-active-bg-color: $gray-1 -
--l-code-input-active-border-color: transparent -

打赏

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

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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