index.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/libs/classNames'
  3. import styleToCssString from '../helpers/libs/styleToCssString'
  4. import { useRect } from '../helpers/hooks/useDOM'
  5. baseComponent({
  6. options: {
  7. multipleSlots: false,
  8. },
  9. relations: {
  10. '../cell/index': {
  11. type: 'descendant',
  12. observer() {
  13. this.callDebounceFn(this.updateIsLastElement)
  14. },
  15. },
  16. },
  17. properties: {
  18. prefixCls: {
  19. type: String,
  20. value: 'wux-cell-group',
  21. },
  22. title: {
  23. type: String,
  24. value: '',
  25. },
  26. label: {
  27. type: String,
  28. value: '',
  29. },
  30. mode: {
  31. type: String,
  32. value: 'default',
  33. },
  34. bodyStyle: {
  35. type: [String, Object],
  36. value: '',
  37. observer(newVal) {
  38. this.setData({
  39. internalBodyStyle: styleToCssString(newVal),
  40. })
  41. },
  42. },
  43. hasLine: {
  44. type: Boolean,
  45. value: true,
  46. },
  47. },
  48. data: {
  49. internalBodyStyle: '',
  50. },
  51. computed: {
  52. classes: ['prefixCls, mode, hasLine', function(prefixCls, mode, hasLine) {
  53. const wrap = classNames(prefixCls, {
  54. [`${prefixCls}--card`]: mode === 'card',
  55. [`${prefixCls}--has-line`]: hasLine,
  56. })
  57. const hd = `${prefixCls}__hd`
  58. const bd = `${prefixCls}__bd`
  59. const ft = `${prefixCls}__ft`
  60. return {
  61. wrap,
  62. hd,
  63. bd,
  64. ft,
  65. }
  66. }],
  67. },
  68. methods: {
  69. updateIsLastElement() {
  70. const elements = this.getRelationsByName('../cell/index')
  71. if (elements.length > 0) {
  72. const lastIndex = elements.length - 1
  73. elements.forEach((element, index) => {
  74. element.updateIsLastElement(index === lastIndex)
  75. })
  76. }
  77. },
  78. getBoundingClientRect(callback) {
  79. useRect(`.${this.data.prefixCls}`, this)
  80. .then((rect) => {
  81. if (!rect) return
  82. callback.call(this, rect.height, rect)
  83. })
  84. },
  85. },
  86. })