Link 链接
示例
Router link
Native link (ui="strong s"
)
External link
<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
属性
名称 | 类型 | 默认值 | 描述 | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
ui | string= | - | 预设样式。
| ||||||||
to | string | Object | - | 链接路径。当配合 Vue Router 使用时,会透传到 <router-link> 的同名属性;否则只支持 string 类型,输出到 <a> 元素的 href 属性中。 | ||||||||
rel | string | - | HTML 原生的链接类型,可参考 MDN 的相关介绍。 | ||||||||
target | string | - | 指定在何处显示链接的资源,可参考 MDN 的相关介绍。 | ||||||||
native | boolean | false | 是否强制使用原生的 <a> 元素。 | ||||||||
fallback | string | 'span' | 在 to 属性为空时使用的原生元素类型。 | ||||||||
disabled | boolean= | false | 是否为禁用状态。 |
插槽
名称 | 描述 |
---|---|
default | 链接内容。 |
事件
名称 | 描述 |
---|---|
click | 在 to 属性为空或指定了 native 为 true 的情况下,点击时触发。回调参数为 (event) ,event 类型为原生 Event 。 |
全局配置
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
link.routerLink | string | 'router-link' | 在路由模式下使用的链接组件名称,用于在 Nuxt.js 等环境下更换为兼容 Vue Router 的实现。 |