uv-ui

✈

组件名：uv-link

点击下载&安装 (opens new window)

该组件为超链接组件，在不同平台有不同表现形式：

  • 在APP平台会通过plus环境打开内置浏览器
  • 在小程序中把链接复制到粘贴板，同时提示信息
  • 在H5中通过window.open打开链接

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

  • 通过href设置打开的链接，text设置显示的内容
<template>
	<uv-link href="https://www.uvui.cn" text="打开uv-ui文档" @click="click"></uv-link>
</template>
<script>
	export default {
		methods: {
			click() {
				console.log('click');
			}
		}
	}
</script>

# 下划线

通过under-line设置是否显示链接的下划线

<template>
	<uv-link href="https://www.uvui.cn" text="打开uv-ui文档" :under-line="true"></uv-link>
</template>

# 自定义颜色

  • 通过color设置文字颜色
  • 通过line-color设置下划线颜色
<template>
	<uv-link href="https://www.uvui.cn" text="打开uv-ui文档" color="#19be6b" line-color="#19be6b"></uv-link>
</template>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

参数 说明 类型 默认值 可选值
color 文字颜色 String - -
fontSize 字体大小，默认单位px(rpx) String | Number 15 -
underLine 是否显示下划线 Boolean false true | false
href 跳转的链接，要带上http(s) String - -
mpTips 各个小程序平台把链接复制到粘贴板后的提示语 String 链接已复制，请在浏览器打开 -
lineColor 下划线颜色，默认同color参数颜色 String - -
text 超链接的问题，不使用slot形式传入，是因为nvue下无法修改颜色 String - -
事件名 说明 回调参数
@click 点击链接时触发 -

← Image 图片 →