index.js 2.3 KB

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