index.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. // Utils
  3. import { createNamespace, addUnit } from '../utils';
  4. import { BORDER } from '../utils/constant';
  5. import { route, routeProps } from '../utils/router'; // Mixins
  6. import { ChildrenMixin } from '../mixins/relation'; // Components
  7. import Info from '../info';
  8. import Icon from '../icon';
  9. var _createNamespace = createNamespace('grid-item'),
  10. createComponent = _createNamespace[0],
  11. bem = _createNamespace[1];
  12. export default createComponent({
  13. mixins: [ChildrenMixin('vanGrid')],
  14. props: _extends({}, routeProps, {
  15. dot: Boolean,
  16. text: String,
  17. icon: String,
  18. iconPrefix: String,
  19. // @deprecated
  20. info: [Number, String],
  21. badge: [Number, String]
  22. }),
  23. computed: {
  24. style: function style() {
  25. var _this$parent = this.parent,
  26. square = _this$parent.square,
  27. gutter = _this$parent.gutter,
  28. columnNum = _this$parent.columnNum;
  29. var percent = 100 / columnNum + "%";
  30. var style = {
  31. flexBasis: percent
  32. };
  33. if (square) {
  34. style.paddingTop = percent;
  35. } else if (gutter) {
  36. var gutterValue = addUnit(gutter);
  37. style.paddingRight = gutterValue;
  38. if (this.index >= columnNum) {
  39. style.marginTop = gutterValue;
  40. }
  41. }
  42. return style;
  43. },
  44. contentStyle: function contentStyle() {
  45. var _this$parent2 = this.parent,
  46. square = _this$parent2.square,
  47. gutter = _this$parent2.gutter;
  48. if (square && gutter) {
  49. var gutterValue = addUnit(gutter);
  50. return {
  51. right: gutterValue,
  52. bottom: gutterValue,
  53. height: 'auto'
  54. };
  55. }
  56. }
  57. },
  58. methods: {
  59. onClick: function onClick(event) {
  60. this.$emit('click', event);
  61. route(this.$router, this);
  62. },
  63. genIcon: function genIcon() {
  64. var _this$badge;
  65. var h = this.$createElement;
  66. var iconSlot = this.slots('icon');
  67. var info = (_this$badge = this.badge) != null ? _this$badge : this.info;
  68. if (process.env.NODE_ENV === 'development' && this.info) {
  69. console.warn('[Vant] GridItem: "info" prop is deprecated, use "badge" prop instead.');
  70. }
  71. if (iconSlot) {
  72. return h("div", {
  73. "class": bem('icon-wrapper')
  74. }, [iconSlot, h(Info, {
  75. "attrs": {
  76. "dot": this.dot,
  77. "info": info
  78. }
  79. })]);
  80. }
  81. if (this.icon) {
  82. return h(Icon, {
  83. "attrs": {
  84. "name": this.icon,
  85. "dot": this.dot,
  86. "badge": info,
  87. "size": this.parent.iconSize,
  88. "classPrefix": this.iconPrefix
  89. },
  90. "class": bem('icon')
  91. });
  92. }
  93. },
  94. getText: function getText() {
  95. var h = this.$createElement;
  96. var textSlot = this.slots('text');
  97. if (textSlot) {
  98. return textSlot;
  99. }
  100. if (this.text) {
  101. return h("span", {
  102. "class": bem('text')
  103. }, [this.text]);
  104. }
  105. },
  106. genContent: function genContent() {
  107. var slot = this.slots();
  108. if (slot) {
  109. return slot;
  110. }
  111. return [this.genIcon(), this.getText()];
  112. }
  113. },
  114. render: function render() {
  115. var _ref;
  116. var h = arguments[0];
  117. var _this$parent3 = this.parent,
  118. center = _this$parent3.center,
  119. border = _this$parent3.border,
  120. square = _this$parent3.square,
  121. gutter = _this$parent3.gutter,
  122. direction = _this$parent3.direction,
  123. clickable = _this$parent3.clickable;
  124. return h("div", {
  125. "class": [bem({
  126. square: square
  127. })],
  128. "style": this.style
  129. }, [h("div", {
  130. "style": this.contentStyle,
  131. "attrs": {
  132. "role": clickable ? 'button' : null,
  133. "tabindex": clickable ? 0 : null
  134. },
  135. "class": [bem('content', [direction, {
  136. center: center,
  137. square: square,
  138. clickable: clickable,
  139. surround: border && gutter
  140. }]), (_ref = {}, _ref[BORDER] = border, _ref)],
  141. "on": {
  142. "click": this.onClick
  143. }
  144. }, [this.genContent()])]);
  145. }
  146. });