<template> <a v-if="isShowA" class="uni-link" :href="href" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}" :style="{color,fontSize:fontSize+'px'}" :download="download"> <slot>{{text}}</slot> </a> <!-- #ifndef APP-NVUE --> <text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}" :style="{color,fontSize:fontSize+'px'}" @click="openURL"> <slot>{{text}}</slot> </text> <!-- #endif --> <!-- #ifdef APP-NVUE --> <text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}" :style="{color,fontSize:fontSize+'px'}" @click="openURL"> {{text}} </text> <!-- #endif --> </template> <script> /** * Link 外部网页超链接组件 * @description uni-link是一个外部网页超链接组件,在小程序内复制url,在app内打开外部浏览器,在h5端打开新网页 * @tutorial https://ext.dcloud.net.cn/plugin?id=1182 * @property {String} href 点击后打开的外部网页url * @property {String} text 显示的文字 * @property {String} downlaod H5平台下载文件名 * @property {Boolean} showUnderLine 是否显示下划线 * @property {String} copyTips 在小程序端复制链接时显示的提示语 * @property {String} color 链接文字颜色 * @property {String} fontSize 链接文字大小 * @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link> */ export default { name: 'uniLink', props: { href: { type: String, default: '' }, text: { type: String, default: '' }, download: { type: String, default: '' }, showUnderLine: { type: [Boolean, String], default: true }, copyTips: { type: String, default: '已自动复制网址,请在手机浏览器里粘贴该网址' }, color: { type: String, default: '#999999' }, fontSize: { type: [Number, String], default: 14 } }, computed: { isShowA() { // #ifdef H5 this._isH5 = true; // #endif if ((this.isMail() || this.isTel()) && this._isH5 === true) { return true; } return false; } }, created() { this._isH5 = null; }, methods: { isMail() { return this.href.startsWith('mailto:'); }, isTel() { return this.href.startsWith('tel:'); }, openURL() { // #ifdef APP-PLUS if (this.isTel()) { this.makePhoneCall(this.href.replace('tel:', '')); } else { plus.runtime.openURL(this.href); } // #endif // #ifdef H5 window.open(this.href) // #endif // #ifdef MP uni.setClipboardData({ data: this.href }); uni.showModal({ content: this.copyTips, showCancel: false }); // #endif }, makePhoneCall(phoneNumber) { uni.makePhoneCall({ phoneNumber }) } } } </script> <style> /* #ifndef APP-NVUE */ .uni-link { cursor: pointer; } /* #endif */ .uni-link--withline { text-decoration: underline; } </style>