gui-link.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <!-- #ifdef APP-PLUS -->
  3. <text
  4. class="link"
  5. :data-url="url"
  6. @tap="openUrlForApp"
  7. :style="{
  8. color:color,
  9. lineHeight:lineHeight,
  10. fontSize:fontSize
  11. }">{{title}}</text>
  12. <!-- #endif -->
  13. <!-- #ifdef H5 -->
  14. <a
  15. :href="url"
  16. class="link"
  17. target="_blank"
  18. :style="{
  19. color:color,
  20. lineHeight:lineHeight,
  21. fontSize:fontSize
  22. }">{{title}}</a>
  23. <!-- #endif -->
  24. <!-- #ifdef MP -->
  25. <text
  26. class="link"
  27. :style="{color:color, lineHeight:lineHeight, fontSize:fontSize}">{{url}}</text>
  28. <!-- #endif -->
  29. </template>
  30. <script>
  31. export default {
  32. name : "gui-link",
  33. props : {
  34. url:{
  35. type : String,
  36. default : ""
  37. },
  38. title : {
  39. type : String,
  40. default : ""
  41. },
  42. color:{
  43. type : String,
  44. default : "#008AFF"
  45. },
  46. fontSize : {
  47. type : String,
  48. default : "28rpx"
  49. },
  50. lineHeight : {
  51. type : String,
  52. default : "50rpx"
  53. }
  54. },
  55. methods:{
  56. openUrlForApp : function(e){
  57. var link = e.currentTarget.dataset.url;
  58. plus.runtime.openURL(link);
  59. }
  60. }
  61. }
  62. </script>
  63. <style scoped>
  64. /* #ifdef H5 */
  65. .link{text-decoration:none;}
  66. /* #endif */
  67. </style>