CodeInput 验证码输入框 1.0.10

手机扫码预览

01:50



---

组件名：rice-code-input

一般用于验证码的输入。。注：1.0.10版本开始支持

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

通过 v-model 绑定输入框的值，输入完成后会触发 finish 事件。
如果页面一打开就要获得焦点需要将 focus 设置为true ，如果不生效，需要在onReady生命周期中在设置为 true

<rice-code-input v-model="value" focus @finish="onFinish"></rice-code-input>
<script setup lang="ts">
  const onFinish=(val:string)=>{
    console.log('val',val)
  }
</script>

内容显示为圆点

通过 dot 属性可以设置内容显示为圆点。

<rice-code-input v-model="value" dot></rice-code-input>

自定义长度

通过 maxlength 属性可以设置内容最大可输入的长度，输入字符个数达到maxlength值时会触发 finish 事件。

<rice-code-input :maxlength="6" @finish="onFinish"></rice-code-input>
<script setup lang="ts">
  const onFinish=(val:string)=>{
    console.log('val',val)
  }
</script>

自定义边距和背景色

• 通过 space 可以设置各个输入框之间的间距；
• 通过 bg-color 可以设置输入框的背景颜色；

<rice-code-input space="0" bg-color="transparent"></rice-code-input>

自定义样式

• 通过 color 属性设置文字的颜色；
• 通过 font-size 属性设置文字的大小；
• 通过 bold 属性设置文字是否加粗；
• 通过 cursor-color 属性设置光标的颜色，show-cursor 为 false 时不显示光标；
• 通过 size 属性设置输入框的大小；

<rice-code-input color="#e54e2a" font-size="18px" bold cursor-color="#e54e2a" 
  size="48px"></rice-code-input>

自定义排列方式

通过 justify-content 属性可以设置输入框的排序方式，值等同于css属性 justify-content 的值

<rice-code-input :justify-content="justifyContent" :maxlength="5" :custom-style="{marginBottom:'12px'}"></rice-code-input>

<rice-radio-group v-model="justifyContent" direction="row">
  <rice-radio v-for="item in justifyContentList" :key="item" :value="item" :label="item"
    :custom-style="{marginBottom:'6px'}"></rice-radio>
</rice-radio-group>

<script setup lang="ts">
  const justifyContent = ref('space-between')
	const justifyContentList = ref(['center', 'flex-start', 'flex-end', 'space-between', 'space-around'])
</script>

下划线模式

mode 设置为 line 即可切换成下划线模式

<rice-code-input mode="line" v-model="value2" :custom-style="{marginBottom:'12px'}"></rice-code-input>
<rice-code-input mode="line" border-color="#e54e2a" cursor-color="#e54e2a" color="#e54e2a" bold></rice-code-input>

API

Props

属性名	类型	说明	默认值
v-model/model-value	String	双向绑定的值	-
maxlength	Number	最大可输入字符的个数	4
dot	Boolean	是否使用圆点代替	-
mode	String	模式选择，可选值：box、line	box
bg-color	String	输入框背景色，传transparent可设置为透明色	-
border-color	String	输入框边框颜色，传transparent可设置为透明色	-
show-cursor	Boolean	是否显示输入框中间的光标	true
cursor-color	String	输入框中间竖线的颜色	-
space	String|Number	输入框之间的间距	10px
justify-content	String	等同于css属性 justify-content 的值	-
size	String|Number	输入框大小，宽高一致	42px
font-size	String|Number	文字大小	-
color	String	文字颜色	-
bold	Boolean	文字是否加粗	false
focus	Boolean	是否获得焦点，如果页面一打开就要获得焦点该值可设置为true	false
disabled-keyboard	Boolean	点击输入框时禁止唤起系统键盘，一般用于自定义键盘，目前RiceUI还没有自定义键盘组件，后续支持	-
adjust-position	Boolean	键盘弹起时，是否自动上推页面	true
custom-style	Object	自定义样式	-

Events

当 disabled-keyboard 为 true 时，不支持以下事件。

事件名	说明	回调参数
finish	输入字符个数达到maxlength值时触发	value:string
change	输入内容改变时触发	value:string
focus	获得焦点时触发	event:UniInputFocusEvent
blur	失去焦点时触发	event:UniInputBlurEvent

类型定义

组件导出如下类型

import { CodeInputMode } from '@/uni_modules/rice-ui'
type CodeInputMode = 'box' | 'line'
// 组件类型
const codeInputRef = ref<RiceCodeInputComponentPublicInstance | null>(null)