index.js 2.8 KB

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