index.js 2.5 KB

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