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