You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

u-section.vue 2.8 KiB

2 jaren geleden
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <view class="u-section">
  3. <view class="u-section-title" :style="{
  4. fontWeight: bold ? 'bold' : 'normal',
  5. color: color,
  6. fontSize: fontSize + 'rpx',
  7. paddingLeft: showLine ? '10rpx' : 0
  8. }" :class="{
  9. 'u-section--line': showLine
  10. }">
  11. {{title}}
  12. </view>
  13. <view class="u-right-info" v-if="right" :style="{
  14. color: subColor
  15. }" @tap="rightClick">
  16. {{subTitle}}
  17. <view class="u-icon-arrow">
  18. <u-icon name="arrow-right" size="24" :color="subColor"></u-icon>
  19. </view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. /**
  25. * section 查看更多
  26. * @description 该组件一般用于分类信息有很多,但是限于篇幅只能列出一部分,让用户通过"查看更多"获得更多信息的场景,实际效果见演示。
  27. * @tutorial https://www.uviewui.com/components/section.html
  28. * @property {String} title 左边主标题
  29. * @property {String} sub-title 右边副标题(默认更多)
  30. * @property {Boolean} right 是否显示右边的内容(默认true)
  31. * @property {Boolean} showLine 是否显示左边的竖条(默认true)
  32. * @property {String Number} font-size 主标题的字体大小(默认28)
  33. * @property {Boolean} bold 主标题是否加粗(默认true)
  34. * @property {String} color 主标题颜色(默认#303133)
  35. * @event {Function} click 组件右侧的内容被点击时触发,用于跳转"更多"
  36. * @example <u-section title="今日热门" :right="false"></u-section>
  37. */
  38. export default {
  39. name: "u-section",
  40. props: {
  41. // 标题信息
  42. title: {
  43. type: String,
  44. default: ''
  45. },
  46. // 右边副标题内容
  47. subTitle: {
  48. type: String,
  49. default: '更多'
  50. },
  51. // 是否显示右边的内容
  52. right: {
  53. type: Boolean,
  54. default: true
  55. },
  56. fontSize: {
  57. type: [Number, String],
  58. default: 28
  59. },
  60. // 主标题是否加粗
  61. bold: {
  62. type: Boolean,
  63. default: true
  64. },
  65. // 主标题的颜色
  66. color: {
  67. type: String,
  68. default: '#303133'
  69. },
  70. // 右边副标题的颜色
  71. subColor: {
  72. type: String,
  73. default: '#909399'
  74. },
  75. // 是否显示左边的竖条
  76. showLine: {
  77. type: Boolean,
  78. default: true
  79. }
  80. },
  81. data() {
  82. return {
  83. }
  84. },
  85. methods: {
  86. rightClick() {
  87. this.$emit('click');
  88. }
  89. }
  90. }
  91. </script>
  92. <style lang="scss" scoped>
  93. @import "../../libs/css/style.components.scss";
  94. .u-section {
  95. display: flex;
  96. justify-content: space-between;
  97. align-items: center;
  98. width: 100%;
  99. }
  100. .u-section-title {
  101. position: relative;
  102. font-size: 28rpx;
  103. line-height: 1;
  104. }
  105. .u-section--line:after {
  106. position: absolute;
  107. width: 4px;
  108. height: 100%;
  109. content: '';
  110. left: 0;
  111. border-radius: 10px;
  112. background-color: currentColor;
  113. }
  114. .u-right-info {
  115. color: $u-tips-color;
  116. font-size: 26rpx;
  117. display: flex;
  118. align-items: center;
  119. }
  120. .u-icon-arrow {
  121. margin-left: 6rpx;
  122. }
  123. </style>