index.js 4.4 KB

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