index.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  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 {
  55. overlay,
  56. duration,
  57. activeColor,
  58. closeOnClickOverlay,
  59. direction,
  60. safeAreaTabBar,
  61. } = this.parent.data;
  62. this.setData({
  63. overlay,
  64. duration,
  65. activeColor,
  66. closeOnClickOverlay,
  67. direction,
  68. safeAreaTabBar,
  69. });
  70. }
  71. },
  72. onOpen() {
  73. this.$emit('open');
  74. },
  75. onOpened() {
  76. this.$emit('opened');
  77. },
  78. onClose() {
  79. this.$emit('close');
  80. },
  81. onClosed() {
  82. this.$emit('closed');
  83. this.setData({showWrapper: false});
  84. },
  85. onOptionTap(event) {
  86. const {option} = event.currentTarget.dataset;
  87. const {value} = option;
  88. const shouldEmitChange = this.data.value !== value;
  89. this.setData({showPopup: false, value});
  90. this.$emit('close');
  91. this.rerender();
  92. if (shouldEmitChange) {
  93. this.$emit('change', value);
  94. }
  95. },
  96. toggle(show, options = {}) {
  97. const {showPopup} = this.data;
  98. if (typeof show !== 'boolean') {
  99. show = !showPopup;
  100. }
  101. if (show === showPopup) {
  102. return;
  103. }
  104. this.onBeforeToggle(show).then((status) => {
  105. var _a;
  106. if (!status) {
  107. return;
  108. }
  109. this.setData({
  110. transition: !options.immediate,
  111. showPopup: show,
  112. });
  113. if (show) {
  114. (_a = this.parent) === null || _a === void 0 ? void 0 : _a.getChildWrapperStyle().then((wrapperStyle) => {
  115. this.setData({wrapperStyle, showWrapper: true});
  116. this.rerender();
  117. });
  118. } else {
  119. this.rerender();
  120. }
  121. });
  122. },
  123. onBeforeToggle(status) {
  124. const {useBeforeToggle} = this.data;
  125. if (!useBeforeToggle) {
  126. return Promise.resolve(true);
  127. }
  128. return new Promise((resolve) => {
  129. this.$emit('before-toggle', {
  130. status,
  131. callback: (value) => resolve(value),
  132. });
  133. });
  134. },
  135. },
  136. });