Link 链接

17:06

说明

文字超链接：根节点是 text，点击时把 href 复制到剪贴板并弹出提示，提示语默认取语言包 uLink.mpTips（「链接已复制，请在浏览器打开」），可用 mp-tips 覆盖。设置 default-click=false 后不再执行默认复制，只派发 click(href) 交给外部自行处理。

兼容性

平台	支持情况
App	✅ 支持
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

点击链接，在 APP 打开内置浏览器、小程序复制到剪贴板、H5 新开窗口。

查看源码

<template>
    <ux-link href="https://uviewpro.cn/zh/">uView Pro 官方文档</ux-link>
</template>

自定义颜色 color

通过 color 属性设置文字颜色，默认为主题内容色。

查看源码

<template>
    <view class="row">
        <view class="item"><ux-link href="https://uviewpro.cn/zh/" color="red">红色链接</ux-link></view>
        <view class="item"><ux-link href="https://uviewpro.cn/zh/" color="#19be6b">绿色链接</ux-link></view>
        <view class="item"><ux-link href="https://uviewpro.cn/zh/" color="#2979ff">主题链接</ux-link></view>
    </view>
</template>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.item {
    flex-direction: row;
    margin-right: 15px;
    margin-bottom: 8px;
}
</style>

自定义大小 font-size

通过 font-size 属性设置字体大小，单位 px。

查看源码

<template>
    <view class="col">
        <view class="item"><ux-link href="https://uviewpro.cn/zh/" :font-size="12">小号链接</ux-link></view>
        <view class="item"><ux-link href="https://uviewpro.cn/zh/" :font-size="17">大号链接</ux-link></view>
    </view>
</template>

<style scoped>
.col {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}
.item {
    flex-direction: column;
    margin-bottom: 8px;
}
</style>

下划线 under-line

设置 under-line 为 true，链接下方显示下划线。

查看源码

<template>
    <view class="row">
        <view class="item"><ux-link href="https://uviewpro.cn/zh/" under-line>带下划线</ux-link></view>
        <view class="item"><ux-link href="https://uviewpro.cn/zh/">无下划线</ux-link></view>
    </view>
</template>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.item {
    flex-direction: row;
    margin-right: 15px;
    margin-bottom: 8px;
}
</style>

自定义下划线颜色 line-color

设置 line-color 可单独修改下划线颜色，优先级高于 color。

查看源码

<template>
    <ux-link href="https://uviewpro.cn/zh/" under-line color="#2979ff" line-color="#fa3534">蓝字红线下划线</ux-link>
</template>

自定义点击事件

设置 default-click 为 false，点击时只触发 click 事件，不执行默认跳转。

查看源码

<template>
    <ux-link href="https://uviewpro.cn/zh/" :default-click="false" @click="onClick">自定义点击事件</ux-link>
</template>

<script setup lang="uts">
function onClick(href: string): void {
    uni.showToast({ title: '拦截跳转: ' + href, icon: 'none' });
}
</script>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
color	文字颜色	string	''	-
fontSize	字体大小，单位px	string | number	DEFAULT_FONT_SIZE	-
underLine	是否显示下划线	boolean	false	-
href	要跳转的链接	string	''	-
mpTips	小程序中复制到粘贴板的提示语	string	''	-
lineColor	下划线颜色	string	''	-
defaultClick	是否默认点击跳转	boolean	true	-

Events

事件名	说明	回调参数	版本
click	点击链接时触发；仅在 default-click=false 时派发（此时不执行默认复制）	href: string	-

Slots

插槽名	说明	版本
default	链接文字内容	-

注意事项

1. 当前实现三端一致：点击后统一执行 uni.setClipboardData 复制 href 并 uni.showToast 提示，组件内没有平台分支——App 端不会打开内置浏览器，H5 也不会 window.open。
2. click 事件只在 default-click=false 时派发；保持默认（true）时点击仅复制链接，不触发 click。
3. href 需带完整的 http(s):// 协议头，否则复制出去的地址无法直接访问。
4. 根节点是 text 且带 @click.stop，点击链接会阻止事件冒泡到父级。
5. 提示语默认来自语言包 uLink.mpTips（「链接已复制，请在浏览器打开」），传入 mp-tips 后覆盖；该提示三端通用，并非仅小程序生效。
6. font-size 支持全局覆盖，取值顺序为「font-size 显式传值 > 全局配置 componentProps.ux-link.fontSize > 内置默认 14」。
7. under-line 的下划线颜色优先取 line-color，未设置时同 color。