index.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import { VantComponent } from '../common/component';
  2. import { addUnit } from '../common/utils';
  3. VantComponent({
  4. relation: {
  5. name: 'grid-item',
  6. type: 'descendant',
  7. linked(child) {
  8. this.children.push(child);
  9. },
  10. unlinked(child) {
  11. this.children = this.children.filter((item) => item !== child);
  12. }
  13. },
  14. props: {
  15. square: {
  16. type: Boolean,
  17. observer: 'updateChildren'
  18. },
  19. gutter: {
  20. type: [Number, String],
  21. value: 0,
  22. observer: 'updateChildren'
  23. },
  24. clickable: {
  25. type: Boolean,
  26. observer: 'updateChildren'
  27. },
  28. columnNum: {
  29. type: Number,
  30. value: 4,
  31. observer: 'updateChildren'
  32. },
  33. center: {
  34. type: Boolean,
  35. value: true,
  36. observer: 'updateChildren'
  37. },
  38. border: {
  39. type: Boolean,
  40. value: true,
  41. observer: 'updateChildren'
  42. }
  43. },
  44. beforeCreate() {
  45. this.children = [];
  46. },
  47. created() {
  48. const { gutter } = this.data;
  49. if (gutter) {
  50. this.setData({
  51. style: `padding-left: ${addUnit(gutter)}`
  52. });
  53. }
  54. },
  55. methods: {
  56. updateChildren() {
  57. this.children.forEach((child) => {
  58. child.updateStyle();
  59. });
  60. }
  61. }
  62. });