You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

89 lines
2.3 KiB

<template>
<text class="u-link" @tap.stop="openLink" :style="{
color: color,
fontSize: fontSize + 'rpx',
borderBottom: underLine ? `1px solid ${lineColor ? lineColor : color}` : 'none',
paddingBottom: underLine ? '0rpx' : '0'
}">
<slot></slot>
</text>
</template>
<script>
/**
* link 超链接
* @description 该组件为超链接组件,在不同平台有不同表现形式:在APP平台会通过plus环境打开内置浏览器,在小程序中把链接复制到粘贴板,同时提示信息,在H5中通过window.open打开链接。
* @tutorial https://www.uviewui.com/components/link.html
* @property {String} color 文字颜色(默认#606266)
* @property {String Number} font-size 字体大小,单位rpx(默认28)
* @property {Boolean} under-line 是否显示下划线(默认false)
* @property {String} href 跳转的链接,要带上http(s)
* @property {String} line-color 下划线颜色,默认同color参数颜色
* @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语(默认“链接已复制,请在浏览器打开”)
* @example <u-link href="http://www.uviewui.com">蜀道难,难于上青天</u-link>
*/
export default {
name: "u-link",
props: {
// 文字颜色
color: {
type: String,
default: '#2979ff'
},
// 字体大小,单位rpx
fontSize: {
type: [String, Number],
default: 28
},
// 是否显示下划线
underLine: {
type: Boolean,
default: false
},
// 要跳转的链接
href: {
type: String,
default: ''
},
// 小程序中复制到粘贴板的提示语
mpTips: {
type: String,
default: '链接已复制,请在浏览器打开'
},
// 下划线颜色
lineColor: {
type: String,
default: ''
}
},
methods: {
openLink() {
// #ifdef APP-PLUS
plus.runtime.openURL(this.href)
// #endif
// #ifdef H5
window.open(this.href)
// #endif
// #ifdef MP
uni.setClipboardData({
data: this.href,
success: () => {
uni.hideToast();
this.$nextTick(() => {
this.$u.toast(this.mpTips);
})
}
});
// #endif
}
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-link {
line-height: 1;
}
</style>