基本使用

• 通过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 变量使用 文档