Link
Examples
<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
| Name | Type | Default | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
ui | string | - | The predefined style.
| ||||||||
to | string | 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. | ||||||||
rel | string | - | HTML native link types, see MDN for more information. | ||||||||
target | string | - | Specifies where to display the linked resource, see MDN for more information. | ||||||||
native | boolean | false | Whether to force the use of native <a> element. | ||||||||
fallback | string | 'span' | The native element type to use when the to prop is empty. | ||||||||
disabled | boolean | false | Whether the link is disabled. |
Slots
| Name | Description |
|---|---|
default | The link content. |
Events
| Name | Description |
|---|---|
click | Triggered 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
| Name | Type | Default | Description |
|---|---|---|---|
link.routerLink | string | '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. |