dykj-outsource-12123/uni_modules/uview-plus/components/u-link/u-link.vue
2024-06-28 14:18:30 +08:00

88 lines
2.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<text
class="u-link"
@tap.stop="openLink"
:style="[linkStyle, addStyle(customStyle)]"
>{{text}}</text>
</template>
<script>
import props from './props';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
import { addStyle, addUnit, getPx, toast } from '../../libs/function/index';
/**
* link 超链接
* @description 该组件为超链接组件在不同平台有不同表现形式在APP平台会通过plus环境打开内置浏览器在小程序中把链接复制到粘贴板同时提示信息在H5中通过window.open打开链接。
* @tutorial https://ijry.github.io/uview-plus/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: [mpMixin, mixin, props],
computed: {
linkStyle() {
const style = {
color: this.color,
fontSize: addUnit(this.fontSize),
// line-height设置为比字体大小多2px
lineHeight: addUnit(getPx(this.fontSize) + 2),
textDecoration: this.underLine ? 'underline' : 'none'
}
// if (this.underLine) {
// style.borderBottomColor = this.lineColor || this.color
// style.borderBottomWidth = '1px'
// }
return style
}
},
emits: ["click"],
methods: {
addStyle,
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(() => {
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>