index.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { use, isDef } from '../utils';
  3. import { raf } from '../utils/raf';
  4. import Cell from '../cell';
  5. import { cellProps } from '../cell/shared';
  6. import { FindParentMixin } from '../mixins/find-parent';
  7. var _use = use('collapse-item'),
  8. sfc = _use[0],
  9. bem = _use[1];
  10. var CELL_SLOTS = ['title', 'icon', 'right-icon'];
  11. export default sfc({
  12. mixins: [FindParentMixin],
  13. props: _extends({}, cellProps, {
  14. name: [String, Number],
  15. disabled: Boolean,
  16. isLink: {
  17. type: Boolean,
  18. "default": true
  19. }
  20. }),
  21. data: function data() {
  22. return {
  23. show: null,
  24. inited: null
  25. };
  26. },
  27. computed: {
  28. items: function items() {
  29. return this.parent.items;
  30. },
  31. index: function index() {
  32. return this.items.indexOf(this);
  33. },
  34. currentName: function currentName() {
  35. return isDef(this.name) ? this.name : this.index;
  36. },
  37. expanded: function expanded() {
  38. var _this = this;
  39. if (!this.parent) {
  40. return null;
  41. }
  42. var value = this.parent.value;
  43. return this.parent.accordion ? value === this.currentName : value.some(function (name) {
  44. return name === _this.currentName;
  45. });
  46. }
  47. },
  48. created: function created() {
  49. this.findParent('van-collapse');
  50. this.items.push(this);
  51. this.show = this.expanded;
  52. this.inited = this.expanded;
  53. },
  54. destroyed: function destroyed() {
  55. this.items.splice(this.index, 1);
  56. },
  57. watch: {
  58. expanded: function expanded(_expanded, prev) {
  59. var _this2 = this;
  60. if (prev === null) {
  61. return;
  62. }
  63. if (_expanded) {
  64. this.show = true;
  65. this.inited = true;
  66. }
  67. raf(function () {
  68. var _this2$$refs = _this2.$refs,
  69. content = _this2$$refs.content,
  70. wrapper = _this2$$refs.wrapper;
  71. if (!content || !wrapper) {
  72. return;
  73. }
  74. var clientHeight = content.clientHeight;
  75. if (clientHeight) {
  76. var contentHeight = clientHeight + "px";
  77. wrapper.style.height = _expanded ? 0 : contentHeight;
  78. raf(function () {
  79. wrapper.style.height = _expanded ? contentHeight : 0;
  80. });
  81. } else {
  82. _this2.onTransitionEnd();
  83. }
  84. });
  85. }
  86. },
  87. methods: {
  88. onClick: function onClick() {
  89. if (this.disabled) {
  90. return;
  91. }
  92. var parent = this.parent;
  93. var name = parent.accordion && this.currentName === parent.value ? '' : this.currentName;
  94. var expanded = !this.expanded;
  95. this.parent["switch"](name, expanded);
  96. },
  97. onTransitionEnd: function onTransitionEnd() {
  98. if (!this.expanded) {
  99. this.show = false;
  100. } else {
  101. this.$refs.wrapper.style.height = null;
  102. }
  103. }
  104. },
  105. render: function render(h) {
  106. var _this3 = this;
  107. var titleSlots = CELL_SLOTS.reduce(function (slots, name) {
  108. if (_this3.slots(name)) {
  109. slots[name] = function () {
  110. return _this3.slots(name);
  111. };
  112. }
  113. return slots;
  114. }, {});
  115. if (this.slots('value')) {
  116. titleSlots["default"] = function () {
  117. return _this3.slots('value');
  118. };
  119. }
  120. var Title = h(Cell, {
  121. "class": bem('title', {
  122. disabled: this.disabled,
  123. expanded: this.expanded
  124. }),
  125. "on": {
  126. "click": this.onClick
  127. },
  128. "scopedSlots": titleSlots,
  129. "props": _extends({}, this.$props)
  130. });
  131. var Content = this.inited && h("div", {
  132. "directives": [{
  133. name: "show",
  134. value: this.show
  135. }],
  136. "ref": "wrapper",
  137. "class": bem('wrapper'),
  138. "on": {
  139. "transitionend": this.onTransitionEnd
  140. }
  141. }, [h("div", {
  142. "ref": "content",
  143. "class": bem('content')
  144. }, [this.slots()])]);
  145. return h("div", {
  146. "class": [bem(), {
  147. 'van-hairline--top': this.index
  148. }]
  149. }, [Title, Content]);
  150. }
  151. });