外观
Link 超链接
约 346 字大约 1 分钟
2025-10-31
基本使用
- 通过
href设置打开的链接,text设置显示的内容
<template>
<un-link href="https://uviewui.com/" text="打开uView UI文档" @click="handleClick"></un-link>
</template>
<script setup lang="ts">
// 点击事件处理函数
const handleClick = () => {
console.log('link clicked');
}
</script>下划线
通过underLine设置是否显示链接的下划线
<template>
<un-link href="https://uviewui.com/" text="打开uView UI文档" :underLine="true"></un-link>
</template>
<script setup lang="ts">
// 代码逻辑
</script>自定义颜色
- 通过
color设置文字颜色 - 通过
lineColor设置下划线颜色
<template>
<un-link href="https://uviewui.com/" text="打开uView UI文档" color="#19be6b" lineColor="#19be6b"></un-link>
</template>
<script setup lang="ts">
// 代码逻辑
</script>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| color | 文字颜色 | String | - |
| fontSize | 字体大小,默认单位px | String | Number | 15 |
| underLine | 是否显示下划线 | Boolean | false |
| href | 跳转的链接,要带上http(s) | String | - |
| lineColor | 下划线颜色,默认同color参数颜色 | String | - |
| text | 超链接的文字,不使用slot形式传入,是因为nvue下无法修改颜色 | String | - |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | Function |
Scss 变量
| 变量名 | 默认值 | 说明 |
|---|---|---|
| $un-link-color | $color-primary | 链接文字颜色 |
提示
组件内部默认使用 scss 变量,如需修改,请查看 scss 变量使用 文档
