index.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. import { VantComponent } from '../common/component';
  2. import { addUnit } from '../common/utils';
  3. let ARRAY = [];
  4. VantComponent({
  5. field: true,
  6. relation: {
  7. name: 'dropdown-item',
  8. type: 'descendant',
  9. current: 'dropdown-menu',
  10. linked() {
  11. this.updateItemListData();
  12. },
  13. unlinked() {
  14. this.updateItemListData();
  15. },
  16. },
  17. props: {
  18. customClass1:{
  19. type: String,
  20. observer: '',
  21. },
  22. customClass2: {
  23. type: String,
  24. observer: '',
  25. },
  26. activeColor: {
  27. type: String,
  28. observer: 'updateChildrenData',
  29. },
  30. overlay: {
  31. type: Boolean,
  32. value: true,
  33. observer: 'updateChildrenData',
  34. },
  35. zIndex: {
  36. type: Number,
  37. value: 10,
  38. },
  39. duration: {
  40. type: Number,
  41. value: 200,
  42. observer: 'updateChildrenData',
  43. },
  44. direction: {
  45. type: String,
  46. value: 'down',
  47. observer: 'updateChildrenData',
  48. },
  49. closeOnClickOverlay: {
  50. type: Boolean,
  51. value: true,
  52. observer: 'updateChildrenData',
  53. },
  54. closeOnClickOutside: {
  55. type: Boolean,
  56. value: true,
  57. },
  58. },
  59. data: {
  60. itemListData: [],
  61. },
  62. beforeCreate() {
  63. const { windowHeight } = wx.getSystemInfoSync();
  64. this.windowHeight = windowHeight;
  65. ARRAY.push(this);
  66. },
  67. destroyed() {
  68. ARRAY = ARRAY.filter((item) => item !== this);
  69. },
  70. methods: {
  71. updateItemListData() {
  72. this.setData({
  73. itemListData: this.children.map((child) => child.data),
  74. });
  75. },
  76. updateChildrenData() {
  77. this.children.forEach((child) => {
  78. child.updateDataFromParent();
  79. });
  80. },
  81. toggleItem(active) {
  82. this.children.forEach((item, index) => {
  83. const { showPopup } = item.data;
  84. if (index === active) {
  85. item.toggle();
  86. }
  87. else if (showPopup) {
  88. item.toggle(false, { immediate: true });
  89. }
  90. });
  91. },
  92. close() {
  93. this.children.forEach((child) => {
  94. child.toggle(false, { immediate: true });
  95. });
  96. },
  97. getChildWrapperStyle() {
  98. const { zIndex, direction } = this.data;
  99. return this.getRect('.van-dropdown-menu').then((rect) => {
  100. const { top = 0, bottom = 0 } = rect;
  101. const offset = direction === 'down' ? bottom : this.windowHeight - top;
  102. let wrapperStyle = `z-index: ${zIndex};`;
  103. if (direction === 'down') {
  104. wrapperStyle += `top: ${addUnit(offset)};`;
  105. }
  106. else {
  107. wrapperStyle += `bottom: ${addUnit(offset)};`;
  108. }
  109. return wrapperStyle;
  110. });
  111. },
  112. onTitleTap(event) {
  113. const { index } = event.currentTarget.dataset;
  114. const child = this.children[index];
  115. if (!child.data.disabled) {
  116. ARRAY.forEach((menuItem) => {
  117. if (menuItem &&
  118. menuItem.data.closeOnClickOutside &&
  119. menuItem !== this) {
  120. menuItem.close();
  121. }
  122. });
  123. this.toggleItem(index);
  124. }
  125. },
  126. },
  127. });