index.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { createPopper as _createPopper, offsetModifier } from '@vant/popperjs';
  3. import { createNamespace } from '../utils';
  4. import { BORDER_BOTTOM } from '../utils/constant'; // Mixins
  5. import { ClickOutsideMixin } from '../mixins/click-outside'; // Components
  6. import Icon from '../icon';
  7. import Popup from '../popup';
  8. var _createNamespace = createNamespace('popover'),
  9. createComponent = _createNamespace[0],
  10. bem = _createNamespace[1];
  11. export default createComponent({
  12. mixins: [ClickOutsideMixin({
  13. event: 'touchstart',
  14. method: 'onClickOutside'
  15. })],
  16. props: {
  17. value: Boolean,
  18. trigger: String,
  19. overlay: Boolean,
  20. offset: {
  21. type: Array,
  22. default: function _default() {
  23. return [0, 8];
  24. }
  25. },
  26. theme: {
  27. type: String,
  28. default: 'light'
  29. },
  30. actions: {
  31. type: Array,
  32. default: function _default() {
  33. return [];
  34. }
  35. },
  36. placement: {
  37. type: String,
  38. default: 'bottom'
  39. },
  40. getContainer: {
  41. type: [String, Function],
  42. default: 'body'
  43. },
  44. closeOnClickAction: {
  45. type: Boolean,
  46. default: true
  47. }
  48. },
  49. watch: {
  50. value: 'updateLocation',
  51. placement: 'updateLocation'
  52. },
  53. mounted: function mounted() {
  54. this.updateLocation();
  55. },
  56. beforeDestroy: function beforeDestroy() {
  57. if (this.popper) {
  58. this.popper.destroy();
  59. this.popper = null;
  60. }
  61. },
  62. methods: {
  63. createPopper: function createPopper() {
  64. return _createPopper(this.$refs.wrapper, this.$refs.popover.$el, {
  65. placement: this.placement,
  66. modifiers: [{
  67. name: 'computeStyles',
  68. options: {
  69. adaptive: false,
  70. gpuAcceleration: false
  71. }
  72. }, _extends({}, offsetModifier, {
  73. options: {
  74. offset: this.offset
  75. }
  76. })]
  77. });
  78. },
  79. updateLocation: function updateLocation() {
  80. var _this = this;
  81. this.$nextTick(function () {
  82. if (!_this.value) {
  83. return;
  84. }
  85. if (!_this.popper) {
  86. _this.popper = _this.createPopper();
  87. } else {
  88. _this.popper.setOptions({
  89. placement: _this.placement
  90. });
  91. }
  92. });
  93. },
  94. renderAction: function renderAction(action, index) {
  95. var _this2 = this;
  96. var h = this.$createElement;
  97. var icon = action.icon,
  98. text = action.text,
  99. disabled = action.disabled,
  100. className = action.className;
  101. return h("div", {
  102. "attrs": {
  103. "role": "menuitem"
  104. },
  105. "class": [bem('action', {
  106. disabled: disabled,
  107. 'with-icon': icon
  108. }), className],
  109. "on": {
  110. "click": function click() {
  111. return _this2.onClickAction(action, index);
  112. }
  113. }
  114. }, [icon && h(Icon, {
  115. "attrs": {
  116. "name": icon
  117. },
  118. "class": bem('action-icon')
  119. }), h("div", {
  120. "class": [bem('action-text'), BORDER_BOTTOM]
  121. }, [text])]);
  122. },
  123. onToggle: function onToggle(value) {
  124. this.$emit('input', value);
  125. },
  126. onClickWrapper: function onClickWrapper() {
  127. if (this.trigger === 'click') {
  128. this.onToggle(!this.value);
  129. }
  130. },
  131. onTouchstart: function onTouchstart(event) {
  132. event.stopPropagation();
  133. this.$emit('touchstart', event);
  134. },
  135. onClickAction: function onClickAction(action, index) {
  136. if (action.disabled) {
  137. return;
  138. }
  139. this.$emit('select', action, index);
  140. if (this.closeOnClickAction) {
  141. this.$emit('input', false);
  142. }
  143. },
  144. onClickOutside: function onClickOutside() {
  145. this.$emit('input', false);
  146. },
  147. onOpen: function onOpen() {
  148. this.$emit('open');
  149. },
  150. /* istanbul ignore next */
  151. onOpened: function onOpened() {
  152. this.$emit('opened');
  153. },
  154. onClose: function onClose() {
  155. this.$emit('close');
  156. },
  157. /* istanbul ignore next */
  158. onClosed: function onClosed() {
  159. this.$emit('closed');
  160. }
  161. },
  162. render: function render() {
  163. var h = arguments[0];
  164. return h("span", {
  165. "ref": "wrapper",
  166. "class": bem('wrapper'),
  167. "on": {
  168. "click": this.onClickWrapper
  169. }
  170. }, [h(Popup, {
  171. "ref": "popover",
  172. "attrs": {
  173. "value": this.value,
  174. "overlay": this.overlay,
  175. "position": null,
  176. "transition": "van-popover-zoom",
  177. "lockScroll": false,
  178. "getContainer": this.getContainer
  179. },
  180. "class": bem([this.theme]),
  181. "on": {
  182. "open": this.onOpen,
  183. "close": this.onClose,
  184. "input": this.onToggle,
  185. "opened": this.onOpened,
  186. "closed": this.onClosed
  187. },
  188. "nativeOn": {
  189. "touchstart": this.onTouchstart
  190. }
  191. }, [h("div", {
  192. "class": bem('arrow')
  193. }), h("div", {
  194. "class": bem('content'),
  195. "attrs": {
  196. "role": "menu"
  197. }
  198. }, [this.slots('default') || this.actions.map(this.renderAction)])]), this.slots('reference')]);
  199. }
  200. });