Link 链接

文字超链接

基础用法

通过 NueLink 组件可以实现文字超链接的功能。

通过 href 属性设置链接的目标地址。

<template>
    <nue-div class="vp-raw">
        <nue-link href="https://www.baidu.com">链接到百度</nue-link>
    </nue-div>
</template>

禁用状态

通过 disabled 属性可以禁用链接。

<template>
    <nue-div class="vp-raw">
        <nue-link href="https://www.baidu.com">正常链接</nue-link>
        <nue-link disabled href="https://www.baidu.com">禁用的链接</nue-link>
    </nue-div>
</template>

链接图标

通过 icon 属性可以给链接添加图标，接受 string 类型的值，表示图标的类名。

<template>
    <nue-div align="center" class="vp-raw">
        <nue-text size="12px">
            Vue 是一个渐进式的 JavaScript
            框架，用于构建用户界面。与其他大型框架不同的是，Vue
            被设计为可以逐步采用。这意味着你可以只用 Vue
            处理应用的一部分视图层，也可以通过其生态系统中的诸如 Vue Router 和
            Vuex 等库将其扩展为一个复杂的单页应用。Vue
            的核心库只关注视图层，并且非常容易学习和集成。它的响应式数据绑定和组合式
            API 提供了灵活的开发方式，使开发者能够构建出高性能和互动性强的 web
            应用。如果你想了解更多信息，可以访问
            <nue-link
                href="https://cn.vuejs.org/"
                icon="connection"
                target="_blank"
            >
                Vue 官方文档
            </nue-link>
            。
        </nue-text>
    </nue-div>
</template>

添加自定义类名以及使用预设主题

通过 theme 属性可以给按钮添加自定义的类名，接受 string 以及 string[] 类型的值，表示一个或多个自定义的类名。

预设主题的使用依然是通过 theme 属性设置。预设主题包括 btnlike。

<template>
    <nue-div align="center" class="vp-raw">
        <nue-link theme="btnlike">按钮式链接</nue-link>
        <nue-link theme="custom">自定义主题</nue-link>
    </nue-div>
</template>

<style scoped>
.nue-link--custom {
    --color: orange;
    --font-weight: bolder;
    --text-decoration: none;
    --font-size: 16px;
    --hover-background-color: #a5a5a5;
    --hover-font-color: blue;
}
</style>

使用路由连接

通过 route 属性可以实现 VueRouter 路由。

route 属性接收 string 或 { name: string, params?: any, query?: any } 类型的值。

TIP

• route 属性的值会被转换为 to 用于匹配 VueRouter 的路由，因此当 route 属性存在时，href 属性失效。
• 组件标签会变为使用 <router-link>，以实现路由跳转。
• 当使用 route 属性后，链接的激活状态会被启用，若想要修改激活状态的样式，通过 nue-link--actived 类名进行样式修改，目前不支持指定其他的激活状态类名。
• 通过 theme 属性能够模拟激活状态的样式。

<template>
    <nue-div align="center" class="vp-raw">
        <nue-link icon="connection" route="/a/b/c" theme="btnlike,actived">
            已激活的路由链接
        </nue-link>
        <nue-link
            :route="{ name: 'routeName', params: { id: 123 } }"
            icon="connection"
            theme="btnlike"
        >
            待激活的路由连接
        </nue-link>
    </nue-div>
</template>