Link 链接

像素风格的文本超链接组件。

?

名称	分类	说明	类型	默认值
type	? 风格	类型	'primary' | 'success' | 'info' | 'warning' | 'danger'	—
underline	? 风格	是否显示下划线	boolean	true
color	? 颜色	自定义十六进制颜色	string	—
disabled	? 状态	是否禁用	boolean	false
target	? 行为	链接打开方式	string	—
href	? 内容	链接地址	string	—
click	? 事件	点击事件	(event: MouseEvent) => void	—
default	? 插槽	链接内容		—

基础用法

基础链接，使用 href 指向外部 URL。

<template>
  <px-link href="https://github.com/SaKaNa-Y/sakana-element" target="_blank">
    Sakana Element on GitHub
  </px-link>
</template>

<script setup lang="ts">
</script>

类型

使用 type 属性定义不同的颜色变体。

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap;">
    <px-link>Default</px-link>
    <px-link type="primary">Primary</px-link>
    <px-link type="success">Success</px-link>
    <px-link type="info">Info</px-link>
    <px-link type="warning">Warning</px-link>
    <px-link type="danger">Danger</px-link>
  </div>
</template>

<script setup lang="ts">
</script>

下划线

链接默认显示下划线。设置 underline 为 false 可以移除下划线。

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap;">
    <px-link type="primary">With Underline (default)</px-link>
    <px-link type="primary" :underline="false">Without Underline</px-link>
  </div>
</template>

<script setup lang="ts">
</script>

禁用状态

使用 disabled 属性禁用链接。

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap;">
    <px-link disabled>Default Disabled</px-link>
    <px-link type="primary" disabled>Primary Disabled</px-link>
    <px-link type="success" disabled>Success Disabled</px-link>
    <px-link type="danger" disabled>Danger Disabled</px-link>
  </div>
</template>

<script setup lang="ts">
</script>

自定义颜色

使用 color 属性设置自定义十六进制颜色。

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap;">
    <px-link color="#e91e63">Pink Link</px-link>
    <px-link color="#ff9800">Orange Link</px-link>
    <px-link color="#9c27b0">Purple Link</px-link>
  </div>
</template>

<script setup lang="ts">
</script>