输入框

输入框组件。

基础使用

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

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

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

	// 姓名
	const name = ref("");
</script>

提示文本

• 通过 placeholder 属性设置输入框的提示文本。
• 通过 placeholder-style 属性设置输入框的提示文本样式。
• 通过 placeholder-class 属性设置输入框的提示文本类名。

<template>
	<pure-input
		v-model="name"
		placeholder="请输入姓名"
	></pure-input>
</template>

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

	// 姓名
	const name = ref("");
</script>

前置图标

通过 before-icon-name 属性设置输入框的前置图标。

<template>
	<pure-input
		v-model="name"
		before-icon-name="__home"
	></pure-input>
</template>

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

	// 姓名
	const name = ref("");
</script>

后置图标

通过 after-icon-name 属性设置输入框的后置图标。

<template>
	<pure-input
		v-model="name"
		after-icon-name="__weizhi"
	></pure-input>
</template>

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

	// 姓名
	const name = ref("");
</script>

清空内容

通过设置 clearable 属性为 true 可开启一键清空功能，可通过 onClear 监听清空事件。

<template>
	<pure-input
		v-model="name"
		clearable
		@clear="onClear"
	></pure-input>
</template>

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

	// 姓名
	const name = ref("你好~");

	// 清空事件
	const onClear = () => {
		uni.showToast({
			title: "清空了",
			icon: "success"
		});
	};
</script>

禁用状态

通过 disabled 属性设置输入框为禁用状态。

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

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

	// 姓名
	const name = ref("");
</script>

只读状态

通过 readonly 属性设置输入框为只读状态。

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

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

	// 姓名
	const name = ref("");
</script>

聚焦效果

通过 focus-type 属性设置输入框的聚焦效果。

• border-all：输入框获得焦点时，边框为全边框。
• border-bottom：输入框获得焦点时，边框为下边框。

<template>
	<pure-input
		v-model="name"
		focus-type="border-all"
	></pure-input>

	<pure-input
		v-model="name"
		focus-type="border-bottom"
	></pure-input>
</template>

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

	// 姓名
	const name = ref("");
</script>

属性

名称	类型	默认值	说明
v-model	[String, Number]		值
disabled	Boolean	false	是否禁用
readonly	Boolean	false	是否只读
beforeIconName	String		前置图标名称
beforeIconOpts	Object		前置图标选项 参考
afterIconName	String		后置图标名称
afterIconOpts	Object		后置图标选项 参考
clearable	Boolean	false	是否可清空
clearIconName	String	clear	清空图标名称
clearIconOpts	Object		清空图标选项 参考
width	String	100%	宽度
height	Number	2.85em	高度
focusType	String		聚焦效果，可选值为 border-all、border-bottom
focusBorderColor	String		聚焦时边框颜色
type	String	text	输入框的类型 参考
textContentType	String		文本区域的语义，根据类型自动填充 参考
password	Boolean	false	是否是密码类型 参考
placeholder	String		输入框为空时占位符 参考
placeholderStyle	String		占位符样式 参考
placeholderClass	String	input-placeholder	占位符样式类 参考
maxlength	Number	-1	最大输入长度，设置为 -1 的时候不限制最大长度 参考
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 时，点击页面的时候不收起键盘 参考
safePasswordCertPath	String		安全键盘加密公钥的路径，只支持包内路径 参考
safePasswordLength	Number		安全键盘输入密码长度 参考
safePasswordTimeStamp	Number		安全键盘加密时间戳 参考
safePasswordNonce	String		安全键盘加密盐值 参考
safePasswordSalt	String		安全键盘计算 hash 盐值 参考
safePasswordCustomHash	String		安全键盘计算 hash 的算法表达式 参考
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	键盘高度变化事件 参考
onClear		清空事件

插槽

名称	参数	说明
#before		输入框前面的内容
#after		输入框后面的内容

样式变量

名称	说明
--pure-input-width	宽
--pure-input-height	高
--pure-input-gap	内容之间的间距
--pure-input-icon-font-size	图标字体大小
--pure-input-icon-font-weight	图标字体粗细
--pure-input-icon-color	图标颜色
--pure-input-icon-width	图标宽度
--pure-input-icon-height	图标高度
--pure-input-icon-margin	图标外边距
--pure-input-icon-padding	图标内边距
--pure-input-icon-before-font-size	前置图标字体大小
--pure-input-icon-before-font-weight	前置图标字体粗细
--pure-input-icon-before-color	前置图标颜色
--pure-input-icon-before-width	前置图标宽度
--pure-input-icon-before-height	前置图标高度
--pure-input-icon-before-margin	前置图标外边距
--pure-input-icon-before-padding	前置图标内边距
--pure-input-icon-after-font-size	后置图标字体大小
--pure-input-icon-after-font-weight	后置图标字体粗细
--pure-input-icon-after-color	后置图标颜色
--pure-input-icon-after-width	后置图标宽度
--pure-input-icon-after-height	后置图标高度
--pure-input-icon-after-margin	后置图标外边距
--pure-input-icon-after-padding	后置图标内边距
--pure-input-clear-icon-font-size	清空图标字体大小
--pure-input-clear-icon-font-weight	清空图标字体粗细
--pure-input-clear-icon-color	清空图标颜色
--pure-input-clear-icon-width	清空图标宽度
--pure-input-clear-icon-height	清空图标高度
--pure-input-clear-icon-margin	清空图标外边距
--pure-input-clear-icon-padding	清空图标内边距
--pure-input-focus-border-color	聚焦时边框样式
--pure-input-focus-border-width	聚焦时边框宽度
--pure-input-focus-border-style	聚焦时边框类型
--pure-input-focus-border-color	聚焦时边框颜色
--pure-input-focus-border-bottom	聚焦时底部边框样式
--pure-input-disabled-background-color	禁用时背景颜色
--pure-input-disabled-opacity	禁用时透明度