yshi/fuintUniapp/uview-ui/components/u-link/u-link.vue

<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>