运维小程序
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

collapse-panel.js 3.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. import { SuperComponent, wxComponent } from '../common/src/index';
  8. import config from '../common/config';
  9. import props from './props';
  10. import { getRect } from '../common/utils';
  11. const { prefix } = config;
  12. const name = `${prefix}-collapse-panel`;
  13. let CollapsePanel = class CollapsePanel extends SuperComponent {
  14. constructor() {
  15. super(...arguments);
  16. this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-header`];
  17. this.options = {
  18. multipleSlots: true,
  19. };
  20. this.relations = {
  21. '../collapse/collapse': {
  22. type: 'ancestor',
  23. linked(target) {
  24. const { value, expandIcon, disabled } = target.properties;
  25. this.setData({
  26. ultimateExpandIcon: expandIcon || this.properties.expandIcon,
  27. ultimateDisabled: this.properties.disabled == null ? disabled : this.properties.disabled,
  28. });
  29. this.updateExpanded(value);
  30. },
  31. },
  32. };
  33. this.properties = props;
  34. this.data = {
  35. prefix,
  36. expanded: false,
  37. classPrefix: name,
  38. classBasePrefix: prefix,
  39. ultimateExpandIcon: false,
  40. ultimateDisabled: false,
  41. };
  42. this.methods = {
  43. updateExpanded(activeValues = []) {
  44. if (!this.$parent || this.data.ultimateDisabled) {
  45. return;
  46. }
  47. const { value } = this.properties;
  48. const { defaultExpandAll } = this.$parent.data;
  49. const expanded = defaultExpandAll ? !this.data.expanded : activeValues.includes(value);
  50. if (expanded === this.properties.expanded)
  51. return;
  52. this.setData({ expanded });
  53. this.updateStyle(expanded);
  54. },
  55. updateStyle(expanded) {
  56. return getRect(this, `.${name}__content`)
  57. .then((rect) => rect.height)
  58. .then((height) => {
  59. const animation = wx.createAnimation({
  60. duration: 0,
  61. timingFunction: 'ease-in-out',
  62. });
  63. if (expanded) {
  64. animation.height(height).top(0).step({ duration: 300 }).height('auto').step();
  65. }
  66. else {
  67. animation.height(height).top(1).step({ duration: 1 }).height(0).step({ duration: 300 });
  68. }
  69. this.setData({ animation: animation.export() });
  70. });
  71. },
  72. onClick() {
  73. const { ultimateDisabled } = this.data;
  74. const { value } = this.properties;
  75. if (ultimateDisabled)
  76. return;
  77. if (this.$parent.data.defaultExpandAll) {
  78. this.updateExpanded();
  79. }
  80. else {
  81. this.$parent.switch(value);
  82. }
  83. },
  84. };
  85. }
  86. };
  87. CollapsePanel = __decorate([
  88. wxComponent()
  89. ], CollapsePanel);
  90. export default CollapsePanel;