Link

17:06

Description

A text hyperlink: the root is a text; clicking copies href to the clipboard and shows a toast (default text from the locale uLink.mpTips: "Link copied, please open it in a browser", overridable via mp-tips). With default-click=false the default copy is skipped and only click(href) is emitted for custom handling.

Compatibility

Platform	Support
App	✅ Supported
H5	✅ Supported
WeChat Mini Program	✅ Supported

Examples

Basic Usage

Clicking the link opens the built-in browser on App, copies to the clipboard on Mini Program, and opens a new window on H5.

View source

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

Custom Color (color)

Set the text color via the color property; defaults to the theme content color.

View source

<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>

Custom Size (font-size)

Set the font size via the font-size property, in px.

View source

<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>

Underline (under-line)

Set under-line to true to show an underline below the link.

View source

<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>

Custom Underline Color (line-color)

Set line-color to change the underline color independently; it takes priority over color.

View source

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

Custom Click Event

Set default-click to false so that clicking only triggers the click event without performing the default navigation.

View source

<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

Property	Description	Type	Default	Version
customStyle	Custom root element style	string | UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
color	Text color; defaults to the theme content color	string	''	-
fontSize	Font size, in px	string | number	DEFAULT_FONT_SIZE	-
underLine	Whether to show an underline	boolean	false	-
href	Target link (include the http(s) scheme)	string	''	-
mpTips	Toast text shown after the link is copied to the clipboard	string	''	-
lineColor	Underline color; defaults to color	string	''	-
defaultClick	Whether the default click behavior (copy to clipboard) runs; when false, only click is emitted	boolean	true	-

Events

Event	Description	Params	Version
click	Fires when the link is clicked; emitted only when default-click=false (the default copy is then skipped)	href: string	-

Slots

Slot	Description	Version
default	Link text content	-

Notes

1. The current implementation behaves the same on all three platforms: a click runs uni.setClipboardData to copy href and then uni.showToast. There is no platform branch — App does not open a built-in browser, and H5 does not call window.open.
2. click is emitted only when default-click=false; with the default (true) a click just copies the link and does not emit click.
3. href must include the full http(s):// scheme, otherwise the copied address cannot be opened directly.
4. The root is a text with @click.stop, so clicking the link stops the event from bubbling to the parent.
5. The toast text comes from the locale key uLink.mpTips ("Link copied, please open it in a browser") and is overridden by mp-tips; it applies to all platforms, not only mini programs.
6. font-size supports a global override: the value resolves as explicit font-size > global config componentProps.ux-link.fontSize > built-in default 14.
7. The under-line underline color prefers line-color, and falls back to color when it is not set.