洛阳学员端
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.

61 lines
1.7 KiB

10 months ago
  1. <template>
  2. <view :style="[$u.addStyle(customStyle)]" :class="[customClass]" class="u-cell-group">
  3. <view v-if="title" class="u-cell-group__title">
  4. <slot name="title">
  5. <text class="u-cell-group__title__text">{{ title }}</text>
  6. </slot>
  7. </view>
  8. <view class="u-cell-group__wrapper">
  9. <u-line v-if="border"></u-line>
  10. <slot />
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. import props from './props.js';
  16. /**
  17. * cellGroup 单元格
  18. * @description cell单元格一般用于一组列表的情况比如个人中心页设置页等
  19. * @tutorial https://uviewui.com/components/cell.html
  20. *
  21. * @property {String} title 分组标题
  22. * @property {Boolean} border 是否显示外边框 (默认 true )
  23. * @property {Object} customStyle 定义需要用到的外部样式
  24. *
  25. * @event {Function} click 点击cell列表时触发
  26. * @example <u-cell-group title="设置喜好">
  27. */
  28. export default {
  29. name: 'u-cell-group',
  30. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  31. }
  32. </script>
  33. <style lang="scss" scoped>
  34. @import "../../libs/css/components.scss";
  35. $u-cell-group-title-padding: 16px 16px 8px !default;
  36. $u-cell-group-title-font-size: 15px !default;
  37. $u-cell-group-title-line-height: 16px !default;
  38. $u-cell-group-title-color: $u-main-color !default;
  39. .u-cell-group {
  40. flex: 1;
  41. &__title {
  42. padding: $u-cell-group-title-padding;
  43. &__text {
  44. font-size: $u-cell-group-title-font-size;
  45. line-height: $u-cell-group-title-line-height;
  46. color: $u-cell-group-title-color;
  47. }
  48. }
  49. &__wrapper {
  50. position: relative;
  51. }
  52. }
  53. </style>