超链接 Link

超链接组件。

此组件只是一个简单的超链接组件，可以快速打开页面等操作，如果需要使用分享等功能，可以使用 button 组件的链接模式。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 text 属性设置链接文本。

<template>
    <pure-link text="超链接"></pure-link>
</template>

打开内部页面

• 通过 url 属性设置内部页面路径。
• 通过 openType 属性设置打开方式：
  • navigateTo、navigate、to：对应 uni.navigateTo 方法，默认值。
  • redirectTo、redirect：对应 uni.redirectTo 方法。
  • reLaunch、relaunch :对应 uni.reLaunch 方法。
  • switchTab、switch、tab :对应 uni.switchTab 方法。
  • navigateBack、back: 对应 uni.navigateBack 方法。

<template>
    <pure-link text="超链接" url="/pages/userinfo/index"></pure-link>
</template>

打开外部链接

• 通过 href 属性设置外部链接地址。

提示

只在 APP 端生效。 在 APP 端，会优先判断 href 是否为空，不为空，则直接跳转外部链接。

<template>
    <pure-link text="打开百度" href="https://www.baidu.com/"></pure-link>
</template>

前置/后置图标

• 通过 prefixIcon 属性设置前置图标。
• 通过 suffixIcon 属性设置后置图标。

<template>
    <pure-link text="一个链接" prefixIcon="__lianjie"></pure-link>
    <pure-link text="查看更多" suffixIcon="__you2"></pure-link>
    <pure-link text="隐私协议" prefixIcon="pu-iconfont pu-iconfont-zuo3" suffixIcon="pu-iconfont pu-iconfont-you3"></pure-link>
</template>

下划线

• 通过 underline 属性设置下划线。

<template>
    <pure-link text="一个链接" underline></pure-link>
</template>

禁用

• 通过 disabled 属性设置禁用状态。

<template>
    <pure-link text="一个链接" disabled></pure-link>
</template>

主题色

• 通过添加辅助类使用。

提示

辅助类使用规则

<template>
    <pure-link text="主要" calss="pure-link-primary"></pure-link>
    <pure-link text="成功" calss="pure-link-success"></pure-link>
    <pure-link text="危险" calss="pure-link-danger"></pure-link>
    <pure-link text="警告" calss="pure-link-warning"></pure-link>
    <pure-link text="信息" calss="pure-link-info"></pure-link>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	同 view 的 hover-class	String	"pure-hover"	-	+1.0.0
text	文本	String	""	-	+1.0.0
prefixIcon	前置图标，同图标组件（Icon）的 name 属性，参考	String	""	-	+1.0.0
prefixIconMode	前置图标，图片图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	heightFix	-	+1.0.0
suffixIcon	后置图标，同图标组件（Icon）的 name 属性，参考	String	""	-	+1.0.0
suffixIconMode	后置图标，图片图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	heightFix	-	+1.0.0
disabled	禁用状态	Boolean	false	true	+1.0.0
disabledClass	禁用类名	String	pure-disabled	-	+1.0.0
underline	是否显示下划线	Boolean	false	true	+1.0.0
loadingText	加载提示文本	String	""	-	+1.0.0
url	内部页面路径	String	__loading	-	+1.0.0
href	外部链接地址，只在 APP 端生效，并且在 APP 端优先级高于 url	String	""	false	+1.0.0
openType	打开内部页面时的跳转方式	String	navigateTo	见上方说明	+1.0.0
animationType	窗口显示的动画效果，参考	String	""	-	+1.0.0
animationDuration	窗口动画持续时间，单位为 ms，参考	Number	300	-	+1.0.0
events	页面间通信接口，用于监听被打开页面发送到当前页面的数据，参考	Object	null	-	+1.0.0
success	接口调用成功的回调函数，参考	Function	() => null	-	+1.0.0
fail	接口调用失败的回调函数，参考	Function	() => null	-	+1.0.0
complete	接口调用结束的回调函数（调用成功、失败都会执行），参考	Function	() => null	-	+1.0.0
delta	返回的页面数，如果 delta 大于现有页面数，则返回到首页，参考	Number	1	-	+1.0.0

Event

事件名	说明	回调参数	版本
onClick	点击事件	-	+1.0.0

Slots

名称	说明	参数	版本
default	默认，组件内容	-	+1.0.0