多行文本 Textarea

这里可以输入很多很多很多很多很多很多的文本。

基础使用

你可以在这里输入多行文本。传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。

<template>
	<px-space direction="vertical">
		<px-textarea placeholder="Please input" v-model="input"></px-textarea>
		<px-textarea placeholder="Please input" default-value="!!!"></px-textarea>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const input = ref('Excalibur')
</script>

<style lang="css" scoped>
.px-textarea {
	width: 320px;
}
</style>

行数

rows 属性控制默认行数，minRows 和 maxRows 分别设置行数的最值。当 autoResize 为 true 时，时将自动调整高度。

<template>
	<px-space direction="vertical">
		<px-textarea placeholder="Please input" v-model="input" :rows="4"></px-textarea>
		<px-textarea
			placeholder="Please input"
			v-model="input"
			:rows="4"
			:min-rows="2"
			:max-rows="6"
		></px-textarea>
		<px-textarea
			placeholder="Please input"
			v-model="input"
			auto-resize
			:min-rows="2"
			:max-rows="6"
			:rows="4"
		></px-textarea>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const input = ref('Berserker!')
</script>

<style lang="css" scoped>
.px-textarea {
	width: 320px;
}
</style>

手动调整高度

resize 控制是否展示手动调整高度控件，默认展示。

<template>
	<px-space direction="vertical">
		<px-textarea placeholder="Please input" v-model="input"></px-textarea>
		<px-textarea placeholder="Please input" v-model="input" :resize="false"></px-textarea>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const input = ref('Text')
</script>

<style lang="css" scoped>
.px-textarea {
	width: 320px;
}
</style>

更多配置

Textarea 还拥有 Input 组件的部分功能。

Disabled, Readonly, Loading & Clearable

Size

Count

0 / 255

Status

Expose

<template>
	<px-space direction="vertical">
		<h4>Disabled, Readonly, Loading & Clearable</h4>
		<px-space>
			<px-textarea placeholder="Please input text" disabled></px-textarea>
			<px-textarea placeholder="Please input text" readonly></px-textarea>
			<px-textarea placeholder="Please input text" loading></px-textarea>
			<px-textarea placeholder="Please input text" clearable></px-textarea>
		</px-space>
		<h4>Size</h4>
		<px-space>
			<px-textarea placeholder="Please input text" size="small"></px-textarea>
			<px-textarea placeholder="Please input text"></px-textarea>
			<px-textarea placeholder="Please input text" size="large"></px-textarea>
		</px-space>
		<h4>Count</h4>
		<px-space>
			<px-textarea placeholder="Please input text" show-count> </px-textarea>
			<px-textarea placeholder="Please input text" show-count :max-length="255"> </px-textarea>
		</px-space>
		<h4>Status</h4>
		<px-space>
			<px-textarea placeholder="Please input text"> </px-textarea>
			<px-textarea placeholder="Please input text" status="success"> </px-textarea>
			<px-textarea placeholder="Please input text" status="warning"> </px-textarea>
			<px-textarea placeholder="Please input text" status="error"> </px-textarea>
		</px-space>
		<h4>Expose</h4>
		<px-space direction="vertical">
			<px-space>
				<px-button theme="info" @click="focusHandler">Focus</px-button>
				<px-button theme="info" @click="blurHandler">Blur</px-button>
				<px-button theme="info" @click="selectHandler">Select</px-button>
				<px-button theme="warning" @click="clearHandler">Clear</px-button>
			</px-space>
			<px-textarea placeholder="Please input" ref="textareaRef"></px-textarea>
		</px-space>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Textarea } from '@pixelium/web-vue'

// If on-demand import
// import { Textarea } from '@pixelium/web-vue/es'

const textareaRef = ref<InstanceType<typeof Textarea>>(null)

const focusHandler = () => {
	textareaRef.value?.focus()
}
const blurHandler = () => {
	textareaRef.value?.blur()
}
const clearHandler = () => {
	textareaRef.value?.clear()
}
const selectHandler = () => {
	textareaRef.value?.select()
}
</script>

<style lang="css" scoped>
.px-textarea {
	width: 320px;
}
</style>

API

TextareaProps

属性	类型	可选	默认值	描述	版本
modelValue	`string \| null`	是		多行文本框的值（受控模式），支持 `v-model`。	0.0.2
defaultValue	`string \| null`	是		多行文本框的默认值（非受控模式）。	0.0.2
rows	`number`	是		默认行数。	0.0.2
minRows	`number`	是	`1`	最小行数。	0.0.2
maxRows	`number`	是	`Infinity`	最大行数。	0.0.2
autoResize	`boolean`	是	`false`	可否自动调整高度。	0.0.2
resize	`boolean`	是	`true`	可否手动调整高度。	0.0.2
placeholder	`string`	是		占位符文本。	0.0.2
disabled	`boolean`	是	`false`	是否禁用。	0.0.2
readonly	`boolean`	是	`false`	是否只读。	0.0.2
clearable	`boolean`	是	`false`	是否显示清除按钮。	0.0.2
loading	`boolean`	是	`false`	是否显示加载状态。	0.0.2
size	`'medium' \| 'large' \| 'small'`	是	`'medium'`	输入框尺寸。	0.0.2
maxLength	`number`	是		最大输入长度。	0.0.2
showCount	`boolean`	是	`false`	是否展示字数统计。	0.0.2
countGraphemes	`(value: string) => number`	是		自定义字数统计函数，如果只传入 `countGraphemes` 而没有 `sliceGraphemes`，`maxLength` 的长度限制不会生效。	0.0.2
sliceGraphemes	`(value: string, limit: number) => string`	是		自定义截取长度函数。	0.0.2
status	`'success' \| 'warning' \| 'error' \| 'normal'`	是	`'normal'`	表单验证状态。	0.0.2
autofocus	`boolean`	是	`false`	原生 `<input>` 的 `autofocus` 属性。	0.0.2

TextareaEvents

事件	参数	描述	版本
input	`value: string, e: Event`	输入框输入时的回调。	0.0.2
update:modelValue	`value: string`	更新 `modelValue` 的回调。	0.0.2
change	`value: string, e: Event \| undefined`	输入内容变化时的回调。	0.0.2
clear	`value: string`	点击清除文本按钮，清除内容时的回调。	0.0.2
blur	`e: FocusEvent`	输入框失焦时的回调。	0.0.2
focus	`e: FocusEvent`	输入框聚焦时的回调。	0.0.2

TextareaSlots

插槽	参数	描述	版本
count	`inputValue: number, currentLength: number, maxLength: number`	展示字数统计的插槽。	0.0.2

TextareaExpose

属性	类型	可选	描述	版本
focus	`() => void`	否	聚焦到当前输入框。	0.0.2
blur	`() => void`	否	取消聚焦当前输入框。	0.0.2
clear	`() => void`	否	清空当前输入框。	0.0.2
select	`() => void`	否	选中当前输入框内容。	0.0.2

多行文本 Textarea ​

基础使用 ​

行数 ​

手动调整高度 ​

更多配置 ​