外观
Link 超链接
约 295 字小于 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 |
