gui-link.vue 1.0 KB

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