index.js 3.1 KB

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