index.js 3.4KB

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