Link

Demos

Edit this page on GitHubEdit
<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

Props

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
strongStrong style.
sSmall.
mMedium.
tostring | Object-Denotes the target route of the link. When used with Vue Router, the value will be passed to a <router-link>'s to prop. Otherwise only string type is supported, and the value will output to the href attribute of an <a> element.
relstring-Specifies the relationship of the target object to the link object. Refer to MDN for more details.
targetstring-

Specifies where to display the linked content. Refer to MDN for more details.

nativebooleanfalseWhether to enforce the use of native <a> element (instead of <router-link>).
fallbackstring'span'Specifies the fallback element type when no to prop is specified.
disabledboolean=falseWhether the link is disabled.

Slots

NameDescription
defaultThe content of the link.

Events

NameDescription
clickTriggered upon clicks when the to prop is falsy or the native prop is true. The callback parameter list is (event), where the type of event is HTML's native Event.

Configs

KeyTypeDefaultDescription
link.routerLinkstring'router-link'The name of the link component used in route mode so that you can replace the default one with a Vue Router-compatible implementation in environments such as Nuxt.js.
Edit this page on GitHubEdit