输入框

输入框组件。

基础使用

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

<template>
	<pure-textarea v-model="content"></pure-textarea>
</template>

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

	// 内容
	const content = ref("");
</script>

提示文本

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

<template>
	<pure-textarea
		v-model="content"
		placeholder="请输入内容"
	></pure-textarea>
</template>

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

	// 内容
	const content = ref("");
</script>

自动高度

• 通过 auto-height 属性开启自动高度。
• 通过 max-height 属性设置最大高度。

<template>
	<pure-textarea
		v-model="content"
		auto-height
		max-height="500px"
	></pure-textarea>
</template>

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

	// 内容
	const content = ref("");
</script>

统计字数

• 通过 total 属性开启统计字数功能。
• 通过 separator 属性设置分隔符。

<template>
	<pure-textarea
		v-model="content"
		total
		separator="/"
	></pure-textarea>
</template>

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

	// 内容
	const content = ref("");
</script>

清空内容

• 通过设置 clearable 属性为 true 可开启一键清空功能
• 通过 onClear 监听清空事件
• 通过 clearText 属性设置清空按钮的文本。

<template>
	<pure-textarea
		v-model="content"
		clearable
		clearText="清空内容"
		@clear="onClear"
	></pure-textarea>
</template>

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

	// 内容
	const content = ref("");

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

禁用状态

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

<template>
	<pure-textarea
		v-model="content"
		disabled
	></pure-textarea>
</template>

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

	// 内容
	const content = ref("");
</script>

只读状态

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

<template>
	<pure-textarea
		v-model="content"
		readonly
	></pure-textarea>
</template>

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

	// 内容
	const content = ref("");
</script>

聚焦效果

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

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

<template>
	<pure-textarea
		v-model="content"
		focus-type="border-all"
	></pure-textarea>

	<pure-textarea
		v-model="content"
		focus-type="border-bottom"
	></pure-textarea>
</template>

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

	// 内容
	const content = ref("");
</script>

属性

名称	类型	默认值	说明
v-model	[String, Number]		值
disabled	Boolean	false	是否禁用
readonly	Boolean	false	是否只读
total	Boolean	false	是否统计字数
separator	String	/	统计字数分隔符
clearable	Boolean	false	是否可清空
clearText	String	清空	清空按钮文本
width	String	100%	宽度
height	Number	200px	高度
maxHeight	Number	500px	最大高度
focusType	String		聚焦效果，可选值为 border-all、border-bottom
focusBorderColor	String		聚焦时边框颜色
placeholder	String		输入框为空时占位符 参考
placeholderStyle	String		占位符样式 参考
placeholderClass	String	input-placeholder	占位符样式类 参考
maxlength	Number	-1	最大输入长度，设置为 -1 的时候不限制最大长度 参考
focus	Boolean	false	获取焦点 参考
autoFocus	Boolean	false	自动聚焦 参考
autoHeight	Boolean	false	自动高度 参考
fixed	Boolean	false	如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true 参考
cursorSpacing	Number	0	指定光标与键盘的距离 参考
cursor	Number		指定 focus 时的光标位置 参考
cursorColor	String		光标颜色 参考
confirmType	String	done	设置键盘右下角按钮的文字 参考
confirmHold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起 参考
showConfirmBar	Boolean	false	否显示键盘上方带有”完成“按钮那一栏 参考
selectionStart	Number	-1	光标起始位置 参考
selectionEnd	Number	-1	光标结束位置 参考
adjustPosition	Boolean	true	键盘弹起时，是否自动上推页面 参考
disableDefaultPadding	Boolean	false	是否去掉 iOS 下的默认内边距 参考
holdKeyboard	Boolean	false	focus 时，点击页面的时候不收起键盘 参考
autoBlur	Boolean	false	键盘收起时，是否自动失去焦点 参考
ignoreCompositionEvent	Boolean	false	是否忽略组件内对文本合成系统事件的处理 参考
inputmode	String	text	是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示 参考

事件

名称	参数	说明
onInput	event	输入事件 参考
onFocus	event	聚焦事件 参考
onBlur	event	失焦事件 参考
onConfirm	event	确认事件 参考
onKeyboardHeightChange	event	键盘高度变化事件 参考
onLineChange	event	输入框行数变化时调用 参考
onClear		清空事件

插槽

名称	参数	说明
#footer		底部的内容

样式变量

名称	说明
--pure-textarea-width	宽
--pure-textarea-height	高
--pure-textarea-max-height	最大高度
--pure-textarea-background	背景
--pure-textarea-border-radius	圆角大小
--pure-textarea-border	边框
--pure-textarea-border-width	边框宽度
--pure-textarea-border-style	边框类型
--pure-textarea-border-color	边框颜色
--pure-textarea-gap	内容之间的间距
--pure-textarea-padding	输入框内边距
--pure-textarea-min-height	最小高度
--pure-textarea-footer-padding	底部内边距
--pure-textarea-footer-justify-content	底部内容对齐方式
--pure-textarea-footer-gap	底部内容之间的间距
--pure-textarea-footer-font-size	底部字体大小
--pure-textarea-footer-font-weight	底部字体粗细
--pure-textarea-footer-color	底部字体颜色
--pure-textarea-footer-gap-line-height	底部间隔线高度
--pure-textarea-footer-gap-line-color	底部间隔线颜色
--pure-textarea-footer-gap-line-margin	底部间隔线间距
--pure-textarea-footer-gap-line-opacity	底部间隔线透明度
--pure-textarea-total-font-size	统计字体大小
--pure-textarea-total-font-weight	统计字体粗细
--pure-textarea-total-color	统计字体颜色
--pure-textarea-total-margin	统计外边距
--pure-textarea-total-padding	统计内边距
--pure-textarea-total-separator-font-size	统计分隔符字体大小
--pure-textarea-total-separator-font-weight	统计分隔符字体粗细
--pure-textarea-total-separator-color	统计分隔符字体颜色
--pure-textarea-total-separator-margin	统计分隔符外边距
--pure-textarea-total-separator-padding	统计分隔符内边距
--pure-textarea-clear-font-size	清除字体大小
--pure-textarea-clear-font-weight	清除字体粗细
--pure-textarea-clear-color	清除字体颜色
--pure-textarea-clear-margin	清除外边距
--pure-textarea-clear-padding	清除内边距
--pure-textarea-disabled-background	禁用背景
--pure-textarea-disabled-color	禁用字体颜色
--pure-textarea-disabled-opacity	禁用透明度
--pure-textarea-focus-border	聚焦边框样式
--pure-textarea-focus-border-width	聚焦边框宽度
--pure-textarea-focus-border-style	聚焦边框类型
--pure-textarea-focus-border-color	聚焦边框颜色
--pure-textarea-focus-border-bottom	聚焦底部边框样式