AI销管
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

u-cell-group.vue 1.6 KiB

2 年前
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <view class="u-cell-box">
  3. <view class="u-cell-title" v-if="title" :style="[titleStyle]">
  4. {{title}}
  5. </view>
  6. <view class="u-cell-item-box" :class="{'u-border-bottom u-border-top': border}">
  7. <slot />
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. /**
  13. * cellGroup 单元格父组件Group
  14. * @description cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。搭配u-cell-item
  15. * @tutorial https://www.uviewui.com/components/cell.html
  16. * @property {String} title 分组标题
  17. * @property {Boolean} border 是否显示外边框(默认true)
  18. * @property {Object} title-style 分组标题的的样式,对象形式,如{'font-size': '24rpx'} 或 {'fontSize': '24rpx'}
  19. * @example <u-cell-group title="设置喜好">
  20. */
  21. export default {
  22. name: "u-cell-group",
  23. props: {
  24. // 分组标题
  25. title: {
  26. type: String,
  27. default: ''
  28. },
  29. // 是否显示分组list上下边框
  30. border: {
  31. type: Boolean,
  32. default: true
  33. },
  34. // 分组标题的样式,对象形式,注意驼峰属性写法
  35. // 类似 {'font-size': '24rpx'} 和 {'fontSize': '24rpx'}
  36. titleStyle: {
  37. type: Object,
  38. default () {
  39. return {};
  40. }
  41. }
  42. },
  43. data() {
  44. return {
  45. index: 0,
  46. }
  47. },
  48. }
  49. </script>
  50. <style lang="scss" scoped>
  51. @import "../../libs/css/style.components.scss";
  52. .u-cell-box {
  53. width: 100%;
  54. }
  55. .u-cell-title {
  56. padding: 30rpx 32rpx 10rpx 32rpx;
  57. font-size: 30rpx;
  58. text-align: left;
  59. color: $u-tips-color;
  60. }
  61. .u-cell-item-box {
  62. background-color: #FFFFFF;
  63. flex-direction: row;
  64. }
  65. </style>