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. |