Link 链接

示例

Router link

Native link

<template>
<article>
  <section>
    <h4>Router link</h4>
    <div>
      <veui-link :to="{ name: 'components-icon' }">
        Previous
      </veui-link>
    </div>
  </section>
  <section>
    <h4>Native link</h4>
    <div>
      <veui-link
        native
        to="./pagination"
      >
        Next
      </veui-link>
    </div>
  </section>
</article>
</template>

<script>
import { Link } from 'veui'

export default {
  components: {
    'veui-link': Link
  }
}
</script>

API

属性

名称类型默认值描述

ui

string

预设样式。

值	描述
`primary`	主要链接，背景显示为主题色。
`aux`	辅助样式。
`success`	成功样式。
`warning`	警告样式。
`alert`	危险提示样式。

to string|Object - 链接路径。当配合 Vue Router 使用时，会透传到 <router-link> 的同名属性；否则只支持 string 类型，输出到 <a> 元素的 href 属性中。

rel string - HTML 原生的链接类型，可参考 MDN 的相关介绍。

target

string

指定在何处显示链接的资源，可参考 MDN 的相关介绍。

当 target 为 _blank 时将自动增加 noopener 值（如果用户未指定该值）以增强默认情况下的安全性。

native boolean false 是否强制使用原生的 <a> 元素。

fallback string 'span' 在 to 属性为空时使用的原生元素类型。

disabled boolean false 是否为禁用状态。

插槽

名称	描述
`default`	链接内容。

事件

名称	描述
`click`	在 `to` 属性为空或指定了 `native` 为 `true` 的情况下，点击时触发。回调参数为 `(event)`，`event` 类型为原生 `Event`。