使用场景
提供文字链接或可点击的文本操作。
基础用法与状态
下列示例只使用本入口的实际公开能力。
基础用法与状态
<template>
<div class="flow">
<AsamLink
v-for="size in sizes"
:key="size"
v-bind="{ size, href: '#doc010-link-target', type: 'primary' }"
>
<span>{{ size }} 链接</span>
</AsamLink>
<AsamLink disabled href="#doc010-link-target">禁用链接</AsamLink>
</div>
<p class="example-paragraph" id="doc010-link-target">本页链接目标</p>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamLinkBasicDemo' });
import { AsamLink } from '@asam-ui/ui';
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>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<div class="flow">
<AsamLink
v-for="size in sizes"
:key="size"
v-bind="{ size, href: '#doc010-link-target', type: 'primary' }"
>
<span>{{ size }} 链接</span>
</AsamLink>
<AsamLink disabled href="#doc010-link-target">禁用链接</AsamLink>
</div>
<p class="example-paragraph" id="doc010-link-target">本页链接目标</p>
</template>
<script setup>
defineOptions({ name: 'AsamLinkBasicDemo' });
import { AsamLink } from '@asam-ui/ui';
const sizes = ['large', 'big', 'default', 'small'];
</script>
<style scoped>
.flow {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>使用约定
href/target 设置真实目标，type、underline、disabled、icon 与 default/icon 插槽控制呈现。click 提供 MouseEvent；阻止默认行为需由宿主明确处理。ASAM size 支持 large/big/default/small，区别于图标的图形尺寸。
链接目标校验
href 会直接传给原生 <a>，组件没有自动过滤 URL。 完整说明。
完整 TypeScript 版本：
function sanitizeUrl(url: string): string {
const allowedProtocols = ['http:', 'https:'];
try {
const parsed = new URL(url, window.location.origin);
return allowedProtocols.includes(parsed.protocol) ? parsed.href : '#';
} catch {
return '#';
}
}完整 JavaScript 版本：
function sanitizeUrl(url) {
const allowedProtocols = ['http:', 'https:'];
try {
const parsed = new URL(url, window.location.origin);
return allowedProtocols.includes(parsed.protocol) ? parsed.href : '#';
} catch {
return '#';
}
}这两个函数用于浏览器环境，只演示协议校验；HTTP/HTTPS 域名、跳转目标及授权仍须满足业务规则，不能仅凭协议白名单认定目标可信。
完整使用场景
基础用法
基础的文字链接用法。
基础用法
<template>
<div>
<AsamLink href="https://example.com" target="_blank">default</AsamLink>
<AsamLink type="primary">primary</AsamLink>
<AsamLink type="success">success</AsamLink>
<AsamLink type="warning">warning</AsamLink>
<AsamLink type="danger">danger</AsamLink>
<AsamLink type="info">info</AsamLink>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamLinkCapBasicDemo' });
import { AsamLink } from '@asam-ui/ui';
</script>
<style scoped>
.el-link {
margin-right: 8px;
}
</style><template>
<div>
<AsamLink href="https://example.com" target="_blank">default</AsamLink>
<AsamLink type="primary">primary</AsamLink>
<AsamLink type="success">success</AsamLink>
<AsamLink type="warning">warning</AsamLink>
<AsamLink type="danger">danger</AsamLink>
<AsamLink type="info">info</AsamLink>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamLinkCapBasicDemo' });
import { AsamLink } from '@asam-ui/ui';
</script>
<style scoped>
.el-link {
margin-right: 8px;
}
</style>
禁用
文字链接不可用状态。
禁用
<template>
<div>
<AsamLink disabled>default</AsamLink>
<AsamLink type="primary" disabled>primary</AsamLink>
<AsamLink type="success" disabled>success</AsamLink>
<AsamLink type="warning" disabled>warning</AsamLink>
<AsamLink type="danger" disabled>danger</AsamLink>
<AsamLink type="info" disabled>info</AsamLink>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamLinkCapDisabledDemo' });
import { AsamLink } from '@asam-ui/ui';
</script>
<style scoped>
.el-link {
margin-right: 8px;
}
</style><template>
<div>
<AsamLink disabled>default</AsamLink>
<AsamLink type="primary" disabled>primary</AsamLink>
<AsamLink type="success" disabled>success</AsamLink>
<AsamLink type="warning" disabled>warning</AsamLink>
<AsamLink type="danger" disabled>danger</AsamLink>
<AsamLink type="info" disabled>info</AsamLink>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamLinkCapDisabledDemo' });
import { AsamLink } from '@asam-ui/ui';
</script>
<style scoped>
.el-link {
margin-right: 8px;
}
</style>
下划线
控制下划线是否出现
属性 boolean 值 将在 3.0.0 版本中被移除，请考虑切换至新的 API。
从 2.9.9 开始，你可以使用 'always' | 'hover' | 'never' 来控制是否显示下划线。文档中的示例将都使用这些值。如果您使用的版本 低于 2.9.9，请参考：
<template>
<!-- works before 2.9.9, use 'hover' after, removed in 3.0.0 -->
<el-link underline>link</el-link>
<!-- works before 2.9.9, use 'never' after, removed in 3.0.0 -->
<el-link :underline="false">link</el-link>
</template>下划线
<template>
<div>
<AsamLink>default</AsamLink>
<AsamLink underline="always">always</AsamLink>
<AsamLink underline="hover">hover</AsamLink>
<AsamLink underline="never">never</AsamLink>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamLinkCapUnderlineDemo' });
import { AsamLink } from '@asam-ui/ui';
</script>
<style scoped>
.el-link {
margin-right: 8px;
}
</style><template>
<div>
<AsamLink>default</AsamLink>
<AsamLink underline="always">always</AsamLink>
<AsamLink underline="hover">hover</AsamLink>
<AsamLink underline="never">never</AsamLink>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamLinkCapUnderlineDemo' });
import { AsamLink } from '@asam-ui/ui';
</script>
<style scoped>
.el-link {
margin-right: 8px;
}
</style>
图标
带图标的链接
使用 icon 属性添加图标，可传入预先注册的组件名称，或 SVG Vue 图标组件本身。ASAM 图标包提供对应图标，详见图标文档。
使用图标
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div>
<AsamLink :icon="Edit">编辑</AsamLink>
<AsamLink>
检查<AsamIcon class="el-icon--right"><icon-view /></AsamIcon>
</AsamLink>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamLinkCapWithIconDemo' });
import { AsamLink, AsamIcon } from '@asam-ui/ui';
import { Edit, View as IconView } from '@asam-ui/icons-vue';
</script>
<style scoped>
.el-link {
margin-right: 8px;
}
</style><!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div>
<AsamLink :icon="Edit">编辑</AsamLink>
<AsamLink>
检查<AsamIcon class="el-icon--right"><icon-view /></AsamIcon>
</AsamLink>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamLinkCapWithIconDemo' });
import { AsamLink, AsamIcon } from '@asam-ui/ui';
import { Edit, View as IconView } from '@asam-ui/icons-vue';
</script>
<style scoped>
.el-link {
margin-right: 8px;
}
</style>API
属性 AsamLinkProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
disabled | 是否禁用状态 | boolean | undefined | false |
type | 类型 | enum"default" | "primary" | "success" | "danger" | "warning" | "info"完整类型："default" | "primary" | "success" | "danger" | "warning" | "info" | undefined | — |
target | 同原生 target 属性 | enum"_self" | "_blank" | "_parent" | "_top"完整类型：(string & {}) | "_self" | "_blank" | "_parent" | "_top" | undefined | — |
underline | 控制下划线是否出现 | enum"hover" | "always" | "never"完整类型：boolean | "hover" | "always" | "never" | undefined | false |
href | 原生 href 属性 | string | undefined | — |
icon | 自定义图标 | (AsamLinkProps)["icon"] | — |
size | — | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
插槽 AsamLinkSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => VNode[]) | undefined | — |
icon | — | (() => VNode[]) | undefined | — |
事件 AsamLinkEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
click | — | [event: MouseEvent] | — |
实例方法与状态 AsamLinkExpose
类型 AsamLinkInstance
类型 AsamLinkConfigContext
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | — | enum"default" | "primary" | "success" | "danger" | "warning" | "info"完整类型："default" | "primary" | "success" | "danger" | "warning" | "info" | undefined | — |
underline | — | enum"hover" | "always" | "never"完整类型：boolean | "hover" | "always" | "never" | undefined | — |
类型 AsamLinkPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
disabled | — | boolean | undefined | — |
type | — | enum"default" | "primary" | "success" | "danger" | "warning" | "info"完整类型：(AsamLinkPropsPublic)["type"] | — |
target | — | string | undefined | — |
underline | — | enum"hover" | "always" | "never"完整类型：(AsamLinkPropsPublic)["underline"] | — |
href | — | string | undefined | — |
icon | — | (AsamLinkPropsPublic)["icon"] | — |
size | — | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
用法与契约补充说明
链接目标校验
href 会直接传给原生 <a>，组件没有自动过滤 URL。来自外部输入的目标应由宿主在传入前校验，避免执行 javascript: 等协议或跳转到不允许的目标。以下函数允许 HTTP、HTTPS 及按当前页面 origin 解析的相对路径；解析失败或协议不在白名单时返回 #。传给 AsamLink 的是 sanitizeUrl(rawUrl) 的返回值。
关联组件
参数与事件补充说明
完整基础 API，并支持 ASAM 四档尺寸继承。
参数与事件说明
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
type
必填：否；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："default" / "primary" / "success" / "danger" / "warning" / "info"
默认值与来源
未知 / 未声明固定上游文档默认：default（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
target
必填：否；声明来源：上游声明。
target 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："_self" / "_blank" / "_parent" / "_top"
默认值与来源
未知 / 未声明固定上游文档默认：\_self（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'_self'（2.14.7；源码事实，未作为 ASAM 运行实测）
underline
必填：否；声明来源：上游声明。
underline 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true / "hover" / "always" / "never"
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：hover（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
href
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
icon
必填：否；声明来源：上游声明。
icon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamLinkProps)["icon"]>, (...args: never[]) => unknown>>[1]): any
icon.__isFragment:undefined— 依赖声明icon.__isTeleport:undefined— 依赖声明icon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
AsamLinkProps 公开类型视图
import type { Attrs } from 'vue';
import type { AsamLinkProps, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamLinkProps
type PublicContract = {
"disabled"?: boolean | undefined;
"type"?: "default" | "primary" | "success" | "danger" | "warning" | "info" | undefined;
"target"?: (string & {}) | "_self" | "_blank" | "_parent" | "_top" | undefined;
"underline"?: boolean | "hover" | "always" | "never" | undefined;
"href"?: string | undefined;
"icon"?: (AsamLinkProps)["icon"];
"size"?: AsamControlSize | undefined;
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[]
icon
必填：否；声明来源：ASAM 声明。
icon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[]
AsamLinkSlots 公开类型视图
import type { VNode } from 'vue';
import type { AsamLinkSlots } from '@asam-ui/ui';
// AsamLinkSlots
type PublicContract = {
"default"?: (() => VNode[]) | undefined;
"icon"?: (() => VNode[]) | undefined;
};参数与事件说明
click
必填：是；声明来源：ASAM 声明。
AsamLinkEmits 公开类型视图
import type { AsamLinkEmits } from '@asam-ui/ui';
// AsamLinkEmits
type PublicContract = {
"click": [event: MouseEvent];
};AsamLinkExpose 公开类型视图
import type { AsamLinkExpose } from '@asam-ui/ui';
// AsamLinkExpose
type PublicContract = AsamLinkExpose;AsamLinkInstance 公开类型视图
import type { AsamLinkInstance } from '@asam-ui/ui';
// AsamLinkInstance
type PublicContract = AsamLinkInstance;参数与事件说明
type
必填：否；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："default" / "primary" / "success" / "danger" / "warning" / "info"
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
underline
必填：否；声明来源：上游声明。
underline 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true / "hover" / "always" / "never"
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamLinkConfigContext 公开类型视图
import type { AsamLinkConfigContext, AsamLinkProps } from '@asam-ui/ui';
// AsamLinkConfigContext
type PublicContract = {
"type"?: "default" | "primary" | "success" | "danger" | "warning" | "info" | undefined;
"underline"?: boolean | "hover" | "always" | "never" | undefined;
};参数与事件说明
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
type
必填：否；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："default" / "primary" / "success" / "danger" / "warning" / "info"
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
target
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：'_self'（2.14.7；源码事实，未作为 ASAM 运行实测）
underline
必填：否；声明来源：上游声明。
underline 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true / "hover" / "always" / "never"
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
href
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
icon
必填：否；声明来源：上游声明。
icon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamLinkPropsPublic)["icon"]>, (...args: never[]) => unknown>>[1]): any
icon.__isFragment:undefined— 依赖声明icon.__isTeleport:undefined— 依赖声明icon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
AsamLinkPropsPublic 公开类型视图
import type { Attrs } from 'vue';
import type { AsamLinkPropsPublic, AsamLinkProps, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamLinkPropsPublic
type PublicContract = {
readonly "disabled"?: boolean | undefined;
readonly "type"?: (AsamLinkPropsPublic)["type"];
readonly "target"?: string | undefined;
readonly "underline"?: (AsamLinkPropsPublic)["underline"];
readonly "href"?: string | undefined;
readonly "icon"?: (AsamLinkPropsPublic)["icon"];
"size"?: AsamControlSize | undefined;
};