VEUI

VEUI on GitHub
Play!中文

Link

Examples

Edit this demo 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-

The predefined style.

ValueDescription
strongThe strong style.
sThe small size style.
mThe medium size style.
tostring | Object-The link path. When used with Vue Router, it will be passed to the same-named prop of <router-link>; otherwise, only string type is supported, and it will be output to the href attribute of the <a> element.
relstring-HTML native link types, see MDN for more information.
targetstring-

Specifies where to display the linked resource, see MDN for more information.

nativebooleanfalseWhether to force the use of native <a> element.
fallbackstring'span'The native element type to use when the to prop is empty.
disabledbooleanfalseWhether the link is disabled.

Slots

NameDescription
defaultThe link content.

Events

NameDescription
clickTriggered when the link is clicked and the to prop is empty or the native prop is set to true. The callback parameter is (event), and the event type is the native Event.

Configs

NameTypeDefaultDescription
link.routerLinkstring'router-link'The name of the link component used in router mode, used to replace it with a Vue Router-compatible implementation in environments such as Nuxt.js.
Edit this page on GitHubEdit
© Baidu, Inc. 2024