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

84 lines
2.5 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<text
class="u-link"
@tap.stop="openLink"
:style="[linkStyle, $u.addStyle(customStyle)]"
>{{text}}</text>
</template>
<script>
import props from './props.js';
/**
* link 超链接
* @description 该组件为超链接组件在不同平台有不同表现形式在APP平台会通过plus环境打开内置浏览器在小程序中把链接复制到粘贴板同时提示信息在H5中通过window.open打开链接。
* @tutorial https://www.uviewui.com/components/link.html
* @property {String} color 文字颜色 (默认 color['u-primary']
* @property {String Number} fontSize 字体大小单位px (默认 15
* @property {Boolean} underLine 是否显示下划线 (默认 false
* @property {String} href 跳转的链接要带上http(s)
* @property {String} mpTips 各个小程序平台把链接复制到粘贴板后的提示语(默认“链接已复制,请在浏览器打开”)
* @property {String} lineColor 下划线颜色默认同color参数颜色
* @property {String} text 超链接的问题不使用slot形式传入是因为nvue下无法修改颜色
* @property {Object} customStyle 定义需要用到的外部样式
*
* @example <u-link href="http://www.uviewui.com">蜀道难,难于上青天</u-link>
*/
export default {
name: "u-link",
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
computed: {
linkStyle() {
const style = {
color: this.color,
fontSize: uni.$u.addUnit(this.fontSize),
// line-height设置为比字体大小多2px
lineHeight: uni.$u.addUnit(uni.$u.getPx(this.fontSize) + 2),
textDecoration: this.underLine ? 'underline' : 'none'
}
// if (this.underLine) {
// style.borderBottomColor = this.lineColor || this.color
// style.borderBottomWidth = '1px'
// }
return style
}
},
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(() => {
uni.$u.toast(this.mpTips);
})
}
});
// #endif
this.$emit('click')
}
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
$u-link-line-height:1 !default;
.u-link {
/* #ifndef APP-NVUE */
line-height: $u-link-line-height;
/* #endif */
@include flex;
flex-wrap: wrap;
flex: 1;
}
</style>