25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.

u-gap.vue 1.3 KiB

3 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <view class="u-gap" :style="[gapStyle]"></view>
  3. </template>
  4. <script>
  5. /**
  6. * gap 间隔槽
  7. * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景,方便用户风格统一,减少工作量
  8. * @tutorial https://www.uviewui.com/components/gap.html
  9. * @property {String} bg-color 背景颜色(默认#f3f4f6)
  10. * @property {String Number} height 分割槽高度,单位rpx(默认30)
  11. * @property {String Number} margin-top 与前一个组件的距离,单位rpx(默认0)
  12. * @property {String Number} margin-bottom 与后一个组件的距离,单位rpx(0)
  13. * @example <u-gap height="80" bg-color="#bbb"></u-gap>
  14. */
  15. export default {
  16. name: "u-gap",
  17. props: {
  18. bgColor: {
  19. type: String,
  20. default: 'transparent ' // 背景透明
  21. },
  22. // 高度
  23. height: {
  24. type: [String, Number],
  25. default: 30
  26. },
  27. // 与上一个组件的距离
  28. marginTop: {
  29. type: [String, Number],
  30. default: 0
  31. },
  32. // 与下一个组件的距离
  33. marginBottom: {
  34. type: [String, Number],
  35. default: 0
  36. },
  37. },
  38. computed: {
  39. gapStyle() {
  40. return {
  41. backgroundColor: this.bgColor,
  42. height: this.height + 'rpx',
  43. marginTop: this.marginTop + 'rpx',
  44. marginBottom: this.marginBottom + 'rpx'
  45. };
  46. }
  47. }
  48. };
  49. </script>
  50. <style lang="scss" scoped>
  51. @import "../../libs/css/style.components.scss";
  52. </style>