Skip to content
本页导读

Textarea

组件类型:UxTextareaComponentPublicInstance

扩展支持聚焦高亮、字数统计、自动增高、可清空

平台兼容性

UniApp X

AndroidiOSweb鸿蒙 Next小程序
x

UniApp Vue Nvue

AndroidiOSweb鸿蒙 Next小程序
xxxx

Props

属性名类型默认值说明
themeStringprimary主题颜色
nameString表单的控件名称,作为键值对的一部分与表单(form组件)一同提交
valueString输入框的初始内容
clearableBooleanfalse是否显示清除控件
showWordsBooleanfalse是否显示输入字数统计,只在type="text"或type="textarea"时有效
placeholderString输入框为空时占位符
placeholderStyleString指定placeholder的样式
placeholderClassString指定placeholder的样式类
maxlengthNumber140最大输入长度,设置为-1的时候不限制最大长度
heightAny65高度
maxHeightAny450高度
autoHeightBooleanfalse是否自动增高,设置auto-height时,style.height不生效
autoFocusBooleanfalse自动获取焦点,与focus属性对比,此属性只会首次生效
focusBooleanfalse获取焦点
cursorNumber0指定focus时的光标位置
cursorSpacingNumber0指定光标与键盘的距离,单位px。取input距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离
confirmTypeStringdone设置键盘右下角按钮的文字
confirmHoldBooleanfalse点击键盘右下角按钮时是否保持键盘不收起
selectionStartNumber-1光标起始位置,自动聚集时有效,需与selection-end搭配使用
selectionEndNumber-1光标结束位置,自动聚集时有效,需与selection-satrt搭配使用
adjustPositionBooleantrue键盘弹起时,是否自动上推页面
holdKeyboardBooleanfalsefocus时,点击页面的时候不收起键盘
sizeAny$ux.Conf.fontSize输入框字体的大小
colorString$ux.Conf.fontColor输入框字体颜色
darkColorString深色none-不显示,auto-自动适配深色模式,其他-颜色
backgroundString#f0f0f0输入框背景颜色
backgroundDarkString#222222深色none-不显示,auto-自动适配深色模式,其他-颜色
disabledColorString输入框禁用颜色
disabledDarkString深色none-不显示,auto-自动适配深色模式,其他-颜色
borderStringnone边框类型
borderColorString输入框边框颜色
borderColorDarkString深色none-不显示,auto-自动适配深色模式,其他-颜色
focusBorderBooleantrue聚焦时显示边框
innerPaddingBooleantrue内部padding
fixedBooleanfalse如果textarea是在一个position:fixed的区域,需要显示指定属性fixed为true
readonlyBooleanfalse是否只读,与disabled不同之处在于disabled会置灰组件,而readonly则不会
disabledBooleanfalse是否禁用
marginArray边距[上右下左][上下左右][上下左右]
mtAny距上单位px
mrAny距右单位px
mbAny距下单位px
mlAny距左单位px
paddingArray填充[上右下左][上下左右][上下左右]
ptAny上内边距单位px
prAny右内边距单位px
pbAny下内边距单位px
plAny左内边距单位px
xstyleArray自定义样式

theme

说明
primary主色
warning警告
success成功
error错误
info文本

confirmType

说明
return换行
send发送
search搜索
next下一个
go前往
done完成

darkColor

说明
none不显示
auto自动适配深色模式
color其他颜色

backgroundDark

说明
none不显示
auto自动适配深色模式
color其他颜色

disabledDark

说明
none不显示
auto自动适配深色模式
color其他颜色

border

说明
surround四周边框
bottom底部边框
none无边框

borderColorDark

说明
none不显示
auto自动适配深色模式
color其他颜色

Events

事件名说明参数
clear点击清空时触发
input当键盘输入时,触发input事件,处理函数可以直接return一个字符串,将替换输入框的内容
focus输入框聚焦时触发
blur输入框失去焦点时触发
confirm点击完成按钮时触发
linechange输入框行数变化时触发
keyboardheightchange键盘高度发生变化的时候触发此事件

示例代码

html
<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="文本域" :bold="true">
				<ux-text text="扩展支持聚焦高亮、字数统计、自动增高、可清空"></ux-text>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
				<ux-text text="聚焦高亮,多种主题可配置,适配暗黑模式" :mb="15"></ux-text>
				<ux-col>
					<ux-textarea theme="success" v-model="value" :autoFocus="true" placeholder="请输入"></ux-textarea>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="自动增高" :bold="true">
				<ux-text text="支持自动增高,可配置最大高度" :mb="15" @click="focus = true"></ux-text>
				<ux-col>
					<ux-textarea :focus="focus" @blur="focus = false" v-model="value" :autoHeight="true" :maxHeight="60" placeholder="请输入" :mt="10"></ux-textarea>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="统计字数" :bold="true">
				<ux-text text="支持统计字数,可配置最大输入长度" :mb="15"></ux-text>
				<ux-col>
					<ux-textarea v-model="value" theme="error" :showWords="true" color="red" placeholder="请输入" :mt="10"></ux-textarea>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="可清空" :bold="true">
				<ux-text text="支持清空输入内容" :mb="15"></ux-text>
				<ux-col>
					<ux-textarea v-model="value" :clearable="true" placeholder="请输入" @input="onInput" :mt="10"></ux-textarea>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="禁用/只读" :bold="true">
				<ux-text text="支持禁用输入、只读状态" :mb="15"></ux-text>
				<ux-col>
					<ux-textarea v-model="value1" :disabled="true" value="禁用" :mb="10"></ux-textarea>
					<ux-textarea v-model="value2" :readonly="true" value="只读"></ux-textarea>
				</ux-col>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>
<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="文本域" :bold="true">
				<ux-text text="扩展支持聚焦高亮、字数统计、自动增高、可清空"></ux-text>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
				<ux-text text="聚焦高亮,多种主题可配置,适配暗黑模式" :mb="15"></ux-text>
				<ux-col>
					<ux-textarea theme="success" v-model="value" :autoFocus="true" placeholder="请输入"></ux-textarea>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="自动增高" :bold="true">
				<ux-text text="支持自动增高,可配置最大高度" :mb="15" @click="focus = true"></ux-text>
				<ux-col>
					<ux-textarea :focus="focus" @blur="focus = false" v-model="value" :autoHeight="true" :maxHeight="60" placeholder="请输入" :mt="10"></ux-textarea>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="统计字数" :bold="true">
				<ux-text text="支持统计字数,可配置最大输入长度" :mb="15"></ux-text>
				<ux-col>
					<ux-textarea v-model="value" theme="error" :showWords="true" color="red" placeholder="请输入" :mt="10"></ux-textarea>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="可清空" :bold="true">
				<ux-text text="支持清空输入内容" :mb="15"></ux-text>
				<ux-col>
					<ux-textarea v-model="value" :clearable="true" placeholder="请输入" @input="onInput" :mt="10"></ux-textarea>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="禁用/只读" :bold="true">
				<ux-text text="支持禁用输入、只读状态" :mb="15"></ux-text>
				<ux-col>
					<ux-textarea v-model="value1" :disabled="true" value="禁用" :mb="10"></ux-textarea>
					<ux-textarea v-model="value2" :readonly="true" value="只读"></ux-textarea>
				</ux-col>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>
ts
<script setup>
	
	import * as plus from '@/uni_modules/ux-plus'
	
	const title = ref('')
	const value = ref('')
	const value1 = ref('')
	const value2 = ref('')
	
	const focus  = ref(false)
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
	})
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/textarea.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	function onInput(v: string) {
		value.value = v
	}
</script>
<script setup>
	
	import * as plus from '@/uni_modules/ux-plus'
	
	const title = ref('')
	const value = ref('')
	const value1 = ref('')
	const value2 = ref('')
	
	const focus  = ref(false)
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
	})
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/textarea.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	function onInput(v: string) {
		value.value = v
	}
</script>
css
<style lang="scss">
	
</style>
<style lang="scss">
	
</style>