hy-element

Link 链接 ​

用于导航跳转或执行操作的文本链接。

基础用法 ​

基础的链接用法，支持 href 属性。

<!-- src/demo/link/Basic.vue -->
<template>
  <div>
    <hy-link href="https://www.example.com">默认链接</hy-link>
    <br><br>
    <hy-link href="https://www.google.com">Google 链接</hy-link>
  </div>
</template>

不同类型 ​

Link 组件提供多种类型：default、primary、success、warning、danger、info。

<!-- src/demo/link/Type.vue -->
<template>
  <div>
    <hy-link href="#">默认链接</hy-link>
    <br><br>
    <hy-link href="#" type="primary">主要链接</hy-link>
    <br><br>
    <hy-link href="#" type="success">成功链接</hy-link>
    <br><br>
    <hy-link href="#" type="warning">警告链接</hy-link>
    <br><br>
    <hy-link href="#" type="danger">危险链接</hy-link>
    <br><br>
    <hy-link href="#" type="info">信息链接</hy-link>
  </div>
</template>

禁用状态 ​

通过 disabled 属性设置链接为禁用状态。

<!-- src/demo/link/Disabled.vue -->
<template>
  <div>
    <hy-link href="#" :disabled="false">可点击链接</hy-link>
    <br><br>
    <hy-link href="#" :disabled="true">禁用链接</hy-link>
  </div>
</template>

跳转目标 ​

通过 target 属性设置链接打开方式，如 _blank 在新窗口打开。

<!-- src/demo/link/Target.vue -->
<template>
  <div>
    <hy-link href="https://www.example.com" target="_self">当前窗口打开</hy-link>
    <br><br>
    <hy-link href="https://www.example.com" target="_blank">新窗口打开</hy-link>
  </div>
</template>

自定义内容 ​

支持通过默认插槽自定义链接内容。

<!-- src/demo/link/Custom.vue -->
<template>
  <div>
    <hy-link href="#">
      <span class="custom-content">自定义内容</span>
    </hy-link>
    <br><br>
    <hy-link href="#" type="primary">
      <i class="icon">🔗</i> 带图标链接
    </hy-link>
  </div>
</template>

<style scoped>
.custom-content {
  color: #409eff;
  font-weight: bold;
  font-size: 16px;
}

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

Props ​

NameDescriptionTypeDefault
href链接地址string—
type链接类型enum - 'default'|'primary'|'success'|'warning'|'danger'|'info'default
target链接打开方式string_self
disabled是否禁用booleanfalse

Events ​

NameDescriptionType
click点击链接时触发(event: MouseEvent) => void

Slots ​

NameDescription
default链接显示内容