使用场景
用于说明、备注、长文本，固定多行职责。通过 rows 配置初始行数，通过 autosize 配置内容自适应高度；resize 控制用户拖动方向。
多行与字数限制
showWordLimit 与 maxlength 配合显示字数；rows 控制初始行数。change 与 input 行为见事件 API。
多行与字数限制
<template>
<div class="example">
<AsamTextarea
v-model="value"
v-bind="{ class: 'field', 'aria-label': '任务说明' }"
placeholder="请输入任务说明"
:rows="3"
:maxlength="120"
show-word-limit
word-limit-position="outside"
/>
<output>当前说明：{{ value }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTextareaBasicExample' });
import { ref } from 'vue';
import { AsamTextarea } from '@asam-ui/ui';
const value = ref('第一行说明\n第二行说明');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style><template>
<div class="example">
<AsamTextarea
v-model="value"
v-bind="{ class: 'field', 'aria-label': '任务说明' }"
placeholder="请输入任务说明"
:rows="3"
:maxlength="120"
show-word-limit
word-limit-position="outside"
/>
<output>当前说明：{{ value }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTextareaBasicExample' });
import { ref } from 'vue';
import { AsamTextarea } from '@asam-ui/ui';
const value = ref('第一行说明\n第二行说明');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>自适应高度与状态
autosize 可使用布尔值或包含 minRows、maxRows 的对象；只读与禁用状态保留内容展示。
自适应高度与状态
<template>
<div class="example">
<AsamTextarea
v-model="value"
v-bind="{ class: 'field', 'aria-label': '自适应说明' }"
:autosize="{ minRows: 2, maxRows: 5 }"
resize="vertical"
/>
<AsamTextarea
model-value="只读说明"
v-bind="{ class: 'field', 'aria-label': '只读说明' }"
readonly
/>
<AsamTextarea
model-value="禁用说明"
v-bind="{ class: 'field', 'aria-label': '禁用说明' }"
disabled
/>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTextareaAutosizeExample' });
import { ref } from 'vue';
import { AsamTextarea } from '@asam-ui/ui';
const value = ref('输入更多行以观察高度变化');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style><template>
<div class="example">
<AsamTextarea
v-model="value"
v-bind="{ class: 'field', 'aria-label': '自适应说明' }"
:autosize="{ minRows: 2, maxRows: 5 }"
resize="vertical"
/>
<AsamTextarea
model-value="只读说明"
v-bind="{ class: 'field', 'aria-label': '只读说明' }"
readonly
/>
<AsamTextarea
model-value="禁用说明"
v-bind="{ class: 'field', 'aria-label': '禁用说明' }"
disabled
/>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTextareaAutosizeExample' });
import { ref } from 'vue';
import { AsamTextarea } from '@asam-ui/ui';
const value = ref('输入更多行以观察高度变化');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>编辑与重新测量
外部布局变化后可以调用 resizeTextarea 重新计算高度；focus、select、clear、blur 提供编辑操作。
编辑与重新测量
<template>
<div class="example">
<AsamTextarea
ref="input"
v-model="value"
v-bind="{ class: 'field', 'aria-label': '实例多行文本' }"
autosize
/>
<div class="row">
<AsamButton type="default" @click="input?.focus()"> 聚焦文本 </AsamButton>
<AsamButton type="default" @click="input?.select()"> 选中文本 </AsamButton>
<AsamButton type="default" @click="input?.clear()"> 清空文本 </AsamButton>
<AsamButton type="default" @click="input?.resizeTextarea()"> 重新测量 </AsamButton>
</div>
<output>{{ value }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTextareaInstanceExample' });
import { ref } from 'vue';
import { AsamTextarea, AsamButton } from '@asam-ui/ui';
import type { AsamTextareaExpose } from '@asam-ui/ui';
const input = ref<AsamTextareaExpose>();
const value = ref('可编辑的多行文本');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style><template>
<div class="example">
<AsamTextarea
ref="input"
v-model="value"
v-bind="{ class: 'field', 'aria-label': '实例多行文本' }"
autosize
/>
<div class="row">
<AsamButton type="default" @click="input?.focus()"> 聚焦文本 </AsamButton>
<AsamButton type="default" @click="input?.select()"> 选中文本 </AsamButton>
<AsamButton type="default" @click="input?.clear()"> 清空文本 </AsamButton>
<AsamButton type="default" @click="input?.resizeTextarea()"> 重新测量 </AsamButton>
</div>
<output>{{ value }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTextareaInstanceExample' });
import { ref } from 'vue';
import { AsamTextarea, AsamButton } from '@asam-ui/ui';
const input = ref();
const value = ref('可编辑的多行文本');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>四档密度与继承
large / big / default / small 分别为四档密度。显式 size 覆盖继承；省略 size 时按组件、组、表单、ConfigProvider 到 default 解析。通过切换 provider 验证继承响应。
四档密度与继承
<template>
<div class="example">
<div class="row">
<AsamTextarea
size="large"
v-bind="{ class: 'field', 'aria-label': 'large尺寸' }"
model-value="ASAM"
/>
<AsamTextarea
size="big"
v-bind="{ class: 'field', 'aria-label': 'big尺寸' }"
model-value="ASAM"
/>
<AsamTextarea
size="default"
v-bind="{ class: 'field', 'aria-label': 'default尺寸' }"
model-value="ASAM"
/>
<AsamTextarea
size="small"
v-bind="{ class: 'field', 'aria-label': 'small尺寸' }"
model-value="ASAM"
/>
</div>
<AsamConfigProvider :size="density">
<div class="example">
<AsamTextarea
v-bind="{ class: 'field', 'aria-label': '继承尺寸' }"
model-value="ASAM"
/>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
</div>
</AsamConfigProvider>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTextareaSizesExample' });
import { ref } from 'vue';
import { AsamTextarea, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style><template>
<div class="example">
<div class="row">
<AsamTextarea
size="large"
v-bind="{ class: 'field', 'aria-label': 'large尺寸' }"
model-value="ASAM"
/>
<AsamTextarea
size="big"
v-bind="{ class: 'field', 'aria-label': 'big尺寸' }"
model-value="ASAM"
/>
<AsamTextarea
size="default"
v-bind="{ class: 'field', 'aria-label': 'default尺寸' }"
model-value="ASAM"
/>
<AsamTextarea
size="small"
v-bind="{ class: 'field', 'aria-label': 'small尺寸' }"
model-value="ASAM"
/>
</div>
<AsamConfigProvider :size="density">
<div class="example">
<AsamTextarea
v-bind="{ class: 'field', 'aria-label': '继承尺寸' }"
model-value="ASAM"
/>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
</div>
</AsamConfigProvider>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTextareaSizesExample' });
import { ref } from 'vue';
import { AsamTextarea, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>ASAM 扩展与迁移
原 Input 的 type="textarea" 改为 AsamTextarea，移除 type，保留 rows、autosize、resize 与字数配置。 完整说明。
清空、字素与浏览器高度
clearable 和 clearIcon 提供多行清空，countGraphemes 承接字素计数；开启后不设置原生 minlength/maxlength。 完整说明。
多行清空与字素计数
<template>
<div class="example">
<AsamTextarea
ref="control"
v-model="value"
:autosize="{ minRows: 2, maxRows: 5 }"
resize="vertical"
clearable
:clear-icon="clearIcon"
:count-graphemes="count"
:maxlength="20"
show-word-limit
word-limit-position="outside"
aria-label="可清空多行字素"
@clear="cleared = true"
/><AsamButton native-type="submit" type="default" @click="control?.resizeTextarea()"
>重新测量高度</AsamButton
><output>已清空：{{ cleared }}；字素数：{{ count(value) }}</output>
<p class="example-paragraph">
在Firefox与Chromium中均应按行自适应高度；折叠或隐藏容器重新显示后可调用公开resizeTextarea。
</p>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTextareaClearGraphemesExample' });
import { ref, h } from 'vue';
import { AsamButton, AsamTextarea } from '@asam-ui/ui';
import type { AsamTextareaExpose } from '@asam-ui/ui';
const value = ref('👨👩👧👦\nASAM');
const cleared = ref(false);
const control = ref<AsamTextareaExpose>();
const segmenter = new Intl.Segmenter();
const count = (text: string) => Array.from(segmenter.segment(text)).length;
const clearIcon = () => h('span', { 'aria-hidden': 'true' }, '×');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<div class="example">
<AsamTextarea
ref="control"
v-model="value"
:autosize="{ minRows: 2, maxRows: 5 }"
resize="vertical"
clearable
:clear-icon="clearIcon"
:count-graphemes="count"
:maxlength="20"
show-word-limit
word-limit-position="outside"
aria-label="可清空多行字素"
@clear="cleared = true"
/><AsamButton native-type="submit" type="default" @click="control?.resizeTextarea()"
>重新测量高度</AsamButton
><output>已清空：{{ cleared }}；字素数：{{ count(value) }}</output>
<p class="example-paragraph">
在Firefox与Chromium中均应按行自适应高度；折叠或隐藏容器重新显示后可调用公开resizeTextarea。
</p>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTextareaClearGraphemesExample' });
import { ref, h } from 'vue';
import { AsamButton, AsamTextarea } from '@asam-ui/ui';
const value = ref('👨👩👧👦\nASAM');
const cleared = ref(false);
const control = ref();
const segmenter = new Intl.Segmenter();
const count = (text) => Array.from(segmenter.segment(text)).length;
const clearIcon = () => h('span', { 'aria-hidden': 'true' }, '×');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
output {
color: var(--asam-color-text-secondary);
overflow-wrap: anywhere;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>API 阅读方式
下方 API 来自当前公开类型与运行默认值。默认值标为“未知 / 未声明”时，不代表 false、空值或未支持。省略 size 保留祖先上下文继承。省略 disabled 保留表单禁用继承；validateEvent 控制校验事件，不用 disabled 代替。
模型修饰符与真实更新类型
trim、number、lazy 按原生模型修饰协议承接。启用 number 时 update:modelValue 可能为数字；无法转换的文本仍为字符串。input/change 保留各自事件签名，不能从更新类型中删去合法数字。
模型修饰符与数字更新
<template>
<div class="example">
<AsamTextarea
v-model.trim.number.lazy="value"
aria-label="修饰符输入"
@update:model-value="record"
/>
<AsamButton type="default" native-type="button">移出焦点以提交</AsamButton>
<output>{{ JSON.stringify({ value, type: typeof value, updates }) }}</output>
<p class="example-paragraph">
输入数字并失焦后，更新为 number；非数字文本仍为 string。trim 移除两端空白，lazy
在提交时更新。
</p>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamButton, AsamTextarea } from '@asam-ui/ui';
import type { AsamTextareaEmits } from '@asam-ui/ui';
defineOptions({ name: 'AsamTextareaModifiersExample' });
const value = ref<string | number>('');
const updates = ref<(string | number)[]>([]);
function record(...[value]: AsamTextareaEmits['update:modelValue']) {
updates.value.push(value);
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<div class="example">
<AsamTextarea
v-model.trim.number.lazy="value"
aria-label="修饰符输入"
@update:model-value="record"
/>
<AsamButton type="default" native-type="button">移出焦点以提交</AsamButton>
<output>{{ JSON.stringify({ value, type: typeof value, updates }) }}</output>
<p class="example-paragraph">
输入数字并失焦后，更新为 number；非数字文本仍为 string。trim 移除两端空白，lazy
在提交时更新。
</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamButton, AsamTextarea } from '@asam-ui/ui';
defineOptions({ name: 'AsamTextareaModifiersExample' });
const value = ref('');
const updates = ref([]);
function record(...[value]) {
updates.value.push(value);
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>五入口表单继承与校验
本完整 TS/JS 组合实际实例化单行、密码、多行、建议和标签五个入口。省略各入口 disabled 以继承表单状态；validateEvent 控制各自 change/blur 自动校验。切换禁用不会清空模型，关闭自动校验不影响编辑。五页注册同一组合源码的自包含副本，复制当前示例即可运行，无需从其他组件页补齐文件。
五入口表单继承与校验
<template>
<!-- prettier-ignore -->
<div class="example">
<AsamCheckboxItem
v-model="disabled"
aria-label="禁用五入口表单">禁用整个表单</AsamCheckboxItem>
<AsamCheckboxItem v-model="validateEvent" aria-label="五入口自动校验">自动
change/blur 校验</AsamCheckboxItem>
<AsamBaseForm
ref="form"
:model="model"
:rules="rules"
:disabled="disabled"
@validate="record"
>
<AsamFormItem
label="单行"
prop="input"
>
<AsamInput
v-model="model.input"
:validate-event="validateEvent"
aria-label="表单单行"
/>
</AsamFormItem>
<AsamFormItem
label="密码"
prop="password"
>
<AsamPassword
v-model="model.password"
:validate-event="validateEvent"
aria-label="表单密码"
/>
</AsamFormItem>
<AsamFormItem
label="多行"
prop="textarea"
>
<AsamTextarea
v-model="model.textarea"
:validate-event="validateEvent"
aria-label="表单多行"
/>
</AsamFormItem>
<AsamFormItem
label="建议"
prop="autocomplete"
>
<AsamAutocomplete
v-model="model.autocomplete"
:fetch-suggestions="suggestions"
:validate-event="validateEvent"
aria-label="表单建议"
/>
</AsamFormItem>
<AsamFormItem
label="标签"
prop="tags"
>
<AsamInputTag
v-model="model.tags"
:validate-event="validateEvent"
aria-label="表单标签"
/>
</AsamFormItem>
</AsamBaseForm>
<AsamButton type="default" native-type="button" @click="reset">重置模型和校验记录</AsamButton>
<AsamButton type="default" native-type="button">提交编辑</AsamButton>
<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {
AsamCheckboxItem,
AsamButton,
AsamBaseForm,
AsamFormItem,
AsamInput,
AsamPassword,
AsamTextarea,
AsamAutocomplete,
AsamInputTag
} from '@asam-ui/ui';
import type { AsamBaseFormExpose } from '@asam-ui/ui';
defineOptions({ name: 'AsamFiveInputsFormExample' });
const model = ref({
input: '',
password: '',
textarea: '',
autocomplete: '',
tags: [] as string[]
});
const disabled = ref(false);
const validateEvent = ref(true);
const form = ref<AsamBaseFormExpose>();
const rules = Object.fromEntries(
['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [
key,
[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]
])
);
const suggestions = [{ value: 'Alpha' }];
const validations = ref<{ prop: string; valid: boolean }[]>([]);
function record(prop: string | string[], valid: boolean) {
validations.value.push({ prop: String(prop), valid });
}
function reset() {
model.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };
validations.value = [];
form.value?.clearValidate();
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style><template>
<!-- prettier-ignore -->
<div class="example">
<AsamCheckboxItem
v-model="disabled"
aria-label="禁用五入口表单">禁用整个表单</AsamCheckboxItem>
<AsamCheckboxItem v-model="validateEvent" aria-label="五入口自动校验">自动
change/blur 校验</AsamCheckboxItem>
<AsamBaseForm
ref="form"
:model="model"
:rules="rules"
:disabled="disabled"
@validate="record"
>
<AsamFormItem
label="单行"
prop="input"
>
<AsamInput
v-model="model.input"
:validate-event="validateEvent"
aria-label="表单单行"
/>
</AsamFormItem>
<AsamFormItem
label="密码"
prop="password"
>
<AsamPassword
v-model="model.password"
:validate-event="validateEvent"
aria-label="表单密码"
/>
</AsamFormItem>
<AsamFormItem
label="多行"
prop="textarea"
>
<AsamTextarea
v-model="model.textarea"
:validate-event="validateEvent"
aria-label="表单多行"
/>
</AsamFormItem>
<AsamFormItem
label="建议"
prop="autocomplete"
>
<AsamAutocomplete
v-model="model.autocomplete"
:fetch-suggestions="suggestions"
:validate-event="validateEvent"
aria-label="表单建议"
/>
</AsamFormItem>
<AsamFormItem
label="标签"
prop="tags"
>
<AsamInputTag
v-model="model.tags"
:validate-event="validateEvent"
aria-label="表单标签"
/>
</AsamFormItem>
</AsamBaseForm>
<AsamButton type="default" native-type="button" @click="reset">重置模型和校验记录</AsamButton>
<AsamButton type="default" native-type="button">提交编辑</AsamButton>
<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import {
AsamCheckboxItem,
AsamButton,
AsamBaseForm,
AsamFormItem,
AsamInput,
AsamPassword,
AsamTextarea,
AsamAutocomplete,
AsamInputTag
} from '@asam-ui/ui';
defineOptions({ name: 'AsamFiveInputsFormExample' });
const model = ref({ input: '', password: '', textarea: '', autocomplete: '', tags: [] });
const disabled = ref(false);
const validateEvent = ref(true);
const form = ref();
const rules = Object.fromEntries(
['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [
key,
[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]
])
);
const suggestions = [{ value: 'Alpha' }];
const validations = ref([]);
function record(prop, valid) {
validations.value.push({ prop: String(prop), valid });
}
function reset() {
model.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };
validations.value = [];
form.value?.clearValidate();
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style>本入口 formatter/parser
下方完整 TS/JS 示例直接实例化 Textarea：formatter 为每行增加显示前缀，parser 移除真实编辑中的前缀；v-model 保存含换行的原始文本。“回填两行”更新父级模型并重新格式化多行显示。此示例演示多行入口自身的编辑、模型与回填协议。
多行 formatter/parser 编辑与回填
<template>
<div class="example">
<AsamTextarea
v-model="value"
:formatter="formatter"
:parser="parser"
:rows="3"
aria-label="格式化多行"
/>
<AsamButton type="default" @click="value = 'server\nrow'">回填两行</AsamButton>
<output>{{ JSON.stringify({ value }) }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamTextarea, AsamButton } from '@asam-ui/ui';
defineOptions({ name: 'AsamTextareaFormatExample' });
const value = ref<string | number>('seed\nline');
function formatter(value: string | number) {
return String(value)
.split('\n')
.map((line) => '> ' + line)
.join('\n');
}
function parser(value: string) {
return value
.split('\n')
.map((line) => line.replace(/^> ?/, ''))
.join('\n');
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style><template>
<div class="example">
<AsamTextarea
v-model="value"
:formatter="formatter"
:parser="parser"
:rows="3"
aria-label="格式化多行"
/>
<AsamButton type="default" @click="value = 'server\nrow'">回填两行</AsamButton>
<output>{{ JSON.stringify({ value }) }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamTextarea, AsamButton } from '@asam-ui/ui';
defineOptions({ name: 'AsamTextareaFormatExample' });
const value = ref('seed\nline');
function formatter(value) {
return String(value)
.split('\n')
.map((line) => '> ' + line)
.join('\n');
}
function parser(value) {
return value
.split('\n')
.map((line) => line.replace(/^> ?/, ''))
.join('\n');
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
</style>API
属性 AsamTextareaProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
id | 等价于原生 input id 属性 | string | undefined | — |
size | 显式控件密度；省略时继承按钮组、表单和配置提供器。 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
disabled | 是否禁用 | boolean | undefined | undefined |
modelValue | 输入值 | string | number | null | undefined | — |
modelModifiers | v-model 修饰符，参考 Vue 修饰符 | (AsamTextareaProps)["modelModifiers"] | — |
maxlength | 等价于原生 maxlength 属性 | string | number | undefined | — |
minlength | 等价于原生 minlength 属性 | string | number | undefined | — |
resize | 控制是否能被用户缩放 | enum"horizontal" | "vertical" | "none" | "both"完整类型："horizontal" | "vertical" | "none" | "both" | undefined | — |
autosize | 文本域是否具有自适应高度。 | (AsamTextareaProps)["autosize"] | false |
autocomplete | 原生输入自动完成；联合类型包含大量字面量时可能触发 TS2590，详见 Vue 问题 10514。 | string | undefined | — |
formatter | 格式化显示内容。 | ((value: string) => string) | undefined | — |
parser | 解析显示内容。 | ((value: string) => string) | undefined | — |
placeholder | 输入框占位文本 | string | undefined | — |
form | 原生输入的表单关联。 | string | undefined | — |
readonly | 原生输入的只读状态。 | boolean | undefined | false |
clearable | 是否显示清除按钮 | boolean | undefined | false |
clearIcon | 自定义清除图标 | (AsamTextareaProps)["clearIcon"] | — |
showWordLimit | 字符计数。 | boolean | undefined | false |
wordLimitPosition | 字数统计的位置，仅当 show-word-limit 为 true 时生效。 | enum"outside" | "inside"完整类型："outside" | "inside" | undefined | — |
suffixIcon | 后缀图标。 | (AsamTextareaProps)["suffixIcon"] | — |
prefixIcon | 前缀图标。 | (AsamTextareaProps)["prefixIcon"] | — |
containerRole | 容器角色；原生内部属性用于选择器组件。 | string | undefined | — |
tabindex | 等价于原生 tabindex 属性 | string | number | undefined | — |
validateEvent | 是否触发表单验证 | boolean | undefined | true |
inputStyle | 输入框或文本域元素样式。 | import("vue").StyleValue | undefined |
autofocus | 原生输入自动聚焦。 | boolean | undefined | false |
rows | 输入框行数，仅 type 为 'textarea' 时有效 | number | undefined | — |
ariaLabel | 原生 aria-label属性 | string | undefined | — |
inputmode | 原生虚拟键盘输入模式。 | enum"text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal"完整类型："text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined | — |
name | 原生属性 | string | undefined | — |
countGraphemes | 按字素统计输入长度；设置后不使用原生 maxlength 和 minlength。 | ((value: string) => number) | undefined | — |
事件 AsamTextareaEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [value: string | number] | — |
input | — | [value: string] | — |
change | — | [value: string, event?: Event | undefined] | — |
focus | — | [event: FocusEvent] | — |
blur | — | [event: FocusEvent] | — |
clear | — | [event?: MouseEvent | undefined] | — |
mouseenter | — | [event: MouseEvent] | — |
mouseleave | — | [event: MouseEvent] | — |
keydown | — | [event: Event | KeyboardEvent] | — |
compositionstart | — | [event: CompositionEvent] | — |
compositionupdate | — | [event: CompositionEvent] | — |
compositionend | — | [event: CompositionEvent] | — |
插槽 AsamTextareaSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
prefix | — | (() => unknown) | undefined | — |
suffix | — | (() => unknown) | undefined | — |
prepend | — | (() => unknown) | undefined | — |
append | — | (() => unknown) | undefined | — |
实例方法与状态 AsamTextareaExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
input | — | HTMLInputElement | undefined | — |
textarea | — | HTMLTextAreaElement | undefined | — |
ref | — | HTMLInputElement | HTMLTextAreaElement | undefined | — |
textareaStyle | — | import("vue").StyleValue | — |
autosize | — | (AsamTextareaExpose)["autosize"] | — |
isComposing | — | boolean | — |
focus | — | () => void | — |
blur | — | () => void | — |
select | — | () => void | — |
clear | — | (event?: MouseEvent) => void | — |
resizeTextarea | — | () => void | — |
用法与契约补充说明
ASAM 扩展与迁移
原 Input 的 type="textarea" 改为 AsamTextarea，移除 type，保留 rows、autosize、resize 与字数配置。四档尺寸控制字体、行高和密度；多行高度还由内容、行数和 autosize 决定。prefix/suffix/prepend/append 类型见 API；装饰型单行组合请使用 Input。
清空、字素与浏览器高度
clearable 和 clearIcon 提供多行清空，countGraphemes 承接字素计数；开启后不设置原生 minlength/maxlength。autosize 的 minRows/maxRows 限制自动高度，resize 控制用户拖动方向。隐藏容器重新显示时可调用 resizeTextarea；Firefox 的高度重绘依照固定上游修复，仍须在目标 Firefox 实际验证。
关联组件
参数与事件补充说明
参数与事件说明
id
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（源码表达式；ASAM 声明）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
modelValue
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
modelModifiers
必填：否；声明来源：ASAM 声明。
modelModifiers 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
modelModifiers.lazy:true | undefined— 上游声明枚举：
truemodelModifiers.number:true | undefined— 上游声明枚举：
truemodelModifiers.trim:true | undefined— 上游声明枚举：
true
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => ({})（2.14.7；源码事实，未作为 ASAM 运行实测）
maxlength
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
minlength
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
resize
必填：否；声明来源：ASAM 声明。
resize 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："horizontal" / "vertical" / "none" / "both"
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
autosize
必填：否；声明来源：ASAM 声明。
autosize 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
autosize.minRows:number | undefined— 上游声明autosize.maxRows:number | undefined— 上游声明
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：false（2.14.7；源码事实，未作为 ASAM 运行实测）
autocomplete
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：off（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'off'（2.14.7；源码事实，未作为 ASAM 运行实测）
formatter
必填：否；声明来源：ASAM 声明。
formatter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: string): string
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
parser
必填：否；声明来源：ASAM 声明。
parser 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: string): string
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
placeholder
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
form
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
readonly
必填：否；声明来源：ASAM 声明。
readonly 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearable
必填：否；声明来源：ASAM 声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearIcon
必填：否；声明来源：ASAM 声明。
clearIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamTextareaProps)["clearIcon"]>, (...args: never[]) => unknown>>[1]): any
clearIcon.__isFragment:undefined— 依赖声明clearIcon.__isTeleport:undefined— 依赖声明clearIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：CircleClose（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：CircleClose（2.14.7；源码事实，未作为 ASAM 运行实测）
showWordLimit
必填：否；声明来源：ASAM 声明。
showWordLimit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
wordLimitPosition
必填：否；声明来源：ASAM 声明。
wordLimitPosition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："outside" / "inside"
默认值与来源
未知 / 未声明固定上游文档默认："inside"（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'inside'（2.14.7；源码事实，未作为 ASAM 运行实测）
suffixIcon
必填：否；声明来源：ASAM 声明。
suffixIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamTextareaProps)["suffixIcon"]>, (...args: never[]) => unknown>>[1]): any
suffixIcon.__isFragment:undefined— 依赖声明suffixIcon.__isTeleport:undefined— 依赖声明suffixIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
prefixIcon
必填：否；声明来源：ASAM 声明。
prefixIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamTextareaProps)["prefixIcon"]>, (...args: never[]) => unknown>>[1]): any
prefixIcon.__isFragment:undefined— 依赖声明prefixIcon.__isTeleport:undefined— 依赖声明prefixIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
containerRole
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
tabindex
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
validateEvent
必填：否；声明来源：ASAM 声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（源码表达式；ASAM 声明）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
inputStyle
必填：否；声明来源：ASAM 声明。
inputStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（源码表达式；ASAM 声明）固定上游文档默认：{}（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => mutable({} as const)（2.14.7；源码事实，未作为 ASAM 运行实测）
autofocus
必填：否；声明来源：ASAM 声明。
autofocus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
rows
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：2（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：2（2.14.7；源码事实，未作为 ASAM 运行实测）
ariaLabel
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
inputmode
必填：否；声明来源：ASAM 声明。
inputmode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："text" / "email" / "search" / "tel" / "url" / "none" / "numeric" / "decimal"
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
name
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
countGraphemes
必填：否；声明来源：ASAM 声明。
countGraphemes 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: string): number
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamTextareaProps 公开类型视图
import type { Attrs } from 'vue';
import type { AsamTextareaProps, AsamControlSize, AsamTextareaExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTextareaProps
type PublicContract = {
readonly "id"?: string | undefined;
readonly "size"?: AsamControlSize | undefined;
readonly "disabled"?: boolean | undefined;
readonly "modelValue"?: string | number | null | undefined;
readonly "modelModifiers"?: (AsamTextareaProps)["modelModifiers"];
readonly "maxlength"?: string | number | undefined;
readonly "minlength"?: string | number | undefined;
readonly "resize"?: "horizontal" | "vertical" | "none" | "both" | undefined;
readonly "autosize"?: (AsamTextareaProps)["autosize"];
readonly "autocomplete"?: string | undefined;
readonly "formatter"?: ((value: string) => string) | undefined;
readonly "parser"?: ((value: string) => string) | undefined;
readonly "placeholder"?: string | undefined;
readonly "form"?: string | undefined;
readonly "readonly"?: boolean | undefined;
readonly "clearable"?: boolean | undefined;
readonly "clearIcon"?: (AsamTextareaProps)["clearIcon"];
readonly "showWordLimit"?: boolean | undefined;
readonly "wordLimitPosition"?: "outside" | "inside" | undefined;
readonly "suffixIcon"?: (AsamTextareaProps)["suffixIcon"];
readonly "prefixIcon"?: (AsamTextareaProps)["prefixIcon"];
readonly "containerRole"?: string | undefined;
readonly "tabindex"?: string | number | undefined;
readonly "validateEvent"?: boolean | undefined;
readonly "inputStyle"?: import("vue").StyleValue;
readonly "autofocus"?: boolean | undefined;
readonly "rows"?: number | undefined;
readonly "ariaLabel"?: string | undefined;
readonly "inputmode"?: "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
readonly "name"?: string | undefined;
readonly "countGraphemes"?: ((value: string) => number) | undefined;
};参数与事件说明
update:modelValue
必填：是；声明来源：ASAM 声明。
input
必填：是；声明来源：ASAM 声明。
change
必填：是；声明来源：ASAM 声明。
focus
必填：是；声明来源：ASAM 声明。
blur
必填：是；声明来源：ASAM 声明。
clear
必填：是；声明来源：ASAM 声明。
mouseenter
必填：是；声明来源：ASAM 声明。
mouseleave
必填：是；声明来源：ASAM 声明。
keydown
必填：是；声明来源：ASAM 声明。
compositionstart
必填：是；声明来源：ASAM 声明。
compositionupdate
必填：是；声明来源：ASAM 声明。
compositionend
必填：是；声明来源：ASAM 声明。
AsamTextareaEmits 公开类型视图
import type { AsamTextareaEmits } from '@asam-ui/ui';
// AsamTextareaEmits
type PublicContract = {
"update:modelValue": [value: string | number];
"input": [value: string];
"change": [value: string, event?: Event | undefined];
"focus": [event: FocusEvent];
"blur": [event: FocusEvent];
"clear": [event?: MouseEvent | undefined];
"mouseenter": [event: MouseEvent];
"mouseleave": [event: MouseEvent];
"keydown": [event: Event | KeyboardEvent];
"compositionstart": [event: CompositionEvent];
"compositionupdate": [event: CompositionEvent];
"compositionend": [event: CompositionEvent];
};参数与事件说明
prefix
必填：否；声明来源：ASAM 声明。
prefix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
suffix
必填：否；声明来源：ASAM 声明。
suffix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
prepend
必填：否；声明来源：ASAM 声明。
prepend 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
append
必填：否；声明来源：ASAM 声明。
append 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamTextareaSlots 公开类型视图
import type { AsamTextareaSlots } from '@asam-ui/ui';
// AsamTextareaSlots
type PublicContract = {
"prefix"?: (() => unknown) | undefined;
"suffix"?: (() => unknown) | undefined;
"prepend"?: (() => unknown) | undefined;
"append"?: (() => unknown) | undefined;
};响应式实例状态与基础编辑操作。
参数与事件说明
input
必填：是；声明来源：ASAM 声明。
input 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
textarea
必填：是；声明来源：ASAM 声明。
textarea 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
ref
必填：是；声明来源：ASAM 声明。
ref 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
textareaStyle
必填：是；声明来源：ASAM 声明。
textareaStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
autosize
必填：是；声明来源：ASAM 声明。
autosize 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
autosize.minRows:number | undefined— 上游声明autosize.maxRows:number | undefined— 上游声明
isComposing
必填：是；声明来源：ASAM 声明。
isComposing 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
focus
必填：是；声明来源：ASAM 声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
blur
必填：是；声明来源：ASAM 声明。
blur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
select
必填：是；声明来源：ASAM 声明。
select 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
clear
必填：是；声明来源：ASAM 声明。
clear 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event?: MouseEvent | undefined): void
resizeTextarea
必填：是；声明来源：ASAM 声明。
resizeTextarea 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamTextareaExpose 公开类型视图
import type { AsamTextareaExpose, AsamTextareaProps } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTextareaExpose
type PublicContract = {
readonly "input": HTMLInputElement | undefined;
readonly "textarea": HTMLTextAreaElement | undefined;
readonly "ref": HTMLInputElement | HTMLTextAreaElement | undefined;
readonly "textareaStyle": import("vue").StyleValue;
readonly "autosize": (AsamTextareaExpose)["autosize"];
readonly "isComposing": boolean;
"focus": () => void;
"blur": () => void;
"select": () => void;
"clear": (event?: MouseEvent) => void;
"resizeTextarea": () => void;
};