FxLink 链接

文字超链接。自实现、不依赖任何 UI 框架。

FxLink 属于 @fx/components（UI 框架无关的通用组件）。

基础用法

基础文字链接。default 类型可配合 href / target 作为原生超链接使用。

<template>
  <div>
    <FxLink href="https://element-plus.org" target="_blank">default</FxLink>
    <FxLink type="primary">primary</FxLink>
    <FxLink type="success">success</FxLink>
    <FxLink type="warning">warning</FxLink>
    <FxLink type="danger">danger</FxLink>
    <FxLink type="info">info</FxLink>
  </div>
</template>

<style scoped>
:deep(.fx-link) {
  margin-right: 8px;
}
</style>

禁用状态

链接不可用状态。disabled 时不会触发 click，且不渲染 href / target。

<template>
  <div>
    <FxLink disabled>default</FxLink>
    <FxLink type="primary" disabled>primary</FxLink>
    <FxLink type="success" disabled>success</FxLink>
    <FxLink type="warning" disabled>warning</FxLink>
    <FxLink type="danger" disabled>danger</FxLink>
    <FxLink type="info" disabled>info</FxLink>
  </div>
</template>

<style scoped>
:deep(.fx-link) {
  margin-right: 8px;
}
</style>

下划线

通过 underline 控制下划线显示时机：always（常显）、hover（默认，悬停显示）、never（不显示）。

TIP

underline 同时兼容 boolean：true 等同 hover，false 等同 never。

<template>
  <div>
    <FxLink>default</FxLink>
    <FxLink underline="always">always</FxLink>
    <FxLink underline="hover">hover</FxLink>
    <FxLink underline="never">never</FxLink>
  </div>
</template>

<style scoped>
:deep(.fx-link) {
  margin-right: 8px;
}
</style>

图标

带图标的链接。使用 icon 插槽添加左侧图标，也可在默认插槽内放置图标实现右侧图标。

<template>
  <div>
    <FxLink icon="ep:edit">test</FxLink>
    <FxLink :icon="EditIcon">edit-test</FxLink>
    <FxLink>
      <template #icon>
        <FxIcon name="ep:edit" />
      </template>
      Edit
    </FxLink>
    <FxLink type="primary">
      Check
      <FxIcon name="ep:view" class="right-icon" />
    </FxLink>
  </div>
</template>
<script setup lang="ts">
import { FxIcon } from "@fx-core/icon"
import { h } from "vue"
const EditIcon = () => h(FxIcon, { name: "ep:edit" })
</script>

<style scoped>
:deep(.fx-link) {
  margin-right: 8px;
}

.right-icon {
  margin-left: 5px;
}
</style>

Link API

FxLink Attributes

属性	说明	类型	默认值
type	类型	'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	default
underline	下划线显示时机，boolean 兼容（true→hover，false→never）	'always' | 'hover' | 'never' | boolean	hover
disabled	是否禁用	boolean	false
href	原生链接地址	string	—
target	原生链接 target	'_blank' | '_parent' | '_self' | '_top'	_self
icon	图标。字符串为 IconString 类型（即 FxIcon 图标名，如 ep:edit、ant-design:home、svg:xxx），亦可传组件	string / Component	—

FxLink Slots

名称	说明
default	自定义链接内容
icon	自定义图标组件