验证码输入框

验证码输入框组件。

基础使用

通过 v-model 绑定输入框的值。

<template>
	<pure-code-input v-model="name"></pure-code-input>
</template>

<script setup>
	import { ref } from "vue";

	// 验证码
	const code = ref("");
</script>

输入框大小

通过 size 设置输入框的大小。

<template>
	<pure-code-input
		v-model="name"
		size="40px"
	></pure-code-input>
</template>

<script setup>
	import { ref } from "vue";

	// 验证码
	const code = ref("");
</script>

光标颜色

通过 cursor-color 设置输入框的光标颜色。

<template>
	<pure-code-input
		v-model="name"
		cursor-color="red"
	></pure-code-input>
</template>

<script setup>
	import { ref } from "vue";

	// 验证码
	const code = ref("");
</script>

验证码长度

通过 length 设置验证码的长度。

<template>
	<pure-code-input
		v-model="name"
		:length="4"
	></pure-code-input>
</template>

<script setup>
	import { ref } from "vue";

	// 验证码
	const code = ref("");
</script>

属性

名称	类型	默认值	说明
v-model	[String, Number]		值
length	Number	6	验证码长度
size	String	2.75em	输入框大小
readonly	Boolean	false	是否只读
type	String	text	输入框的类型 参考
textContentType	String		文本区域的语义，根据类型自动填充 参考
password	Boolean	false	是否是密码类型 参考
cursorSpacing	Number	0	指定光标与键盘的距离 参考
focus	Boolean	false	获取焦点 参考
confirmType	String	done	设置键盘右下角按钮的文字 参考
confirmHold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起 参考
cursor	Number		指定 focus 时的光标位置 参考
cursorColor	String		光标颜色 参考
selectionStart	Number	-1	光标起始位置 参考
selectionEnd	Number	-1	光标结束位置 参考
adjustPosition	Boolean	true	键盘弹起时，是否自动上推页面 参考
autoBlur	Boolean	false	键盘收起时，是否自动失去焦点 参考
ignoreCompositionEvent	Boolean	false	是否忽略组件内对文本合成系统事件的处理 参考
alwaysEmbed	Boolean	false	强制输入框处于同层状态 参考
holdKeyboard	Boolean	false	focus 时，点击页面的时候不收起键盘 参考
randomNumber	Boolean	false	数字键盘是否随机排列 参考
controlled	Boolean	false	是否为受控组件 参考
alwaysSystem	Boolean	false	是否强制使用系统键盘和 Web-view 创建的 input 元素 参考
inputmode	String	text	是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示 参考

事件

名称	参数	说明
onInput	event	输入事件 参考
onFocus	event	聚焦事件 参考
onBlur	event	失焦事件 参考
onConfirm	event	确认事件 参考
onKeyboardHeightChange	event	键盘高度变化事件 参考

插槽

无

样式变量

名称	说明
--pure-code-input-item-size	输入框尺寸
--pure-code-input-item-border-style	边框类型
--pure-code-input-item-border-color	边框颜色
--pure-code-input-item-border-top-width	顶部边框宽度
--pure-code-input-item-border-right-width	右侧边框宽度
--pure-code-input-item-border-bottom-width	底部边框宽度
--pure-code-input-item-border-left-width	左侧边框宽度
--pure-code-input-item-border-radius	圆角大小
--pure-code-input-item-box-shadow	阴影
--pure-code-input-cursor-width	光标宽度
--pure-code-input-cursor-height	光标高度
--pure-code-input-cursor-color	光标颜色
--pure-code-input-cursor-radius	光标圆角大小