index.js 3.4 KB

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