1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
| <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>
|
|
