u-cell-group.vue 1.8 KB

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