index.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import { useParent } from '../common/relation';
  2. import { VantComponent } from '../common/component';
  3. VantComponent({
  4. classes: ['item-title-class'],
  5. field: true,
  6. relation: useParent('dropdown-menu', function () {
  7. this.updateDataFromParent();
  8. }),
  9. props: {
  10. value: {
  11. type: null,
  12. observer: 'rerender',
  13. },
  14. title: {
  15. type: String,
  16. observer: 'rerender',
  17. },
  18. disabled: Boolean,
  19. titleClass: {
  20. type: String,
  21. observer: 'rerender',
  22. },
  23. options: {
  24. type: Array,
  25. value: [],
  26. observer: 'rerender',
  27. },
  28. popupStyle: String,
  29. useBeforeToggle: {
  30. type: Boolean,
  31. value: false,
  32. },
  33. rootPortal: {
  34. type: Boolean,
  35. value: false,
  36. },
  37. },
  38. data: {
  39. transition: true,
  40. showPopup: false,
  41. showWrapper: false,
  42. displayTitle: '',
  43. safeAreaTabBar: false,
  44. },
  45. methods: {
  46. rerender() {
  47. wx.nextTick(() => {
  48. var _a;
  49. (_a = this.parent) === null || _a === void 0 ? void 0 : _a.updateItemListData();
  50. });
  51. },
  52. updateDataFromParent() {
  53. if (this.parent) {
  54. const { overlay, duration, activeColor, closeOnClickOverlay, direction, safeAreaTabBar, } = this.parent.data;
  55. this.setData({
  56. overlay,
  57. duration,
  58. activeColor,
  59. closeOnClickOverlay,
  60. direction,
  61. safeAreaTabBar,
  62. });
  63. }
  64. },
  65. onOpen() {
  66. this.$emit('open');
  67. },
  68. onOpened() {
  69. this.$emit('opened');
  70. },
  71. onClose() {
  72. this.$emit('close');
  73. },
  74. onClosed() {
  75. this.$emit('closed');
  76. this.setData({ showWrapper: false });
  77. },
  78. onOptionTap(event) {
  79. const { option } = event.currentTarget.dataset;
  80. const { value } = option;
  81. const shouldEmitChange = this.data.value !== value;
  82. this.setData({ showPopup: false, value });
  83. this.$emit('close');
  84. this.rerender();
  85. if (shouldEmitChange) {
  86. this.$emit('change', value);
  87. }
  88. },
  89. toggle(show, options = {}) {
  90. const { showPopup } = this.data;
  91. if (typeof show !== 'boolean') {
  92. show = !showPopup;
  93. }
  94. if (show === showPopup) {
  95. return;
  96. }
  97. this.onBeforeToggle(show).then((status) => {
  98. var _a;
  99. if (!status) {
  100. return;
  101. }
  102. this.setData({
  103. transition: !options.immediate,
  104. showPopup: show,
  105. });
  106. if (show) {
  107. (_a = this.parent) === null || _a === void 0 ? void 0 : _a.getChildWrapperStyle().then((wrapperStyle) => {
  108. this.setData({ wrapperStyle, showWrapper: true });
  109. this.rerender();
  110. });
  111. }
  112. else {
  113. this.rerender();
  114. }
  115. });
  116. },
  117. onBeforeToggle(status) {
  118. const { useBeforeToggle } = this.data;
  119. if (!useBeforeToggle) {
  120. return Promise.resolve(true);
  121. }
  122. return new Promise((resolve) => {
  123. this.$emit('before-toggle', {
  124. status,
  125. callback: (value) => resolve(value),
  126. });
  127. });
  128. },
  129. },
  130. });