链接 Link

用于展示超链接的组件。

基础使用

通常，我们像 <a> 标签一样使用它。

WARNING

href 属性将直接传到 <a> 标签中，如果传递类似 javascript:alert(1) 这样的值或恶意 URL，可能会导致 XSS 或开放重定向漏洞。

_self

_blank

<template>
	<px-space>
		<px-link href="./link" target="_self">_self</px-link>
		<px-link href="./link" target="_blank">_blank</px-link>
	</px-space>
</template>

链接主题

链接有 'primary'（默认）、'success'、'warning'、'danger'、'info'、'sakura' 六种主题。

Primary

Success

Warning

Danger

Info

Sakura

<template>
	<px-space>
		<px-link style="margin-right: 8px">Primary</px-link>
		<px-link theme="success">Success</px-link>
		<px-link theme="warning">Warning</px-link>
		<px-link theme="danger">Danger</px-link>
		<px-link theme="info">Info</px-link>
		<px-link theme="sakura">Sakura</px-link>
	</px-space>
</template>

禁用状态

disabled 设置链接禁用，浏览器默认点击事件引起的跳转不会触发。

No Allow

<template>
	<px-link disabled>No Allow</px-link>
</template>

加载状态

loading 设置链接是否处于加载状态，加载状态时，浏览器默认点击事件引起的跳转不会触发。

Loading

Loading

<template>
	<px-space>
		<px-link loading>Loading</px-link>
		<px-link loading disabled>Loading</px-link>
	</px-space>
</template>

链接图标

icon 插槽设置链接图标。

Icon

<template>
	<px-link>
		<template #icon>
			<IconMinds></IconMinds>
		</template>
		Icon
	</px-link>
</template>
<script setup lang="ts">
import { IconMinds } from '@pixelium/web-vue/icon-hn/es'
</script>

自定义颜色

与按钮组件类似，自定义主色，内部基于此生成完整色板，该色板优先级高于 theme 提供的预设色版。支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)'字符串和 3、4、6、8位长度的十六位数字表示。

#409EFF

#FAE13C

#E956AE

#909399

<template>
	<px-space>
		<px-link color="#409EFF">#409EFF</px-link>
		<px-link color="#FAE13C">#FAE13C</px-link>
		<px-link color="#E956AE">#E956AE</px-link>
		<px-link color="#909399">#909399</px-link>
	</px-space>
</template>

API

LinkProps

属性	类型	可选	默认值	描述	版本
disabled	boolean	是		是否禁用。	0.0.0-beta
loading	boolean	是		是否加载状态。	0.0.0-beta
theme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info'	是	'primary'	链接主题。	0.0.0-beta
color	string	是		自定义主色，内部基于此生成完整色板，该色板优先级高于 theme 提供的预设色版。支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)' 字符串和 3、4、6、8 位长度的十六位数字表示。	0.0.0-beta
href	string	是		HTML <a> 原生 href 属性。	0.0.0-beta
target	string	是		HTML <a> 原生 target 属性。	0.0.0-beta

LinkSlots

插槽	参数	描述	版本
default		链接内容。	0.0.0-beta
icon		链接图标。	0.0.0-beta

LinkEvents

事件	参数	描述	版本
click	e: MouseEvent		0.0.0-beta