更新记录
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 | - |
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。