u-link.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <text class="u-link" @tap.stop="openLink" :style="{
  3. color: color,
  4. fontSize: fontSize + 'rpx',
  5. borderBottom: underLine ? `1px solid ${lineColor ? lineColor : color}` : 'none',
  6. paddingBottom: underLine ? '0rpx' : '0'
  7. }">
  8. <slot></slot>
  9. </text>
  10. </template>
  11. <script>
  12. /**
  13. * link 超链接
  14. * @description 该组件为超链接组件,在不同平台有不同表现形式:在APP平台会通过plus环境打开内置浏览器,在小程序中把链接复制到粘贴板,同时提示信息,在H5中通过window.open打开链接。
  15. * @tutorial https://www.uviewui.com/components/link.html
  16. * @property {String} color 文字颜色(默认#606266)
  17. * @property {String Number} font-size 字体大小,单位rpx(默认28)
  18. * @property {Boolean} under-line 是否显示下划线(默认false)
  19. * @property {String} href 跳转的链接,要带上http(s)
  20. * @property {String} line-color 下划线颜色,默认同color参数颜色
  21. * @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语(默认“链接已复制,请在浏览器打开”)
  22. * @example <u-link href="http://www.uviewui.com">蜀道难,难于上青天</u-link>
  23. */
  24. export default {
  25. name: "u-link",
  26. props: {
  27. // 文字颜色
  28. color: {
  29. type: String,
  30. default: '#2979ff'
  31. },
  32. // 字体大小,单位rpx
  33. fontSize: {
  34. type: [String, Number],
  35. default: 28
  36. },
  37. // 是否显示下划线
  38. underLine: {
  39. type: Boolean,
  40. default: false
  41. },
  42. // 要跳转的链接
  43. href: {
  44. type: String,
  45. default: ''
  46. },
  47. // 小程序中复制到粘贴板的提示语
  48. mpTips: {
  49. type: String,
  50. default: '链接已复制,请在浏览器打开'
  51. },
  52. // 下划线颜色
  53. lineColor: {
  54. type: String,
  55. default: ''
  56. }
  57. },
  58. methods: {
  59. openLink() {
  60. // #ifdef APP-PLUS
  61. plus.runtime.openURL(this.href)
  62. // #endif
  63. // #ifdef H5
  64. window.open(this.href)
  65. // #endif
  66. // #ifdef MP
  67. uni.setClipboardData({
  68. data: this.href,
  69. success: () => {
  70. uni.hideToast();
  71. this.$nextTick(() => {
  72. this.$u.toast(this.mpTips);
  73. })
  74. }
  75. });
  76. // #endif
  77. }
  78. }
  79. }
  80. </script>
  81. <style lang="scss" scoped>
  82. @import "../../libs/css/style.components.scss";
  83. .u-link {
  84. line-height: 1;
  85. }
  86. </style>