index.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  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 { overlay, duration, activeColor, closeOnClickOverlay, direction } = this.parent.data;
  48. this.setData({
  49. overlay,
  50. duration,
  51. activeColor,
  52. closeOnClickOverlay,
  53. direction
  54. });
  55. }
  56. },
  57. onOpen() {
  58. this.$emit('open');
  59. },
  60. onOpened() {
  61. this.$emit('opened');
  62. },
  63. onClose() {
  64. this.$emit('close');
  65. },
  66. onClosed() {
  67. this.$emit('closed');
  68. this.setData({ showWrapper: false });
  69. },
  70. onOptionTap(event) {
  71. const { option } = event.currentTarget.dataset;
  72. const { value } = option;
  73. const shouldEmitChange = this.data.value !== value;
  74. this.setData({ showPopup: false, value });
  75. this.$emit('close');
  76. this.rerender();
  77. if (shouldEmitChange) {
  78. this.$emit('change', value);
  79. }
  80. },
  81. toggle(show, options = {}) {
  82. const { showPopup } = this.data;
  83. if (typeof show !== 'boolean') {
  84. show = !showPopup;
  85. }
  86. if (show === showPopup) {
  87. return;
  88. }
  89. this.setData({
  90. transition: !options.immediate,
  91. showPopup: show,
  92. });
  93. if (show) {
  94. this.parent.getChildWrapperStyle().then((wrapperStyle) => {
  95. this.setData({ wrapperStyle, showWrapper: true });
  96. this.rerender();
  97. });
  98. }
  99. else {
  100. this.rerender();
  101. }
  102. }
  103. }
  104. });