使用场景
显示状态、分类或可关闭的短文本。
基础用法与状态
下列示例只使用本入口的实际公开能力。
基础用法与状态
vue
<template>
<div class="flow">
<AsamTag v-for="size in sizes" :key="size" v-bind="{ size, type: 'success' }">
<span>{{ size }} 草稿</span>
</AsamTag>
<AsamTag v-if="visible" closable @close="visible = false">可移除标签</AsamTag>
<AsamButton type="default" v-else native-type="button" @click="visible = true"
>恢复标签</AsamButton
>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTagBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamTag } from '@asam-ui/ui';
const visible = ref(true);
import type { AsamControlSize } from '@asam-ui/ui';
const sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];
</script>
<style scoped>
.flow {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
</style>vue
<template>
<div class="flow">
<AsamTag v-for="size in sizes" :key="size" v-bind="{ size, type: 'success' }">
<span>{{ size }} 草稿</span>
</AsamTag>
<AsamTag v-if="visible" closable @close="visible = false">可移除标签</AsamTag>
<AsamButton type="default" v-else native-type="button" @click="visible = true"
>恢复标签</AsamButton
>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTagBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamTag } from '@asam-ui/ui';
const visible = ref(true);
const sizes = ['large', 'big', 'default', 'small'];
</script>
<style scoped>
.flow {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
</style>使用约定
type、effect、round、hit、color、closable 和 disableTransitions 设置呈现；close 只发出关闭意图，宿主负责从数据或视图移除。 完整说明。
完整使用场景
基础用法
由 type 属性来选择 tag 的类型。也可以通过 color 属性来自定义背景色。
基础用法
vue
<template>
<div class="flex gap-2">
<AsamTag type="primary">标签 1</AsamTag>
<AsamTag type="success">标签 2</AsamTag>
<AsamTag type="info">标签 3</AsamTag>
<AsamTag type="warning">标签 4</AsamTag>
<AsamTag type="danger">标签 5</AsamTag>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTagCapBasicDemo' });
import { AsamTag } from '@asam-ui/ui';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
</style>vue
<template>
<div class="flex gap-2">
<AsamTag type="primary">标签 1</AsamTag>
<AsamTag type="success">标签 2</AsamTag>
<AsamTag type="info">标签 3</AsamTag>
<AsamTag type="warning">标签 4</AsamTag>
<AsamTag type="danger">标签 5</AsamTag>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTagCapBasicDemo' });
import { AsamTag } from '@asam-ui/ui';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
</style>
可移除标签
设置 closable 属性可以定义一个标签是否可移除。它接受一个 Boolean。默认的标签移除时会附带渐变动画。如果不想使用，可以设置 disable-transitions 属性，它接受一个 Boolean，true 为关闭。当 Tag 被移除时会触发 close 事件。
可移除标签
vue
<template>
<div class="flex gap-2">
<AsamTag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
{{ tag.name }}
</AsamTag>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTagCapRemovableDemo' });
import { AsamTag } from '@asam-ui/ui';
import { ref } from 'vue';
import type { AsamTagProps } from '@asam-ui/ui';
interface TagsItem {
name: string;
type: AsamTagProps['type'];
}
const tags = ref<TagsItem[]>([
{ name: '标签一', type: 'primary' },
{ name: '标签二', type: 'success' },
{ name: '标签三', type: 'info' },
{ name: '标签四', type: 'warning' },
{ name: '标签五', type: 'danger' }
]);
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
</style>vue
<template>
<div class="flex gap-2">
<AsamTag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
{{ tag.name }}
</AsamTag>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTagCapRemovableDemo' });
import { AsamTag } from '@asam-ui/ui';
import { ref } from 'vue';
const tags = ref([
{ name: '标签一', type: 'primary' },
{ name: '标签二', type: 'success' },
{ name: '标签三', type: 'info' },
{ name: '标签四', type: 'warning' },
{ name: '标签五', type: 'danger' }
]);
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
</style>
动态编辑标签
动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现。
动态编辑标签
vue
<template>
<div class="flex gap-2">
<AsamTag
v-for="tag in dynamicTags"
:key="tag"
closable
:disable-transitions="false"
@close="handleClose(tag)"
>
{{ tag }}
</AsamTag>
<AsamInput
v-if="inputVisible"
ref="InputRef"
:model-value="inputValue"
class="w-20"
size="small"
v-bind="domEnterAttrs(handleInputConfirm)"
@update:model-value="
(value) => {
if (typeof value === 'string') inputValue = value;
}
"
@blur="handleInputConfirm"
/>
<!-- prettier-ignore -->
<AsamButton type="default"
v-else
class="button-new-tag"
size="small"
@click="showInput"
>
+ 新建标签
</AsamButton>
</div>
</template>
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue';
defineOptions({ name: 'AsamTagCapEditableDemo' });
import { AsamTag, AsamInput, AsamButton } from '@asam-ui/ui';
import { nextTick, ref } from 'vue';
import type { AsamInputExpose } from '@asam-ui/ui';
const inputValue = ref('');
const dynamicTags = ref(['标签一', '标签二', '标签三']);
const inputVisible = ref(false);
const InputRef = ref<AsamInputExpose>();
const handleClose = (tag: string) => {
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};
const showInput = () => {
inputVisible.value = true;
nextTick(() => {
InputRef.value!.input!.focus();
});
};
const handleInputConfirm = () => {
if (inputValue.value) {
dynamicTags.value.push(inputValue.value);
}
inputVisible.value = false;
inputValue.value = '';
};
const domEnterAttrs = (handler: () => void): Pick<HTMLAttributes, 'class' | 'onKeyup'> => ({
class: 'ui032-enter-input',
onKeyup: (event) => {
if (event.key === 'Enter') handler();
}
});
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
.w-20 {
width: 5rem;
}
</style>vue
<template>
<div class="flex gap-2">
<AsamTag
v-for="tag in dynamicTags"
:key="tag"
closable
:disable-transitions="false"
@close="handleClose(tag)"
>
{{ tag }}
</AsamTag>
<AsamInput
v-if="inputVisible"
ref="InputRef"
:model-value="inputValue"
class="w-20"
size="small"
v-bind="domEnterAttrs(handleInputConfirm)"
@update:model-value="
(value) => {
if (typeof value === 'string') inputValue = value;
}
"
@blur="handleInputConfirm"
/>
<!-- prettier-ignore -->
<AsamButton type="default"
v-else
class="button-new-tag"
size="small"
@click="showInput"
>
+ 新建标签
</AsamButton>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTagCapEditableDemo' });
import { AsamTag, AsamInput, AsamButton } from '@asam-ui/ui';
import { nextTick, ref } from 'vue';
const inputValue = ref('');
const dynamicTags = ref(['标签一', '标签二', '标签三']);
const inputVisible = ref(false);
const InputRef = ref();
const handleClose = (tag) => {
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};
const showInput = () => {
inputVisible.value = true;
nextTick(() => {
InputRef.value.input.focus();
});
};
const handleInputConfirm = () => {
if (inputValue.value) {
dynamicTags.value.push(inputValue.value);
}
inputVisible.value = false;
inputValue.value = '';
};
const domEnterAttrs = (handler) => ({
class: 'ui032-enter-input',
onKeyup: (event) => {
if (event.key === 'Enter') handler();
}
});
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
.w-20 {
width: 5rem;
}
</style>
尺寸
Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
使用 size 属性配置尺寸，可选的尺寸大小有: large, default 或 small
尺寸
vue
<template>
<div class="flex gap-2">
<AsamTag size="large">大尺寸</AsamTag>
<AsamTag>默认</AsamTag>
<AsamTag size="small">小尺寸</AsamTag>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTagCapSizesDemo' });
import { AsamTag } from '@asam-ui/ui';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
</style>vue
<template>
<div class="flex gap-2">
<AsamTag size="large">大尺寸</AsamTag>
<AsamTag>默认</AsamTag>
<AsamTag size="small">小尺寸</AsamTag>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTagCapSizesDemo' });
import { AsamTag } from '@asam-ui/ui';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
</style>
主题
Tag 组件提供了三个不同的主题：dark、light 和 plain。
通过设置 effect 属性来改变主题，默认为 light。
主题
vue
<template>
<div class="flex gap-2">
<span>深色</span>
<AsamTag v-for="item in items" :key="item.label" :type="item.type" effect="dark">
{{ item.label }}
</AsamTag>
</div>
<div class="flex gap-2 mt-4">
<span>浅色</span>
<AsamTag v-for="item in items" :key="item.label" :type="item.type" effect="light">
{{ item.label }}
</AsamTag>
</div>
<div class="flex gap-2 mt-4">
<span>朴素样式</span>
<AsamTag v-for="item in items" :key="item.label" :type="item.type" effect="plain">
{{ item.label }}
</AsamTag>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTagCapThemeDemo' });
import { AsamTag } from '@asam-ui/ui';
import { ref } from 'vue';
import type { AsamTagProps } from '@asam-ui/ui';
type Item = { type: AsamTagProps['type']; label: string };
const items = ref<Array<Item>>([
{ type: 'primary', label: '标签 1' },
{ type: 'success', label: '标签 2' },
{ type: 'info', label: '标签 3' },
{ type: 'warning', label: '标签 4' },
{ type: 'danger', label: '标签 5' }
]);
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
</style>vue
<template>
<div class="flex gap-2">
<span>深色</span>
<AsamTag v-for="item in items" :key="item.label" :type="item.type" effect="dark">
{{ item.label }}
</AsamTag>
</div>
<div class="flex gap-2 mt-4">
<span>浅色</span>
<AsamTag v-for="item in items" :key="item.label" :type="item.type" effect="light">
{{ item.label }}
</AsamTag>
</div>
<div class="flex gap-2 mt-4">
<span>朴素样式</span>
<AsamTag v-for="item in items" :key="item.label" :type="item.type" effect="plain">
{{ item.label }}
</AsamTag>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTagCapThemeDemo' });
import { AsamTag } from '@asam-ui/ui';
import { ref } from 'vue';
const items = ref([
{ type: 'primary', label: '标签 1' },
{ type: 'success', label: '标签 2' },
{ type: 'info', label: '标签 3' },
{ type: 'warning', label: '标签 4' },
{ type: 'danger', label: '标签 5' }
]);
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
</style>
圆角标签
Tag 可以像按钮组件一样变为圆角。
圆角标签
vue
<template>
<div class="flex gap-2">
<AsamTag v-for="item in items" :key="item.label" :type="item.type" effect="dark" round>
{{ item.label }}
</AsamTag>
</div>
<div class="flex gap-2 mt-4">
<AsamTag v-for="item in items" :key="item.label" :type="item.type" effect="light" round>
{{ item.label }}
</AsamTag>
</div>
<div class="flex gap-2 mt-4">
<AsamTag v-for="item in items" :key="item.label" :type="item.type" effect="plain" round>
{{ item.label }}
</AsamTag>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTagCapRoundedDemo' });
import { AsamTag } from '@asam-ui/ui';
import { ref } from 'vue';
import type { AsamTagProps } from '@asam-ui/ui';
type Item = { type: AsamTagProps['type']; label: string };
const items = ref<Array<Item>>([
{ type: 'primary', label: '标签 1' },
{ type: 'success', label: '标签 2' },
{ type: 'info', label: '标签 3' },
{ type: 'warning', label: '标签 4' },
{ type: 'danger', label: '标签 5' }
]);
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
</style>vue
<template>
<div class="flex gap-2">
<AsamTag v-for="item in items" :key="item.label" :type="item.type" effect="dark" round>
{{ item.label }}
</AsamTag>
</div>
<div class="flex gap-2 mt-4">
<AsamTag v-for="item in items" :key="item.label" :type="item.type" effect="light" round>
{{ item.label }}
</AsamTag>
</div>
<div class="flex gap-2 mt-4">
<AsamTag v-for="item in items" :key="item.label" :type="item.type" effect="plain" round>
{{ item.label }}
</AsamTag>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTagCapRoundedDemo' });
import { AsamTag } from '@asam-ui/ui';
import { ref } from 'vue';
const items = ref([
{ type: 'primary', label: '标签 1' },
{ type: 'success', label: '标签 2' },
{ type: 'info', label: '标签 3' },
{ type: 'warning', label: '标签 4' },
{ type: 'danger', label: '标签 5' }
]);
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
</style>
可选中的标签
有时候因为业务需求，我们可能会需要用到类似复选框的标签，但是按钮式的复选框的样式又不满足需求，此时我们就可以用到 check-tag组件。您可以在2.5.4中使用 type 属性。
check-tag 的基础使用方法，check-tag 提供的 API 非常简单。
可选中的标签
vue
<template>
<div class="flex gap-2">
<AsamCheckTag checked>已选中</AsamCheckTag>
<AsamCheckTag :checked="checked" @change="onChange">切换状态</AsamCheckTag>
<AsamCheckTag disabled>禁用</AsamCheckTag>
</div>
<div class="flex gap-2 mt-4">
<AsamCheckTag :checked="checked1" type="primary" @change="onChange1"> 标签 1 </AsamCheckTag>
<AsamCheckTag :checked="checked2" type="success" @change="onChange2"> 标签 2 </AsamCheckTag>
<AsamCheckTag :checked="checked3" type="info" @change="onChange3"> 标签 3 </AsamCheckTag>
<AsamCheckTag :checked="checked4" type="warning" @change="onChange4"> 标签 4 </AsamCheckTag>
<AsamCheckTag :checked="checked5" type="danger" @change="onChange5"> 标签 5 </AsamCheckTag>
<AsamCheckTag :checked="checked6" disabled type="success" @change="onChange6">
标签 6
</AsamCheckTag>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTagCapCheckableDemo' });
import { AsamCheckTag } from '@asam-ui/ui';
import { ref } from 'vue';
const checked = ref(false);
const checked1 = ref(true);
const checked2 = ref(true);
const checked3 = ref(true);
const checked4 = ref(true);
const checked5 = ref(true);
const checked6 = ref(true);
const onChange = (status: boolean) => {
checked.value = status;
};
const onChange1 = (status: boolean) => {
checked1.value = status;
};
const onChange2 = (status: boolean) => {
checked2.value = status;
};
const onChange3 = (status: boolean) => {
checked3.value = status;
};
const onChange4 = (status: boolean) => {
checked4.value = status;
};
const onChange5 = (status: boolean) => {
checked5.value = status;
};
const onChange6 = (status: boolean) => {
checked6.value = status;
};
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
</style>vue
<template>
<div class="flex gap-2">
<AsamCheckTag checked>已选中</AsamCheckTag>
<AsamCheckTag :checked="checked" @change="onChange">切换状态</AsamCheckTag>
<AsamCheckTag disabled>禁用</AsamCheckTag>
</div>
<div class="flex gap-2 mt-4">
<AsamCheckTag :checked="checked1" type="primary" @change="onChange1"> 标签 1 </AsamCheckTag>
<AsamCheckTag :checked="checked2" type="success" @change="onChange2"> 标签 2 </AsamCheckTag>
<AsamCheckTag :checked="checked3" type="info" @change="onChange3"> 标签 3 </AsamCheckTag>
<AsamCheckTag :checked="checked4" type="warning" @change="onChange4"> 标签 4 </AsamCheckTag>
<AsamCheckTag :checked="checked5" type="danger" @change="onChange5"> 标签 5 </AsamCheckTag>
<AsamCheckTag :checked="checked6" disabled type="success" @change="onChange6">
标签 6
</AsamCheckTag>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTagCapCheckableDemo' });
import { AsamCheckTag } from '@asam-ui/ui';
import { ref } from 'vue';
const checked = ref(false);
const checked1 = ref(true);
const checked2 = ref(true);
const checked3 = ref(true);
const checked4 = ref(true);
const checked5 = ref(true);
const checked6 = ref(true);
const onChange = (status) => {
checked.value = status;
};
const onChange1 = (status) => {
checked1.value = status;
};
const onChange2 = (status) => {
checked2.value = status;
};
const onChange3 = (status) => {
checked3.value = status;
};
const onChange4 = (status) => {
checked4.value = status;
};
const onChange5 = (status) => {
checked5.value = status;
};
const onChange6 = (status) => {
checked6.value = status;
};
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
</style>API
属性 AsamTagProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
effect | Tag 的主题 | enum"light" | "dark" | "plain"完整类型："light" | "dark" | "plain" | undefined | — |
type | Tag 的类型 | enum"primary" | "success" | "danger" | "warning" | "info"完整类型："primary" | "success" | "danger" | "warning" | "info" | undefined | — |
color | 背景色 | string | undefined | — |
round | Tag 是否为圆角 | boolean | undefined | false |
closable | 是否可关闭 | boolean | undefined | false |
disableTransitions | 是否禁用渐变动画 | boolean | undefined | false |
hit | 是否有边框描边 | boolean | undefined | false |
size | Tag 的尺寸 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
插槽 AsamTagSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => VNode[]) | undefined | — |
事件 AsamTagEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
close | — | [event: MouseEvent] | — |
click | — | [event: MouseEvent] | — |
实例方法与状态 AsamTagExpose
类型 AsamTagInstance
类型 AsamTagPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
effect | — | enum"light" | "dark" | "plain"完整类型：(AsamTagPropsPublic)["effect"] | — |
type | — | enum"primary" | "success" | "danger" | "warning" | "info"完整类型：(AsamTagPropsPublic)["type"] | — |
color | — | string | undefined | — |
round | — | boolean | undefined | — |
closable | — | boolean | undefined | — |
disableTransitions | — | boolean | undefined | — |
hit | — | boolean | undefined | — |
size | — | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
用法与契约补充说明
使用约定
type、effect、round、hit、color、closable 和 disableTransitions 设置呈现；close 只发出关闭意图，宿主负责从数据或视图移除。default 插槽放文本，click 反馈真实点击。ASAM size 支持 large/big/default/small 并继承上下文。
关联组件
参数与事件补充说明
完整基础 API，并支持 ASAM 四档尺寸继承。
参数与事件说明
effect
必填：否；声明来源：上游声明。
effect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark" / "plain"
默认值与来源
未知 / 未声明固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'light'（2.14.7；源码事实，未作为 ASAM 运行实测）
type
必填：否；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："primary" / "success" / "danger" / "warning" / "info"
默认值与来源
未知 / 未声明固定上游文档默认：primary（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'primary'（2.14.7；源码事实，未作为 ASAM 运行实测）
color
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
round
必填：否；声明来源：上游声明。
round 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
closable
必填：否；声明来源：上游声明。
closable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disableTransitions
必填：否；声明来源：上游声明。
disableTransitions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
hit
必填：否；声明来源：上游声明。
hit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
AsamTagProps 公开类型视图
ts
import type { AsamTagProps, AsamControlSize } from '@asam-ui/ui';
// AsamTagProps
type PublicContract = {
"effect"?: "light" | "dark" | "plain" | undefined;
"type"?: "primary" | "success" | "danger" | "warning" | "info" | undefined;
"color"?: string | undefined;
"round"?: boolean | undefined;
"closable"?: boolean | undefined;
"disableTransitions"?: boolean | undefined;
"hit"?: boolean | undefined;
"size"?: AsamControlSize | undefined;
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[]
AsamTagSlots 公开类型视图
ts
import type { VNode } from 'vue';
import type { AsamTagSlots } from '@asam-ui/ui';
// AsamTagSlots
type PublicContract = {
"default"?: (() => VNode[]) | undefined;
};参数与事件说明
close
必填：是；声明来源：ASAM 声明。
click
必填：是；声明来源：ASAM 声明。
AsamTagEmits 公开类型视图
ts
import type { AsamTagEmits } from '@asam-ui/ui';
// AsamTagEmits
type PublicContract = {
"close": [event: MouseEvent];
"click": [event: MouseEvent];
};AsamTagExpose 公开类型视图
ts
import type { AsamTagExpose } from '@asam-ui/ui';
// AsamTagExpose
type PublicContract = AsamTagExpose;AsamTagInstance 公开类型视图
ts
import type { AsamTagInstance } from '@asam-ui/ui';
// AsamTagInstance
type PublicContract = AsamTagInstance;用于回调、渲染器数据和组件专用配置的具名基础类型。
参数与事件说明
effect
必填：否；声明来源：上游声明。
effect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark" / "plain"
默认值与来源
未知 / 未声明固定上游源码默认表达式：'light'（2.14.7；源码事实，未作为 ASAM 运行实测）
type
必填：否；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："primary" / "success" / "danger" / "warning" / "info"
默认值与来源
未知 / 未声明固定上游源码默认表达式：'primary'（2.14.7；源码事实，未作为 ASAM 运行实测）
color
必填：否；声明来源：上游声明。
round
必填：否；声明来源：上游声明。
round 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
closable
必填：否；声明来源：上游声明。
closable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
disableTransitions
必填：否；声明来源：上游声明。
disableTransitions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
hit
必填：否；声明来源：上游声明。
hit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
AsamTagPropsPublic 公开类型视图
ts
import type { AsamTagPropsPublic, AsamTagProps, AsamControlSize } from '@asam-ui/ui';
// AsamTagPropsPublic
type PublicContract = {
readonly "effect"?: (AsamTagPropsPublic)["effect"];
readonly "type"?: (AsamTagPropsPublic)["type"];
readonly "color"?: string | undefined;
readonly "round"?: boolean | undefined;
readonly "closable"?: boolean | undefined;
readonly "disableTransitions"?: boolean | undefined;
readonly "hit"?: boolean | undefined;
"size"?: AsamControlSize | undefined;
};