index.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. // Utils
  2. import { createNamespace } from '../utils';
  3. import { on, off } from '../utils/dom/event'; // Mixins
  4. import { PortalMixin } from '../mixins/portal';
  5. import { ChildrenMixin } from '../mixins/relation'; // Components
  6. import Cell from '../cell';
  7. import Icon from '../icon';
  8. import Popup from '../popup';
  9. var _createNamespace = createNamespace('dropdown-item'),
  10. createComponent = _createNamespace[0],
  11. bem = _createNamespace[1];
  12. export default createComponent({
  13. mixins: [PortalMixin({
  14. ref: 'wrapper'
  15. }), ChildrenMixin('vanDropdownMenu')],
  16. props: {
  17. value: null,
  18. title: String,
  19. disabled: Boolean,
  20. titleClass: String,
  21. options: {
  22. type: Array,
  23. default: function _default() {
  24. return [];
  25. }
  26. },
  27. lazyRender: {
  28. type: Boolean,
  29. default: true
  30. }
  31. },
  32. data: function data() {
  33. return {
  34. transition: true,
  35. showPopup: false,
  36. showWrapper: false
  37. };
  38. },
  39. computed: {
  40. displayTitle: function displayTitle() {
  41. var _this = this;
  42. if (this.title) {
  43. return this.title;
  44. }
  45. var match = this.options.filter(function (option) {
  46. return option.value === _this.value;
  47. });
  48. return match.length ? match[0].text : '';
  49. }
  50. },
  51. watch: {
  52. showPopup: function showPopup(val) {
  53. this.bindScroll(val);
  54. }
  55. },
  56. beforeCreate: function beforeCreate() {
  57. var _this2 = this;
  58. var createEmitter = function createEmitter(eventName) {
  59. return function () {
  60. return _this2.$emit(eventName);
  61. };
  62. };
  63. this.onOpen = createEmitter('open');
  64. this.onClose = createEmitter('close');
  65. this.onOpened = createEmitter('opened');
  66. },
  67. methods: {
  68. // @exposed-api
  69. toggle: function toggle(show, options) {
  70. if (show === void 0) {
  71. show = !this.showPopup;
  72. }
  73. if (options === void 0) {
  74. options = {};
  75. }
  76. if (show === this.showPopup) {
  77. return;
  78. }
  79. this.transition = !options.immediate;
  80. this.showPopup = show;
  81. if (show) {
  82. this.parent.updateOffset();
  83. this.showWrapper = true;
  84. }
  85. },
  86. bindScroll: function bindScroll(bind) {
  87. var scroller = this.parent.scroller;
  88. var action = bind ? on : off;
  89. action(scroller, 'scroll', this.onScroll, true);
  90. },
  91. onScroll: function onScroll() {
  92. this.parent.updateOffset();
  93. },
  94. onClickWrapper: function onClickWrapper(event) {
  95. // prevent being identified as clicking outside and closed when use get-contaienr
  96. if (this.getContainer) {
  97. event.stopPropagation();
  98. }
  99. }
  100. },
  101. render: function render() {
  102. var _this3 = this;
  103. var h = arguments[0];
  104. var _this$parent = this.parent,
  105. zIndex = _this$parent.zIndex,
  106. offset = _this$parent.offset,
  107. overlay = _this$parent.overlay,
  108. duration = _this$parent.duration,
  109. direction = _this$parent.direction,
  110. activeColor = _this$parent.activeColor,
  111. closeOnClickOverlay = _this$parent.closeOnClickOverlay;
  112. var Options = this.options.map(function (option) {
  113. var active = option.value === _this3.value;
  114. return h(Cell, {
  115. "attrs": {
  116. "clickable": true,
  117. "icon": option.icon,
  118. "title": option.text
  119. },
  120. "key": option.value,
  121. "class": bem('option', {
  122. active: active
  123. }),
  124. "style": {
  125. color: active ? activeColor : ''
  126. },
  127. "on": {
  128. "click": function click() {
  129. _this3.showPopup = false;
  130. if (option.value !== _this3.value) {
  131. _this3.$emit('input', option.value);
  132. _this3.$emit('change', option.value);
  133. }
  134. }
  135. }
  136. }, [active && h(Icon, {
  137. "class": bem('icon'),
  138. "attrs": {
  139. "color": activeColor,
  140. "name": "success"
  141. }
  142. })]);
  143. });
  144. var style = {
  145. zIndex: zIndex
  146. };
  147. if (direction === 'down') {
  148. style.top = offset + "px";
  149. } else {
  150. style.bottom = offset + "px";
  151. }
  152. return h("div", [h("div", {
  153. "directives": [{
  154. name: "show",
  155. value: this.showWrapper
  156. }],
  157. "ref": "wrapper",
  158. "style": style,
  159. "class": bem([direction]),
  160. "on": {
  161. "click": this.onClickWrapper
  162. }
  163. }, [h(Popup, {
  164. "attrs": {
  165. "overlay": overlay,
  166. "position": direction === 'down' ? 'top' : 'bottom',
  167. "duration": this.transition ? duration : 0,
  168. "lazyRender": this.lazyRender,
  169. "overlayStyle": {
  170. position: 'absolute'
  171. },
  172. "closeOnClickOverlay": closeOnClickOverlay
  173. },
  174. "class": bem('content'),
  175. "on": {
  176. "open": this.onOpen,
  177. "close": this.onClose,
  178. "opened": this.onOpened,
  179. "closed": function closed() {
  180. _this3.showWrapper = false;
  181. _this3.$emit('closed');
  182. }
  183. },
  184. "model": {
  185. value: _this3.showPopup,
  186. callback: function callback($$v) {
  187. _this3.showPopup = $$v;
  188. }
  189. }
  190. }, [Options, this.slots('default')])])]);
  191. }
  192. });