index.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var link_1 = require('../mixins/link');
  4. var component_1 = require('../common/component');
  5. var utils_1 = require('../common/utils');
  6. component_1.VantComponent({
  7. relation: {
  8. name: 'grid',
  9. type: 'ancestor',
  10. current: 'grid-item',
  11. },
  12. classes: ['content-class', 'icon-class', 'text-class'],
  13. mixins: [link_1.link],
  14. props: {
  15. icon: String,
  16. iconColor: String,
  17. dot: Boolean,
  18. info: null,
  19. badge: null,
  20. text: String,
  21. useSlot: Boolean,
  22. },
  23. data: {
  24. viewStyle: '',
  25. },
  26. mounted: function () {
  27. this.updateStyle();
  28. },
  29. methods: {
  30. updateStyle: function () {
  31. if (!this.parent) {
  32. return;
  33. }
  34. var _a = this.parent,
  35. data = _a.data,
  36. children = _a.children;
  37. var columnNum = data.columnNum,
  38. border = data.border,
  39. square = data.square,
  40. gutter = data.gutter,
  41. clickable = data.clickable,
  42. center = data.center,
  43. direction = data.direction,
  44. iconSize = data.iconSize;
  45. var width = 100 / columnNum + '%';
  46. var styleWrapper = [];
  47. styleWrapper.push('width: ' + width);
  48. if (square) {
  49. styleWrapper.push('padding-top: ' + width);
  50. }
  51. if (gutter) {
  52. var gutterValue = utils_1.addUnit(gutter);
  53. styleWrapper.push('padding-right: ' + gutterValue);
  54. var index = children.indexOf(this);
  55. if (index >= columnNum && !square) {
  56. styleWrapper.push('margin-top: ' + gutterValue);
  57. }
  58. }
  59. var contentStyle = '';
  60. if (square && gutter) {
  61. var gutterValue = utils_1.addUnit(gutter);
  62. contentStyle =
  63. '\n right: ' +
  64. gutterValue +
  65. ';\n bottom: ' +
  66. gutterValue +
  67. ';\n height: auto;\n ';
  68. }
  69. this.setData({
  70. viewStyle: styleWrapper.join('; '),
  71. contentStyle: contentStyle,
  72. center: center,
  73. border: border,
  74. square: square,
  75. gutter: gutter,
  76. clickable: clickable,
  77. direction: direction,
  78. iconSize: iconSize,
  79. });
  80. },
  81. onClick: function () {
  82. this.$emit('click');
  83. this.jumpLink();
  84. },
  85. },
  86. });