ExUI

Appearance

Link 链接 ​

用于页面间导航的文字链接组件，支持普通链接和路由链接。

基础用法 ​

最简单的链接用法。

GitHub按钮组件默认链接
vue
<template>
  <div>
    <ex-link href="https://github.com">GitHub</ex-link>
    <ex-link to="/components/button">按钮组件</ex-link>
    <ex-link>默认链接</ex-link>
  </div>
</template>

链接类型 ​

不同类型的链接用于不同的场景。

默认链接主要链接成功链接警告链接危险链接信息链接
vue
<template>
  <div>
    <ex-link type="default">默认链接</ex-link>
    <ex-link type="primary">主要链接</ex-link>
    <ex-link type="success">成功链接</ex-link>
    <ex-link type="warning">警告链接</ex-link>
    <ex-link type="danger">危险链接</ex-link>
    <ex-link type="info">信息链接</ex-link>
  </div>
</template>

链接尺寸 ​

提供三种不同的链接尺寸。

小型链接中型链接大型链接
vue
<template>
  <div>
    <ex-link size="small" type="primary">小型链接</ex-link>
    <ex-link size="medium" type="primary">中型链接</ex-link>
    <ex-link size="large" type="primary">大型链接</ex-link>
  </div>
</template>

禁用状态 ​

链接的禁用状态。

禁用链接禁用主要链接禁用外部链接
vue
<template>
  <div>
    <ex-link disabled>禁用链接</ex-link>
    <ex-link disabled type="primary">禁用主要链接</ex-link>
    <ex-link disabled href="https://github.com">禁用外部链接</ex-link>
  </div>
</template>

下划线 ​

控制链接是否显示下划线。

显示下划线隐藏下划线
vue
<template>
  <div>
    <ex-link :underline="true" type="primary">显示下划线</ex-link>
    <ex-link :underline="false" type="primary">隐藏下划线</ex-link>
  </div>
</template>

图标链接 ​

通过插槽为链接添加图标，支持 Iconify API 图标。

icon 首页 用户中心 iconicon 设置
vue
<template>
  <div>
    <ex-link type="primary">
      <template #icon>
        <ex-icon src="https://api.iconify.design/ri/home-line.svg" />
      </template>
      首页
    </ex-link>
    <ex-link icon-placement="right" type="success">
      <template #icon>
        <ex-icon src="https://api.iconify.design/ri/user-line.svg" />
      </template>
      用户中心
    </ex-link>
    <ex-link type="info">
      <template #prefix>
        <ex-icon src="https://api.iconify.design/ri/settings-line.svg" />
      </template>
      设置
    </ex-link>
  </div>
</template>

外部链接 ​

外部链接会自动显示外部链接图标。

GitHubVue.js Vite (无图标)
vue
<template>
  <div>
    <ex-link href="https://github.com" type="primary">GitHub</ex-link>
    <ex-link href="https://vue.js.org" type="success">Vue.js</ex-link>
    <ex-link href="https://vitejs.dev" :show-external-icon="false" type="info">
      Vite (无图标)
    </ex-link>
  </div>
</template>

文本中的链接 ​

在文本段落中使用链接。

这是一段包含 GitHub 链接的文本，还有一个 内部链接 指向按钮组件页面。

查看代码
vue
<template>
  <p>
    这是一段包含
    <ex-link href="https://github.com" type="primary">GitHub</ex-link>
    链接的文本，还有一个
    <ex-link to="/components/button" type="success">内部链接</ex-link>
    指向按钮组件页面。
  </p>
</template>

API ​

Props ​

参数说明类型可选值默认值
href链接地址string——
to路由地址（Vue Router）string | object——
type链接类型stringdefault / primary / success / warning / danger / infodefault
size链接尺寸stringsmall / medium / largemedium
disabled是否禁用boolean—false
underline是否显示下划线boolean—true
target链接目标string_self / _blank / _parent / _top_self
icon-placement图标位置stringleft / rightleft
show-external-icon是否显示外部链接图标boolean—true
class自定义CSS类名string | string[] | object——
style自定义样式string | object——
aria-label无障碍标签string——
relrel 属性string——

Events ​

事件名说明回调参数
click点击链接时触发(event: MouseEvent)
focus链接获得焦点时触发(event: FocusEvent)
blur链接失去焦点时触发(event: FocusEvent)

Slots ​

插槽名说明
default链接内容
icon图标内容（根据 icon-placement 决定位置）
prefix左侧图标内容
suffix右侧图标内容
external-icon外部链接图标内容

Exposes ​

方法名说明参数
focus使链接获得焦点—
blur使链接失去焦点—
getElement获取链接DOM元素—

主题定制 ​

CSS 变量 ​

组件使用以下 CSS 变量，可以进行主题定制：

css
:root {
  /* 颜色 */
  --ex-color-primary: #29abe2;
  --ex-color-success: #00d4aa;
  --ex-color-warning: #ff9500;
  --ex-color-danger: #ff3b30;
  --ex-color-info: #007aff;
  
  /* 文本颜色 */
  --ex-color-text-primary: #e6f0ff;
  --ex-color-text-disabled: #666;
  
  /* 间距 */
  --ex-spacing-xs: 4px;
  --ex-spacing-sm: 8px;
  
  /* 字体 */
  --ex-font-size-sm: 14px;
  --ex-font-size-base: 16px;
  --ex-font-size-lg: 18px;
  --ex-font-weight-medium: 500;
  
  /* 圆角 */
  --ex-radius-sm: 4px;
  
  /* 动画 */
  --ex-transition-base: 0.2s;
  --ex-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

SCSS 变量 ​

scss
// 可以通过 SCSS 变量进一步定制
$link-hover-transform: translateY(-1px);
$link-focus-outline-width: 2px;
$link-underline-height: 1px;