低代码高性能原生UI框架

Appearance

本页导读

Textarea ​

组件类型：UxTextareaComponentPublicInstance

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

平台兼容性 ​

UniApp X ​

AndroidiOSweb鸿蒙 Next小程序
√√√√√

UniApp Vue Nvue ​

AndroidiOSweb鸿蒙 Next小程序
xx√xx

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" border="surround" 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" border="surround" 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>