index.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.default = void 0;
  4. var _utils = require("../utils");
  5. var _scroll = require("../utils/dom/scroll");
  6. var _relation = require("../mixins/relation");
  7. var _clickOutside = require("../mixins/click-outside");
  8. // Utils
  9. // Mixins
  10. var _createNamespace = (0, _utils.createNamespace)('dropdown-menu'),
  11. createComponent = _createNamespace[0],
  12. bem = _createNamespace[1];
  13. var _default = createComponent({
  14. mixins: [(0, _relation.ParentMixin)('vanDropdownMenu'), (0, _clickOutside.ClickOutsideMixin)({
  15. event: 'click',
  16. method: 'onClickOutside'
  17. })],
  18. props: {
  19. zIndex: [Number, String],
  20. activeColor: String,
  21. overlay: {
  22. type: Boolean,
  23. default: true
  24. },
  25. duration: {
  26. type: [Number, String],
  27. default: 0.2
  28. },
  29. direction: {
  30. type: String,
  31. default: 'down'
  32. },
  33. closeOnClickOverlay: {
  34. type: Boolean,
  35. default: true
  36. }
  37. },
  38. data: function data() {
  39. return {
  40. offset: 0
  41. };
  42. },
  43. computed: {
  44. scroller: function scroller() {
  45. return (0, _scroll.getScroller)(this.$el);
  46. },
  47. opened: function opened() {
  48. return this.children.some(function (item) {
  49. return item.showWrapper;
  50. });
  51. },
  52. barStyle: function barStyle() {
  53. if (this.opened && (0, _utils.isDef)(this.zIndex)) {
  54. return {
  55. zIndex: 1 + this.zIndex
  56. };
  57. }
  58. }
  59. },
  60. methods: {
  61. updateOffset: function updateOffset() {
  62. if (!this.$refs.bar) {
  63. return;
  64. }
  65. var rect = this.$refs.bar.getBoundingClientRect();
  66. if (this.direction === 'down') {
  67. this.offset = rect.bottom;
  68. } else {
  69. this.offset = window.innerHeight - rect.top;
  70. }
  71. },
  72. toggleItem: function toggleItem(active) {
  73. this.children.forEach(function (item, index) {
  74. if (index === active) {
  75. item.toggle();
  76. } else if (item.showPopup) {
  77. item.toggle(false, {
  78. immediate: true
  79. });
  80. }
  81. });
  82. },
  83. onClickOutside: function onClickOutside() {
  84. this.children.forEach(function (item) {
  85. item.toggle(false);
  86. });
  87. }
  88. },
  89. render: function render() {
  90. var _this = this;
  91. var h = arguments[0];
  92. var Titles = this.children.map(function (item, index) {
  93. return h("div", {
  94. "attrs": {
  95. "role": "button",
  96. "tabindex": item.disabled ? -1 : 0
  97. },
  98. "class": bem('item', {
  99. disabled: item.disabled
  100. }),
  101. "on": {
  102. "click": function click() {
  103. if (!item.disabled) {
  104. _this.toggleItem(index);
  105. }
  106. }
  107. }
  108. }, [h("span", {
  109. "class": [bem('title', {
  110. active: item.showPopup,
  111. down: item.showPopup === (_this.direction === 'down')
  112. }), item.titleClass],
  113. "style": {
  114. color: item.showPopup ? _this.activeColor : ''
  115. }
  116. }, [h("div", {
  117. "class": "van-ellipsis"
  118. }, [item.slots('title') || item.displayTitle])])]);
  119. });
  120. return h("div", {
  121. "class": bem()
  122. }, [h("div", {
  123. "ref": "bar",
  124. "style": this.barStyle,
  125. "class": bem('bar', {
  126. opened: this.opened
  127. })
  128. }, [Titles]), this.slots('default')]);
  129. }
  130. });
  131. exports.default = _default;