Link 链接

示例

在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <h4>Router link</h4>
    <div>
      <veui-link :to="{ name: 'components-icon' }">
        Previous
      </veui-link>
    </div>
  </section>
  <section>
    <h4>Native link (<code>ui="strong s"</code>)</h4>
    <div>
      <veui-link
        ui="strong s"
        native
        to="./pagination"
      >
        Next
      </veui-link>
    </div>
  </section>
  <section>
    <h4>External link</h4>
    <div>
      <veui-link
        to="https://www.baidu.com/"
        target="_blank"
      >
        Baidu
      </veui-link>
    </div>
  </section>
</article>
</template>

<script>
import { Link } from 'veui'

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

<style lang="less" scoped>
h4 {
  margin-top: 0;
}

section:not(:last-child) {
  margin-bottom: 40px;
}
</style>

API

属性

名称类型默认值描述
uistring=-

预设样式。

描述
strong加强样式。
s小尺寸样式。
m中尺寸样式。
tostring | Object-链接路径。当配合 Vue Router 使用时,会透传到 <router-link>同名属性;否则只支持 string 类型,输出到 <a> 元素的 href 属性中。
relstring-HTML 原生的链接类型,可参考 MDN 的相关介绍
targetstring-

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

nativebooleanfalse是否强制使用原生的 <a> 元素。
fallbackstring'span'to 属性为空时使用的原生元素类型。
disabledboolean=false是否为禁用状态。

插槽

名称描述
default链接内容。

事件

名称描述
clickto 属性为空或指定了 nativetrue 的情况下,点击时触发。回调参数为 (event)event 类型为原生 Event

全局配置

名称类型默认值描述
link.routerLinkstring'router-link'在路由模式下使用的链接组件名称,用于在 Nuxt.js 等环境下更换为兼容 Vue Router 的实现。
在 GitHub 上编辑此页编辑