You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

89 lines
2.3 KiB

3 years ago
  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>