使用场景
适合关键词、标签等自由文本集合。v-model 使用 string[] 或 undefined；按 trigger 指定的按键或 delimiter 分隔符生成标签。
新增、删除与数量上限
默认按 Enter 添加标签。max 限制数量，clearable 提供整体清空；事件分别记录添加和删除的内容。
新增、删除与数量上限
vue
<template>
<div class="example">
<AsamInputTag
v-model="tags"
v-bind="{ class: 'field', 'aria-label': '项目标签' }"
placeholder="输入后按 Enter"
:max="5"
clearable
@add-tag="event = '新增：' + String($event)"
@remove-tag="(value, index) => (event = '删除：' + value + '，索引 ' + index)"
/>
<output>标签：{{ tags?.join('、') }}；{{ event }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInputTagBasicExample' });
import { ref } from 'vue';
import { AsamInputTag } from '@asam-ui/ui';
const tags = ref<string[] | undefined>(['设计', '开发']);
const event = 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>vue
<template>
<div class="example">
<AsamInputTag
v-model="tags"
v-bind="{ class: 'field', 'aria-label': '项目标签' }"
placeholder="输入后按 Enter"
:max="5"
clearable
@add-tag="event = '新增：' + String($event)"
@remove-tag="(value, index) => (event = '删除：' + value + '，索引 ' + index)"
/>
<output>标签：{{ tags?.join('、') }}；{{ event }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamInputTagBasicExample' });
import { ref } from 'vue';
import { AsamInputTag } from '@asam-ui/ui';
const tags = ref(['设计', '开发']);
const event = 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>分隔、拖动与折叠
逗号生成标签；saveOnBlur 保存失焦时尚未提交的文字。拖动改变顺序，折叠只改变显示。
分隔、拖动与折叠
vue
<template>
<div class="example">
<AsamInputTag
v-model="tags"
v-bind="{ class: 'field', 'aria-label': '可排序标签' }"
delimiter=","
draggable
save-on-blur
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="2"
tag-type="success"
tag-effect="plain"
@drag-tag="(oldIndex, newIndex) => (order = oldIndex + ' → ' + newIndex)"
/>
<output>顺序：{{ tags?.join('、') }}；拖动：{{ order }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInputTagDelimiterExample' });
import { ref } from 'vue';
import { AsamInputTag } from '@asam-ui/ui';
const tags = ref<string[] | undefined>(['需求', '设计', '开发', '验证']);
const order = 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>vue
<template>
<div class="example">
<AsamInputTag
v-model="tags"
v-bind="{ class: 'field', 'aria-label': '可排序标签' }"
delimiter=","
draggable
save-on-blur
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="2"
tag-type="success"
tag-effect="plain"
@drag-tag="(oldIndex, newIndex) => (order = oldIndex + ' → ' + newIndex)"
/>
<output>顺序：{{ tags?.join('、') }}；拖动：{{ order }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamInputTagDelimiterExample' });
import { ref } from 'vue';
import { AsamInputTag } from '@asam-ui/ui';
const tags = ref(['需求', '设计', '开发', '验证']);
const order = 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>标签插槽与实例操作
tag 插槽携带 value、index，prefix/suffix 用于输入装饰。实例公开 focus、blur。
标签插槽与实例操作
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="example">
<AsamInputTag
ref="input"
v-model="tags"
v-bind="{ class: 'field', 'aria-label': '编号标签' }"
>
<template #prefix>
<CollectionTag style="width: 16px" />
</template>
<template #tag="{ value, index }"> {{ index + 1 }} · {{ value }} </template>
<template #suffix> 标签 </template>
</AsamInputTag>
<div class="row">
<AsamButton type="default" @click="input?.focus()"> 聚焦标签 </AsamButton>
<AsamButton type="default" @click="input?.blur()"> 失焦标签 </AsamButton>
</div>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInputTagSlotsExample' });
import { ref } from 'vue';
import { AsamInputTag, AsamButton } from '@asam-ui/ui';
import type { AsamInputTagExpose } from '@asam-ui/ui';
import { CollectionTag } from '@asam-ui/icons-vue';
const input = ref<AsamInputTagExpose>();
const tags = ref<string[] | undefined>(['ASAM', 'Vue']);
</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>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="example">
<AsamInputTag
ref="input"
v-model="tags"
v-bind="{ class: 'field', 'aria-label': '编号标签' }"
>
<template #prefix>
<CollectionTag style="width: 16px" />
</template>
<template #tag="{ value, index }"> {{ index + 1 }} · {{ value }} </template>
<template #suffix> 标签 </template>
</AsamInputTag>
<div class="row">
<AsamButton type="default" @click="input?.focus()"> 聚焦标签 </AsamButton>
<AsamButton type="default" @click="input?.blur()"> 失焦标签 </AsamButton>
</div>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamInputTagSlotsExample' });
import { ref } from 'vue';
import { AsamInputTag, AsamButton } from '@asam-ui/ui';
import { CollectionTag } from '@asam-ui/icons-vue';
const input = ref();
const tags = ref(['ASAM', 'Vue']);
</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 验证继承响应。
四档密度与继承
vue
<template>
<div class="example">
<div class="row">
<AsamInputTag
size="large"
v-bind="{ class: 'field', 'aria-label': 'large尺寸' }"
:model-value="['ASAM']"
/>
<AsamInputTag
size="big"
v-bind="{ class: 'field', 'aria-label': 'big尺寸' }"
:model-value="['ASAM']"
/>
<AsamInputTag
size="default"
v-bind="{ class: 'field', 'aria-label': 'default尺寸' }"
:model-value="['ASAM']"
/>
<AsamInputTag
size="small"
v-bind="{ class: 'field', 'aria-label': 'small尺寸' }"
:model-value="['ASAM']"
/>
</div>
<AsamConfigProvider :size="density">
<div class="example">
<AsamInputTag
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: 'AsamInputTagSizesExample' });
import { ref } from 'vue';
import { AsamInputTag, 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>vue
<template>
<div class="example">
<div class="row">
<AsamInputTag
size="large"
v-bind="{ class: 'field', 'aria-label': 'large尺寸' }"
:model-value="['ASAM']"
/>
<AsamInputTag
size="big"
v-bind="{ class: 'field', 'aria-label': 'big尺寸' }"
:model-value="['ASAM']"
/>
<AsamInputTag
size="default"
v-bind="{ class: 'field', 'aria-label': 'default尺寸' }"
:model-value="['ASAM']"
/>
<AsamInputTag
size="small"
v-bind="{ class: 'field', 'aria-label': 'small尺寸' }"
:model-value="['ASAM']"
/>
</div>
<AsamConfigProvider :size="density">
<div class="example">
<AsamInputTag
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: 'AsamInputTagSizesExample' });
import { ref } from 'vue';
import { AsamInputTag, 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 扩展与迁移
四档密度属于 ASAM 扩展。自由字符串标签使用本组件；从固定选项选择多个值请使用 Select。迁移时将单行字符串模型改为标签数组；add-tag 可能为单字符串或字符串数组，不能只按单值处理。
标签编辑完整用法
trigger 选择 Enter 或 Space，saveOnBlur 控制失焦保存。 完整说明。
触发、上限、折叠与拖拽
vue
<template>
<!-- prettier-ignore -->
<div class="example">
<div class="row">
<label>触发键<AsamSelect v-model="trigger">
<AsamOption label="回车键" :value='"Enter"'>输入</AsamOption>
<AsamOption label="空格键" :value='"Space"'>间距</AsamOption>
</AsamSelect>
</label>
<AsamCheckboxItem v-model="collapse"> 折叠标签</AsamCheckboxItem>
<AsamCheckboxItem v-model="saveOnBlur"> 失焦保存</AsamCheckboxItem>
</div>
<AsamInputTag
v-model="tags"
:trigger="trigger"
:max="4"
draggable
:save-on-blur="saveOnBlur"
:collapse-tags="collapse"
collapse-tags-tooltip
:max-collapse-tags="1"
clearable
:clear-icon="clearIcon"
aria-label="最多四个标签"
@add-tag="record('add', $event)"
@remove-tag="(value, index) => record('remove', { value, index })"
@drag-tag="(from, to, value) => record('drag', { from, to, value })"
@clear="record('clear', null)"
/>
<output>{{ tags }}；{{ event }}</output>
<p class="example-paragraph">拖动已创建标签改变顺序；最多四个标签；折叠时悬停 +N 查看其余标签。</p>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInputTagBehaviorExample' });
import { ref, h } from 'vue';
import { AsamSelect, AsamOption, AsamCheckboxItem, AsamInputTag } from '@asam-ui/ui';
const tags = ref(['one', 'two']);
const trigger = ref<'Enter' | 'Space'>('Enter');
const collapse = ref(false);
const saveOnBlur = ref(true);
const event = ref('');
const clearIcon = () => h('span', { 'aria-hidden': 'true' }, '×');
function record(name: string, value: unknown) {
event.value = name + ': ' + JSON.stringify(value);
}
</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>vue
<template>
<!-- prettier-ignore -->
<div class="example">
<div class="row">
<label>触发键<AsamSelect v-model="trigger">
<AsamOption label="回车键" :value='"Enter"'>输入</AsamOption>
<AsamOption label="空格键" :value='"Space"'>间距</AsamOption>
</AsamSelect>
</label>
<AsamCheckboxItem v-model="collapse"> 折叠标签</AsamCheckboxItem>
<AsamCheckboxItem v-model="saveOnBlur"> 失焦保存</AsamCheckboxItem>
</div>
<AsamInputTag
v-model="tags"
:trigger="trigger"
:max="4"
draggable
:save-on-blur="saveOnBlur"
:collapse-tags="collapse"
collapse-tags-tooltip
:max-collapse-tags="1"
clearable
:clear-icon="clearIcon"
aria-label="最多四个标签"
@add-tag="record('add', $event)"
@remove-tag="(value, index) => record('remove', { value, index })"
@drag-tag="(from, to, value) => record('drag', { from, to, value })"
@clear="record('clear', null)"
/>
<output>{{ tags }}；{{ event }}</output>
<p class="example-paragraph">拖动已创建标签改变顺序；最多四个标签；折叠时悬停 +N 查看其余标签。</p>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamInputTagBehaviorExample' });
import { ref, h } from 'vue';
import { AsamSelect, AsamOption, AsamCheckboxItem, AsamInputTag } from '@asam-ui/ui';
const tags = ref(['one', 'two']);
const trigger = ref('Enter');
const collapse = ref(false);
const saveOnBlur = ref(true);
const event = ref('');
const clearIcon = () => h('span', { 'aria-hidden': 'true' }, '×');
function record(name, value) {
event.value = name + ': ' + JSON.stringify(value);
}
</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>readonly 和 disabled 原样委托原生。底层组件 的 readonly 模式仍可能响应 Backspace 删除标签并触发模型、change、remove-tag；ASAM 原样转发这些通知，不额外过滤。需要限制业务变更时，由应用控制父级模型的接受策略。
API 阅读方式
下方 API 来自当前公开类型与运行默认值。默认值标为“未知 / 未声明”时，不代表 false、空值或未支持。省略 size 保留祖先上下文继承。省略 disabled 保留表单禁用继承；validateEvent 控制校验事件，不用 disabled 代替。
五入口表单继承与校验
本完整 TS/JS 组合实际实例化单行、密码、多行、建议和标签五个入口。省略各入口 disabled 以继承表单状态；validateEvent 控制各自 change/blur 自动校验。切换禁用不会清空模型，关闭自动校验不影响编辑。五页注册同一组合源码的自包含副本，复制当前示例即可运行，无需从其他组件页补齐文件。
五入口表单继承与校验
vue
<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>vue
<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>原生委托与事件记录
下方完整 TS/JS 示例记录模型及事件顺序，并可切换禁用、只读和自动校验状态。 完整说明。
原生委托与事件记录
vue
<template>
<section class="native-comparison">
<AsamCheckboxItem v-model="disabled">禁用</AsamCheckboxItem>
<AsamCheckboxItem v-model="readonly">只读</AsamCheckboxItem>
<AsamCheckboxItem v-model="validateEvent">自动校验</AsamCheckboxItem>
<p class="example-paragraph">ASAM</p>
<AsamInputTag
v-model="asam"
:disabled="disabled"
:readonly="readonly"
:validate-event="validateEvent"
aria-label="ASAM 原生委托"
@update:model-value="(...args) => record('ASAM', 'update:modelValue', ...args)"
@input="(...args) => record('ASAM', 'input', ...args)"
@change="(...args) => record('ASAM', 'change', ...args)"
@blur="(...args) => record('ASAM', 'blur', ...args)"
/>
<AsamButton type="default" native-type="button" @click="events = []"
>清空事件记录</AsamButton
>
<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>
</section>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamInputTag } from '@asam-ui/ui';
defineOptions({ name: 'AsamInputTagNativeDelegationExample' });
const asam = ref<string[] | undefined>(['一']);
const disabled = ref(false);
const readonly = ref(false);
const validateEvent = ref(true);
const events = ref<{ source: string; event: string; values: unknown[] }[]>([]);
function record(source: string, event: string, ...values: unknown[]) {
events.value.push({
source,
event,
values: values.map((value) => (value instanceof Event ? value.type : value))
});
}
</script>
<style scoped>
.native-comparison {
display: grid;
gap: var(--asam-space-sm);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<section class="native-comparison">
<AsamCheckboxItem v-model="disabled">禁用</AsamCheckboxItem>
<AsamCheckboxItem v-model="readonly">只读</AsamCheckboxItem>
<AsamCheckboxItem v-model="validateEvent">自动校验</AsamCheckboxItem>
<p class="example-paragraph">ASAM</p>
<AsamInputTag
v-model="asam"
:disabled="disabled"
:readonly="readonly"
:validate-event="validateEvent"
aria-label="ASAM 原生委托"
@update:model-value="(...args) => record('ASAM', 'update:modelValue', ...args)"
@input="(...args) => record('ASAM', 'input', ...args)"
@change="(...args) => record('ASAM', 'change', ...args)"
@blur="(...args) => record('ASAM', 'blur', ...args)"
/>
<AsamButton type="default" native-type="button" @click="events = []"
>清空事件记录</AsamButton
>
<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>
</section>
</template>
<script setup>
import { ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamInputTag } from '@asam-ui/ui';
defineOptions({ name: 'AsamInputTagNativeDelegationExample' });
const asam = ref(['一']);
const disabled = ref(false);
const readonly = ref(false);
const validateEvent = ref(true);
const events = ref([]);
function record(source, event, ...values) {
events.value.push({
source,
event,
values: values.map((value) => (value instanceof Event ? value.type : value))
});
}
</script>
<style scoped>
.native-comparison {
display: grid;
gap: var(--asam-space-sm);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>API
属性 AsamInputTagProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
modelValue | 输入值 | string[] | undefined | — |
max | 可添加标签的最大数量 | number | undefined | — |
tagType | 标签类型 | enum"primary" | "success" | "danger" | "warning" | "info"完整类型："primary" | "success" | "danger" | "warning" | "info" | undefined | — |
tagEffect | 标签效果 | enum"light" | "dark" | "plain"完整类型："light" | "dark" | "plain" | undefined | — |
effect | Tooltip 主题，内置了 dark / light 两种 | enum"light" | "dark"完整类型：(AsamInputTagProps)["effect"] | — |
trigger | 触发输入标签的按键 | enum"Enter" | "Space"完整类型："Enter" | "Space" | undefined | — |
draggable | 是否可以拖动标签 | boolean | undefined | false |
delimiter | 在匹配分隔符时添加标签 | string | RegExp | undefined | — |
size | 显式控件密度；省略时继承按钮组、表单和配置提供器。 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
clearable | 是否显示清除按钮 | boolean | undefined | false |
clearIcon | 自定义清除图标 | (AsamInputTagProps)["clearIcon"] | — |
disabled | 是否禁用 | boolean | undefined | false |
validateEvent | 是否触发表单验证 | boolean | undefined | false |
readonly | 原生输入的只读状态。 | boolean | undefined | false |
autofocus | 原生输入自动聚焦。 | boolean | undefined | false |
id | 等价于原生 input id 属性 | string | undefined | — |
tabindex | 等价于原生 tabindex 属性 | string | number | undefined | — |
maxlength | 等价于原生 maxlength 属性 | string | number | undefined | — |
minlength | 等价于原生 minlength 属性 | string | number | undefined | — |
placeholder | 输入框占位文本 | string | undefined | — |
autocomplete | 原生输入自动完成；联合类型包含大量字面量时可能触发 TS2590，详见 Vue 问题 10514。 | string | undefined | — |
saveOnBlur | 当输入失去焦点时是否保存输入值 | boolean | undefined | false |
collapseTags | 是否将多个标签折叠为文字。 | boolean | undefined | false |
collapseTagsTooltip | 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。要使用此功能，collapse-tags的值必须为true | boolean | undefined | false |
maxCollapseTags | 需要显示的 Tag 的最大数量。只有当 collapse-tags 设置为 true 时才会生效。 | number | undefined | — |
ariaLabel | 原生 aria-label属性 | string | undefined | — |
事件 AsamInputTagEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [value?: string[] | undefined] | — |
change | — | [value?: string[] | undefined] | — |
input | — | [value: string] | — |
add-tag | — | [value: string | string[]] | — |
remove-tag | — | [value: string, index: number] | — |
drag-tag | — | [oldIndex: number, newIndex: number, value: string] | — |
focus | — | [event: FocusEvent] | — |
blur | — | [event: FocusEvent] | — |
clear | — | (AsamInputTagEmits)["clear"] | — |
插槽 AsamInputTagSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
prefix | — | (() => unknown) | undefined | — |
suffix | — | (() => unknown) | undefined | — |
tag | — | ((props: { value: string; index: number; }) => unknown) | undefined | — |
实例方法与状态 AsamInputTagExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
focus | — | () => void | — |
blur | — | () => void | — |
用法与契约补充说明
标签编辑完整用法
trigger 选择 Enter 或 Space，saveOnBlur 控制失焦保存。max 限制标签数，draggable 允许重排并提供 oldIndex/newIndex/value。collapseTags 配合 maxCollapseTags 折叠，collapseTagsTooltip 通过悬停展示其余标签。clearIcon 配置清空标记；tagType/tagEffect/effect 配置标签及提示样式。只读保留显示，禁用阻止编辑；自定义 tag/prefix/suffix 见已有插槽示例。
原生委托与事件记录
下方完整 TS/JS 示例记录模型及事件顺序，并可切换禁用、只读和自动校验状态。省略的基础参数使用原生 defaults；显式 undefined/null/false 原样传入，合法值范围见 API。四档 size 是 ASAM 的视觉桥接；Password 额外固定 type=password，并在省略 showPassword 时启用显隐入口。
关联组件
参数与事件补充说明
参数与事件说明
modelValue
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
max
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tagType
必填：否；声明来源：ASAM 声明。
tagType 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："primary" / "success" / "danger" / "warning" / "info"
默认值与来源
未知 / 未声明固定上游文档默认：info（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tagEffect
必填：否；声明来源：ASAM 声明。
tagEffect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark" / "plain"
默认值与来源
未知 / 未声明固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
effect
必填：否；声明来源：ASAM 声明。
effect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark"
默认值与来源
未知 / 未声明固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'light'（2.14.7；源码事实，未作为 ASAM 运行实测）
trigger
必填：否；声明来源：ASAM 声明。
trigger 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："Enter" / "Space"
默认值与来源
未知 / 未声明固定上游文档默认：Enter（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：EVENT_CODE.enter（2.14.7；源码事实，未作为 ASAM 运行实测）
draggable
必填：否；声明来源：ASAM 声明。
draggable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
delimiter
必填：否；声明来源：ASAM 声明。
delimiter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
delimiter.exec:(string: string) => RegExpExecArray | null— 依赖声明使用正则表达式检索字符串，返回匹配结果数组。
事件参数：
(string: string): RegExpExecArray | null嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
delimiter.test:(string: string) => boolean— 依赖声明返回布尔值，表示被检索字符串是否包含匹配模式。
事件参数：
(string: string): boolean嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
delimiter.source:string— 依赖声明返回正则表达式模式文本的只读副本；regExp 参数为正则对象，可以使用变量或字面量。
delimiter.global:boolean— 依赖声明返回正则表达式 global（g）标志的只读布尔状态，默认为 false。
枚举：
false/truedelimiter.ignoreCase:boolean— 依赖声明返回正则表达式 ignoreCase（i）标志的只读布尔状态，默认为 false。
枚举：
false/truedelimiter.multiline:boolean— 依赖声明返回正则表达式 multiline（m）标志的只读布尔状态，默认为 false。
枚举：
false/truedelimiter.lastIndex:number— 依赖声明delimiter.compile:(pattern: string, flags?: string) => RegExp— 依赖声明事件参数：
(pattern: string, flags?: string | undefined): RegExp嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
delimiter.flags:string— 依赖声明返回正则表达式标志的只读字符串，按 g（全局）、i（忽略大小写）、m（多行）、u（Unicode）、y（粘连）顺序排列；未设置标志时为空字符串。
delimiter.sticky:boolean— 依赖声明返回正则表达式 sticky（y）标志的只读布尔状态，默认为 false。
枚举：
false/truedelimiter.unicode:boolean— 依赖声明返回正则表达式 Unicode（u）标志的只读布尔状态，默认为 false。
枚举：
false/truedelimiter.dotAll:boolean— 依赖声明返回正则表达式 dotAll（s）标志的只读布尔状态，默认为 false。
枚举：
false/truedelimiter.hasIndices:boolean— 依赖声明返回正则表达式 hasIndices（d）标志的只读布尔状态，默认为 false。
枚举：
false/truedelimiter.__@match@8899:(string: string) => RegExpMatchArray | null— 依赖声明使用此正则表达式匹配字符串，并返回包含匹配结果的数组。
事件参数：
(string: string): RegExpMatchArray | null嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
delimiter.__@replace@8901:{ (string: string, replaceValue: string): string; (string: string, replacer: (substring: string, ...args: any[]) => string): string; }— 依赖声明使用此正则表达式替换字符串中的文本。
事件参数：
(string: string, replaceValue: string): string事件参数：
(string: string, replacer: (substring: string, ...args: any[]) => string): string嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
delimiter.__@search@8904:(string: string) => number— 依赖声明返回使用此正则表达式检索时，首个匹配子串的起始位置。
事件参数：
(string: string): number嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
delimiter.__@split@8906:(string: string, limit?: number) => string[]— 依赖声明使用与此正则匹配的内容分隔原始字符串，返回子串数组；若含捕获组，每次匹配的捕获结果也会插入数组，包括 undefined 结果。
事件参数：
(string: string, limit?: number | undefined): string[]嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
delimiter.__@matchAll@8908:(str: string) => RegExpStringIterator<RegExpExecArray>— 依赖声明使用此正则表达式匹配字符串，并返回包含匹配结果的可迭代对象。
事件参数：
(str: string): RegExpStringIterator<RegExpExecArray>嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
clearable
必填：否；声明来源：ASAM 声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearIcon
必填：否；声明来源：ASAM 声明。
clearIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamInputTagProps)["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 运行实测）
disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
validateEvent
必填：否；声明来源：ASAM 声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
readonly
必填：否；声明来源：ASAM 声明。
readonly 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
autofocus
必填：否；声明来源：ASAM 声明。
autofocus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
id
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
tabindex
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（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 运行实测）
placeholder
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
autocomplete
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：off（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'off'（2.14.7；源码事实，未作为 ASAM 运行实测）
saveOnBlur
必填：否；声明来源：ASAM 声明。
saveOnBlur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
collapseTags
必填：否；声明来源：ASAM 声明。
collapseTags 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
collapseTagsTooltip
必填：否；声明来源：ASAM 声明。
collapseTagsTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
maxCollapseTags
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：1（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：1（2.14.7；源码事实，未作为 ASAM 运行实测）
ariaLabel
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
AsamInputTagProps 公开类型视图
ts
import type { Attrs } from 'vue';
import type { AsamInputTagProps, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamInputTagProps
type PublicContract = {
readonly "modelValue"?: string[] | undefined;
readonly "max"?: number | undefined;
readonly "tagType"?: "primary" | "success" | "danger" | "warning" | "info" | undefined;
readonly "tagEffect"?: "light" | "dark" | "plain" | undefined;
readonly "effect"?: (AsamInputTagProps)["effect"];
readonly "trigger"?: "Enter" | "Space" | undefined;
readonly "draggable"?: boolean | undefined;
readonly "delimiter"?: string | RegExp | undefined;
readonly "size"?: AsamControlSize | undefined;
readonly "clearable"?: boolean | undefined;
readonly "clearIcon"?: (AsamInputTagProps)["clearIcon"];
readonly "disabled"?: boolean | undefined;
readonly "validateEvent"?: boolean | undefined;
readonly "readonly"?: boolean | undefined;
readonly "autofocus"?: boolean | undefined;
readonly "id"?: string | undefined;
readonly "tabindex"?: string | number | undefined;
readonly "maxlength"?: string | number | undefined;
readonly "minlength"?: string | number | undefined;
readonly "placeholder"?: string | undefined;
readonly "autocomplete"?: string | undefined;
readonly "saveOnBlur"?: boolean | undefined;
readonly "collapseTags"?: boolean | undefined;
readonly "collapseTagsTooltip"?: boolean | undefined;
readonly "maxCollapseTags"?: number | undefined;
readonly "ariaLabel"?: string | undefined;
};参数与事件说明
update:modelValue
必填：是；声明来源：ASAM 声明。
change
必填：是；声明来源：ASAM 声明。
input
必填：是；声明来源：ASAM 声明。
add-tag
必填：是；声明来源：ASAM 声明。
remove-tag
必填：是；声明来源：ASAM 声明。
drag-tag
必填：是；声明来源：ASAM 声明。
focus
必填：是；声明来源：ASAM 声明。
blur
必填：是；声明来源：ASAM 声明。
clear
必填：是；声明来源：ASAM 声明。
AsamInputTagEmits 公开类型视图
ts
import type { AsamInputTagEmits } from '@asam-ui/ui';
// AsamInputTagEmits
type PublicContract = {
"update:modelValue": [value?: string[] | undefined];
"change": [value?: string[] | undefined];
"input": [value: string];
"add-tag": [value: string | string[]];
"remove-tag": [value: string, index: number];
"drag-tag": [oldIndex: number, newIndex: number, value: string];
"focus": [event: FocusEvent];
"blur": [event: FocusEvent];
"clear": (AsamInputTagEmits)["clear"];
};参数与事件说明
prefix
必填：否；声明来源：ASAM 声明。
prefix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
suffix
必填：否；声明来源：ASAM 声明。
suffix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
tag
必填：否；声明来源：ASAM 声明。
tag 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: { value: string; index: number; }): unknown
AsamInputTagSlots 公开类型视图
ts
import type { AsamInputTagSlots } from '@asam-ui/ui';
// AsamInputTagSlots
type PublicContract = {
"prefix"?: (() => unknown) | undefined;
"suffix"?: (() => unknown) | undefined;
"tag"?: ((props: { value: string; index: number; }) => unknown) | undefined;
};参数与事件说明
focus
必填：是；声明来源：ASAM 声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
blur
必填：是；声明来源：ASAM 声明。
blur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamInputTagExpose 公开类型视图
ts
import type { AsamInputTagExpose } from '@asam-ui/ui';
// AsamInputTagExpose
type PublicContract = {
"focus": () => void;
"blur": () => void;
};