Link 超链接
该组件为超链接组件,在不同平台有不同表现形式:
- 在APP平台会通过plus环境打开内置浏览器
- 在小程序中把链接复制到粘贴板,同时提示信息
- 在H5中通过window.open打开链接
平台兼容性
App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ |
基本使用
- 通过
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
Link Props
属性名 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
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 | - | - |
Link Events
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击连接时触发 | - |