ETU组件库

Appearance

Return to top
On this page

Link 链接

文字超链接

基础用法

基础的文字链接用法

这是一个LINK 这是一个LINK 这是一个LINK 这是一个LINK 这是一个LINK 

<template>
  <etu-link type="primary" href="https://juejin.cn/" class="l-a">
    这是一个LINK
  </etu-link>
  <etu-link type="success" class="l-a" href="https://juejin.cn/">
    这是一个LINK
  </etu-link>

  <etu-link type="warning" class="l-a" href="https://juejin.cn/">
    这是一个LINK
  </etu-link>
  <etu-link type="danger" class="l-a" href="https://juejin.cn/">
    这是一个LINK
  </etu-link>
  <etu-link type="info" class="l-a" href="https://juejin.cn/">
    这是一个LINK
  </etu-link>
</template>
<style scoped>
.vp-doc a {
  color: var(--etu-link-text-color);
}
.l-a {
  margin-right: 30px;
}
</style>

<template>
  <etu-link type="primary" href="https://juejin.cn/" class="l-a">
    这是一个LINK
  </etu-link>
  <etu-link type="success" class="l-a" href="https://juejin.cn/">
    这是一个LINK
  </etu-link>

  <etu-link type="warning" class="l-a" href="https://juejin.cn/">
    这是一个LINK
  </etu-link>
  <etu-link type="danger" class="l-a" href="https://juejin.cn/">
    这是一个LINK
  </etu-link>
  <etu-link type="info" class="l-a" href="https://juejin.cn/">
    这是一个LINK
  </etu-link>
</template>
<style scoped>
.vp-doc a {
  color: var(--etu-link-text-color);
}
.l-a {
  margin-right: 30px;
}
</style>

禁用状态

文字链接不可用状态

这是一个LINK 这是一个LINK

<template>
  <etu-link
    type="primary"
    :disabled="true"
    href="https://juejin.cn/"
    class="l-a l-1"
  >
    这是一个LINK
  </etu-link>
  <etu-link type="primary" href="https://juejin.cn/" class="l-2"
    >这是一个LINK</etu-link
  >
</template>
<style scoped>
/* .vp-doc a {
  color: var(--etu-link-text-color);
}
.l-a {
  margin-right: 30px;
} */

.vp-doc a:hover {
  color: var(--etu-link-disabled-text-color);
}
.l-1 {
  margin-right: 30px;
}
.l-2 {
  color: var(--etu-link-text-color);
  margin-right: 30px;
}
</style>

<template>
  <etu-link
    type="primary"
    :disabled="true"
    href="https://juejin.cn/"
    class="l-a l-1"
  >
    这是一个LINK
  </etu-link>
  <etu-link type="primary" href="https://juejin.cn/" class="l-2"
    >这是一个LINK</etu-link
  >
</template>
<style scoped>
/* .vp-doc a {
  color: var(--etu-link-text-color);
}
.l-a {
  margin-right: 30px;
} */

.vp-doc a:hover {
  color: var(--etu-link-disabled-text-color);
}
.l-1 {
  margin-right: 30px;
}
.l-2 {
  color: var(--etu-link-text-color);
  margin-right: 30px;
}
</style>

下划线

文字链接下划线。

这是一个LINK 这是一个LINK 

<template>
  <etu-link
    type="primary"
    :underline="false"
    href="https://juejin.cn/"
    class="l-a"
  >
    这是一个LINK
  </etu-link>
  <etu-link type="primary" class="l-a" href="https://juejin.cn/">
    这是一个LINK
  </etu-link>
</template>
<style scoped>
.vp-doc a {
  color: var(--etu-link-text-color);
}
.l-a {
  margin-right: 30px;
}
</style>

<template>
  <etu-link
    type="primary"
    :underline="false"
    href="https://juejin.cn/"
    class="l-a"
  >
    这是一个LINK
  </etu-link>
  <etu-link type="primary" class="l-a" href="https://juejin.cn/">
    这是一个LINK
  </etu-link>
</template>
<style scoped>
.vp-doc a {
  color: var(--etu-link-text-color);
}
.l-a {
  margin-right: 30px;
}
</style>

图标

带图标的链接

这是一个LINK 

<template>
  <etu-link type="primary" icon="smile" href="https://juejin.cn/" class="l-a">
    这是一个LINK
  </etu-link>
</template>
<style scoped>
.vp-doc a {
  color: var(--etu-link-text-color);
}
.l-a {
  margin-right: 30px;
}
</style>

<template>
  <etu-link type="primary" icon="smile" href="https://juejin.cn/" class="l-a">
    这是一个LINK
  </etu-link>
</template>
<style scoped>
.vp-doc a {
  color: var(--etu-link-text-color);
}
.l-a {
  margin-right: 30px;
}
</style>
属性名说明类型可选值默认值
type类型stringsuccess/info/warning/danger—
underline是否下划线boolean—true
disabled是否禁用状态boolean—false
href原生 href 属性string——
icon图标组件string——

插槽

插槽名说明
default自定义默认内容
icon自定义图标组件