uni-link.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <template>
  2. <a v-if="isShowA" class="uni-link" :href="href"
  3. :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
  4. :style="{color,fontSize:fontSize+'px'}" :download="download">
  5. <slot>{{text}}</slot>
  6. </a>
  7. <!-- #ifndef APP-NVUE -->
  8. <text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
  9. :style="{color,fontSize:fontSize+'px'}" @click="openURL">
  10. <slot>{{text}}</slot>
  11. </text>
  12. <!-- #endif -->
  13. <!-- #ifdef APP-NVUE -->
  14. <text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
  15. :style="{color,fontSize:fontSize+'px'}" @click="openURL">
  16. {{text}}
  17. </text>
  18. <!-- #endif -->
  19. </template>
  20. <script>
  21. /**
  22. * Link 外部网页超链接组件
  23. * @description uni-link是一个外部网页超链接组件,在小程序内复制url,在app内打开外部浏览器,在h5端打开新网页
  24. * @tutorial https://ext.dcloud.net.cn/plugin?id=1182
  25. * @property {String} href 点击后打开的外部网页url
  26. * @property {String} text 显示的文字
  27. * @property {String} downlaod H5平台下载文件名
  28. * @property {Boolean} showUnderLine 是否显示下划线
  29. * @property {String} copyTips 在小程序端复制链接时显示的提示语
  30. * @property {String} color 链接文字颜色
  31. * @property {String} fontSize 链接文字大小
  32. * @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link>
  33. */
  34. export default {
  35. name: 'uniLink',
  36. props: {
  37. href: {
  38. type: String,
  39. default: ''
  40. },
  41. text: {
  42. type: String,
  43. default: ''
  44. },
  45. download: {
  46. type: String,
  47. default: ''
  48. },
  49. showUnderLine: {
  50. type: [Boolean, String],
  51. default: true
  52. },
  53. copyTips: {
  54. type: String,
  55. default: '已自动复制网址,请在手机浏览器里粘贴该网址'
  56. },
  57. color: {
  58. type: String,
  59. default: '#999999'
  60. },
  61. fontSize: {
  62. type: [Number, String],
  63. default: 14
  64. }
  65. },
  66. computed: {
  67. isShowA() {
  68. // #ifdef H5
  69. this._isH5 = true;
  70. // #endif
  71. if ((this.isMail() || this.isTel()) && this._isH5 === true) {
  72. return true;
  73. }
  74. return false;
  75. }
  76. },
  77. created() {
  78. this._isH5 = null;
  79. },
  80. methods: {
  81. isMail() {
  82. return this.href.startsWith('mailto:');
  83. },
  84. isTel() {
  85. return this.href.startsWith('tel:');
  86. },
  87. openURL() {
  88. // #ifdef APP-PLUS
  89. if (this.isTel()) {
  90. this.makePhoneCall(this.href.replace('tel:', ''));
  91. } else {
  92. plus.runtime.openURL(this.href);
  93. }
  94. // #endif
  95. // #ifdef H5
  96. window.open(this.href)
  97. // #endif
  98. // #ifdef MP
  99. uni.setClipboardData({
  100. data: this.href
  101. });
  102. uni.showModal({
  103. content: this.copyTips,
  104. showCancel: false
  105. });
  106. // #endif
  107. },
  108. makePhoneCall(phoneNumber) {
  109. uni.makePhoneCall({
  110. phoneNumber
  111. })
  112. }
  113. }
  114. }
  115. </script>
  116. <style>
  117. /* #ifndef APP-NVUE */
  118. .uni-link {
  119. cursor: pointer;
  120. }
  121. /* #endif */
  122. .uni-link--withline {
  123. text-decoration: underline;
  124. }
  125. </style>