LimeCodeInput 验证码输入框

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

安装

在 导入即可，首次导入可能需要重新编译

文档

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

参数	说明	类型	默认值
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	``
type	input的类型input	string	``

Events

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

Slots

插槽名	说明	回调参数
line	线条	active: boolean

主题定制

样式变量

组件提供了下列 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	-

打赏

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

源代码

组件源码