index.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import { VantComponent } from '../common/component';
  2. VantComponent({
  3. classes: ['content-class'],
  4. relation: {
  5. name: 'collapse',
  6. type: 'ancestor',
  7. linked: function linked(parent) {
  8. this.parent = parent;
  9. }
  10. },
  11. props: {
  12. name: null,
  13. title: null,
  14. value: null,
  15. icon: String,
  16. label: String,
  17. disabled: Boolean,
  18. border: {
  19. type: Boolean,
  20. value: true
  21. },
  22. isLink: {
  23. type: Boolean,
  24. value: true
  25. }
  26. },
  27. data: {
  28. contentHeight: 0,
  29. expanded: false
  30. },
  31. beforeCreate: function beforeCreate() {
  32. this.animation = wx.createAnimation({
  33. duration: 300,
  34. timingFunction: 'ease-in-out'
  35. });
  36. },
  37. methods: {
  38. updateExpanded: function updateExpanded() {
  39. if (!this.parent) {
  40. return null;
  41. }
  42. var _this$parent$data = this.parent.data,
  43. value = _this$parent$data.value,
  44. accordion = _this$parent$data.accordion,
  45. items = _this$parent$data.items;
  46. var name = this.data.name;
  47. var index = items.indexOf(this);
  48. var currentName = name == null ? index : name;
  49. var expanded = accordion ? value === currentName : value.some(function (name) {
  50. return name === currentName;
  51. });
  52. if (expanded !== this.data.expanded) {
  53. this.updateStyle(expanded);
  54. }
  55. this.set({
  56. expanded: expanded
  57. });
  58. },
  59. updateStyle: function updateStyle(expanded) {
  60. var _this = this;
  61. this.getRect('.van-collapse-item__content').then(function (res) {
  62. var animationData = _this.animation.height(expanded ? res.height : 0).step().export();
  63. if (expanded) {
  64. _this.set({
  65. animationData: animationData
  66. });
  67. } else {
  68. _this.set({
  69. contentHeight: res.height + 'px'
  70. }, function () {
  71. setTimeout(function () {
  72. _this.set({
  73. animationData: animationData
  74. });
  75. }, 20);
  76. });
  77. }
  78. });
  79. },
  80. onClick: function onClick() {
  81. if (this.data.disabled) {
  82. return;
  83. }
  84. var _this$data = this.data,
  85. name = _this$data.name,
  86. expanded = _this$data.expanded;
  87. var index = this.parent.data.items.indexOf(this);
  88. var currentName = name == null ? index : name;
  89. this.parent.switch(currentName, !expanded);
  90. },
  91. onTransitionEnd: function onTransitionEnd() {
  92. if (this.data.expanded) {
  93. this.set({
  94. contentHeight: 'auto'
  95. });
  96. }
  97. }
  98. }
  99. });