link.nvue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基本案例</text>
  5. <view class="u-demo-block__content">
  6. <view class="u-page__link-item">
  7. <u-link
  8. href="https://uviewui.com/"
  9. text="打开uView UI文档"
  10. @click="click"
  11. ></u-link>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="u-demo-block">
  16. <text class="u-demo-block__title">显示下划线</text>
  17. <view class="u-demo-block__content">
  18. <view class="u-page__link-item">
  19. <u-link
  20. href="https://uviewui.com/"
  21. :underLine="true"
  22. text="Go to uView doc"
  23. ></u-link>
  24. </view>
  25. </view>
  26. </view>
  27. <view class="u-demo-block">
  28. <text class="u-demo-block__title">自定义颜色</text>
  29. <view class="u-demo-block__content">
  30. <view class="u-page__link-item">
  31. <u-link
  32. href="https://uviewui.com/"
  33. lineColor="#19be6b"
  34. color="#19be6b"
  35. text="打开uView UI文档"
  36. ></u-link>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="u-demo-block">
  41. <text class="u-demo-block__title">自定义链接内容</text>
  42. <view class="u-demo-block__content">
  43. <view class="u-page__link-item">
  44. <u-link
  45. href="https://uniapp.dcloud.io/"
  46. text="打开uni-app文档"
  47. ></u-link>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. </template>
  53. <script>
  54. export default {
  55. data() {
  56. return {
  57. }
  58. },
  59. methods: {
  60. click() {
  61. console.log('click');
  62. }
  63. }
  64. }
  65. </script>
  66. <style lang="scss">
  67. .u-page {
  68. &__link-item {
  69. margin-top: 5px;
  70. }
  71. }
  72. </style>