WU-UI

中文

English

中文

English

Appearance

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

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

平台兼容性 ​

App(vue)App(nvue)H5小程序VUE2VUE3
√√√√√√

基本使用 ​

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

下划线 ​

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

vue
<template>
    <wu-link href="https://wuui.cn" text="打开wu-ui文档" :under-line="true"></wu-link>
</template>
<template>
    <wu-link href="https://wuui.cn" text="打开wu-ui文档" :under-line="true"></wu-link>
</template>

自定义颜色 ​

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

API ​

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