Textarea 多行文本框

用于字符输入的多行输入框。

基本用法

用于字符输入的多行输入框：

无默认值

有默认值（非受控）

iDesign

有固定值（受控）

iDesign

一般用法

iDesign

v-model 用法

iDesign

<template>
  <h4>无默认值</h4>
  <i-textarea />
  <h4>有默认值（非受控）</h4>
  <i-textarea :defaultValue="currentVal" />
  <h4>有固定值（受控）</h4>
  <i-textarea :modelValue="currentVal" />
  <h4>一般用法</h4>
  <i-textarea :modelValue="currentVal" @input="handleInput" />
  <h4>v-model 用法</h4>
  <i-textarea v-model="currentVal" />
</template>

<script setup>
import { ref } from 'vue'
const currentVal = ref('iDesign')

const handleInput = (val, e) => {
  console.log(val, e)
  currentVal.value = val
}
</script>

显示代码复制代码复制代码

禁用状态

通过 disabled 属性指定是否禁用输入框。

<template>
  <i-textarea disabled />
</template>

显示代码复制代码复制代码

只读状态

通过 readonly 属性指定是否为只读状态。

<template>
  <i-textarea readonly />
</template>

显示代码复制代码复制代码

不同状态

通过 status 属性指定不同状态的输入框，通过 tips 属性指定 底部提示信息。

成功状态提示

警告状态提示

错误状态提示

<template>
  <i-textarea placeholder="成功状态" status="success" />
  <br />
  <i-textarea placeholder="警告状态" status="warning" />
  <br />
  <i-textarea placeholder="错误状态" status="error" />
  <br />
  <i-textarea placeholder="成功状态" status="success" tips="成功状态提示" />
  <i-textarea placeholder="警告状态" status="warning" tips="警告状态提示" />
  <i-textarea placeholder="错误状态" status="error" tips="错误状态提示" />
</template>

显示代码复制代码复制代码

限制字数

通过 maxLength 属性指定最多可以输入的字符个数。

0 / 15

iDesign

7 / 20

<template>
  <i-textarea :maxLength="15" />
  <br />
  <i-textarea
    v-model="currentVal"
    :maxLength="20"
  />
</template>

<script setup>
import { ref } from 'vue'
const currentVal = ref('iDesign')
</script>

显示代码复制代码复制代码

禁用高度调整

通过 noResize 属性指定是否禁用右下角高度调整模块。

<template>
  <i-textarea noResize />
</template>

显示代码复制代码复制代码

限制高度

通过 minRows 和 maxRows 属性控制最小和最大高度。

<template>
  <i-textarea placeholder="限制最小高度，minRows=2" :minRows="2" />
  <br />
  <i-textarea placeholder="限制最大高度，maxRows=6" :maxRows="6" />
  <br />
  <i-textarea
    placeholder="限制最小和最大高度，minRows=2 maxRows=6"
    :minRows="2"
    :maxRows="6"
  />
</template>

显示代码复制代码复制代码

高度自适应

通过 autoSize 属性控制高度自适应。

<template>
  <i-textarea placeholder="高度自适应，autoSize = true" autoSize />
  <br />
  <i-textarea
    placeholder="高度自适应 + 限制高度，minRows=2 maxRows=6"
    autoSize
    :minRows="2"
    :maxRows="6"
  />
</template>

显示代码复制代码复制代码

触发事件

一系列的事件触发操作。

onInput 输入时触发

onFocus 聚焦时触发

onBlur 失焦时触发

<template>
  <h4>onInput 输入时触发</h4>
  <i-textarea @input="handleUsual" />
  <h4>onFocus 聚焦时触发</h4>
  <i-textarea @focus="handleUsual" />
  <h4>onBlur 失焦时触发</h4>
  <i-textarea @blur="handleUsual" />
</template>

<script setup>
const handleUsual = (val, e) => {
  console.log(val, e)
}
</script>

显示代码复制代码复制代码

Textarea Attributes

属性	说明	类型	默认值
placeholder	占位符	string	请输入
modelValue / v-model	文本框受控值	string〡number	--
defaultValue	文本框默认值	string〡number	--
disabled	是否禁用文本框	boolean	false
readonly	文本框是否只读	boolean	false
status	文本框状态	"success"〡"warning"〡"error"	--
tips	文本框底部提示	string	--
maxLength	用户最多可以输入的字符个数	number	--
autofocus	自动聚焦	boolean	false
noResize	是否禁用右下角高度调整模块	boolean	false
autoSize	自适应高度	boolean	false
minRows	最小高度	number	--
maxRows	最大高度	number	--

Textarea Events

属性	说明	类型	默认值
input	输入框值发生变化时触发	(value: string, ev?: Event) => void	--
focus	输入框聚焦时触发	(value: string, ev?: Event) => void	--
blur	输入框失焦时触发	(value: string, ev?: Event) => void	--