link.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. <template>
  2. <view class="container">
  3. <uni-card is-full :is-shadow="false">
  4. <text class="uni-h6">超链接组件,在小程序内复制url,在app内打开外部浏览器,在h5端打开新网页。</text>
  5. </uni-card>
  6. <uni-section title="基本示例" subTitle="打开外部连接" type="line" padding>
  7. <uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>
  8. </uni-section>
  9. <uni-section title="自定义颜色" type="line" padding>
  10. <uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"
  11. color="#007BFF"></uni-link>
  12. </uni-section>
  13. <uni-section title="自定义下划线" type="line" padding>
  14. <uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"
  15. showUnderLine="false"></uni-link>
  16. </uni-section>
  17. <uni-section title="自定义字体大小" type="line" padding>
  18. <uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
  19. font-size="20"></uni-link>
  20. </uni-section>
  21. <uni-section title="自定义插槽" type="line" padding>
  22. <uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
  23. color="red">点击跳转</uni-link>
  24. </uni-section>
  25. </view>
  26. </template>
  27. <script>
  28. export default {
  29. components: {},
  30. data() {
  31. return {};
  32. }
  33. };
  34. </script>
  35. <style lang="scss">
  36. </style>