uLink.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <view style="text-decoration:underline" :href="href" @click="openURL" :inWhiteList="inWhiteList">{{text}}</view>
  3. </template>
  4. <script>
  5. /**
  6. * @description u-link是一个外部网页超链接组件,在小程序内打开内部web-view组件或复制url,在app内打开外部浏览器,在h5端打开新网页
  7. * @property {String} href 点击后打开的外部网页url,小程序中必须以https://开头
  8. * @property {String} text 显示的文字
  9. * @property {Boolean} inWhiteList 是否在小程序白名单中,如果在的话,在小程序端会直接打开内置web-view,否则会只会复制url,提示在外部打开
  10. * @example * <u-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn" :inWhiteList="true"></u-link>
  11. */
  12. export default {
  13. name: 'u-link',
  14. props: {
  15. href: {
  16. type: String,
  17. default: ''
  18. },
  19. text: {
  20. type: String,
  21. default: ''
  22. },
  23. inWhiteList: {
  24. type: Boolean,
  25. default: false
  26. }
  27. },
  28. methods: {
  29. openURL() {
  30. // #ifdef APP-PLUS
  31. plus.runtime.openURL(this.href) //这里默认使用外部浏览器打开而不是内部web-view组件打开
  32. // #endif
  33. // #ifdef H5
  34. window.open(this.href)
  35. // #endif
  36. // #ifdef MP
  37. if (this.inWhiteList) { //如果在小程序的网址白名单中,会走内置webview打开,否则会复制网址提示在外部浏览器打开
  38. uni.navigateTo({
  39. url: '/pages/component/web-view/web-view?url=' + this.href
  40. });
  41. } else {
  42. uni.setClipboardData({
  43. data: this.href
  44. });
  45. uni.showModal({
  46. content: '本网址无法直接在小程序内打开。已自动复制网址,请在手机浏览器里粘贴该网址',
  47. showCancel: false
  48. });
  49. }
  50. // #endif
  51. }
  52. }
  53. }
  54. </script>
  55. <style>
  56. </style>