dropdown.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. module.exports =
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/ // The module cache
  4. /******/ var installedModules = {};
  5. /******/ // The require function
  6. /******/ function __webpack_require__(moduleId) {
  7. /******/ // Check if module is in cache
  8. /******/ if(installedModules[moduleId])
  9. /******/ return installedModules[moduleId].exports;
  10. /******/ // Create a new module (and put it into the cache)
  11. /******/ var module = installedModules[moduleId] = {
  12. /******/ exports: {},
  13. /******/ id: moduleId,
  14. /******/ loaded: false
  15. /******/ };
  16. /******/ // Execute the module function
  17. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  18. /******/ // Flag the module as loaded
  19. /******/ module.loaded = true;
  20. /******/ // Return the exports of the module
  21. /******/ return module.exports;
  22. /******/ }
  23. /******/ // expose the modules object (__webpack_modules__)
  24. /******/ __webpack_require__.m = modules;
  25. /******/ // expose the module cache
  26. /******/ __webpack_require__.c = installedModules;
  27. /******/ // __webpack_public_path__
  28. /******/ __webpack_require__.p = "/dist/";
  29. /******/ // Load entry module and return exports
  30. /******/ return __webpack_require__(0);
  31. /******/ })
  32. /************************************************************************/
  33. /******/ ({
  34. /***/ 0:
  35. /***/ function(module, exports, __webpack_require__) {
  36. module.exports = __webpack_require__(134);
  37. /***/ },
  38. /***/ 3:
  39. /***/ function(module, exports) {
  40. module.exports = function normalizeComponent (
  41. rawScriptExports,
  42. compiledTemplate,
  43. scopeId,
  44. cssModules
  45. ) {
  46. var esModule
  47. var scriptExports = rawScriptExports = rawScriptExports || {}
  48. // ES6 modules interop
  49. var type = typeof rawScriptExports.default
  50. if (type === 'object' || type === 'function') {
  51. esModule = rawScriptExports
  52. scriptExports = rawScriptExports.default
  53. }
  54. // Vue.extend constructor export interop
  55. var options = typeof scriptExports === 'function'
  56. ? scriptExports.options
  57. : scriptExports
  58. // render functions
  59. if (compiledTemplate) {
  60. options.render = compiledTemplate.render
  61. options.staticRenderFns = compiledTemplate.staticRenderFns
  62. }
  63. // scopedId
  64. if (scopeId) {
  65. options._scopeId = scopeId
  66. }
  67. // inject cssModules
  68. if (cssModules) {
  69. var computed = options.computed || (options.computed = {})
  70. Object.keys(cssModules).forEach(function (key) {
  71. var module = cssModules[key]
  72. computed[key] = function () { return module }
  73. })
  74. }
  75. return {
  76. esModule: esModule,
  77. exports: scriptExports,
  78. options: options
  79. }
  80. }
  81. /***/ },
  82. /***/ 10:
  83. /***/ function(module, exports) {
  84. module.exports = require("element-ui/lib/utils/clickoutside");
  85. /***/ },
  86. /***/ 14:
  87. /***/ function(module, exports) {
  88. module.exports = require("element-ui/lib/mixins/emitter");
  89. /***/ },
  90. /***/ 134:
  91. /***/ function(module, exports, __webpack_require__) {
  92. 'use strict';
  93. exports.__esModule = true;
  94. var _dropdown = __webpack_require__(135);
  95. var _dropdown2 = _interopRequireDefault(_dropdown);
  96. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  97. /* istanbul ignore next */
  98. _dropdown2.default.install = function (Vue) {
  99. Vue.component(_dropdown2.default.name, _dropdown2.default);
  100. };
  101. exports.default = _dropdown2.default;
  102. /***/ },
  103. /***/ 135:
  104. /***/ function(module, exports, __webpack_require__) {
  105. var Component = __webpack_require__(3)(
  106. /* script */
  107. __webpack_require__(136),
  108. /* template */
  109. null,
  110. /* scopeId */
  111. null,
  112. /* cssModules */
  113. null
  114. )
  115. module.exports = Component.exports
  116. /***/ },
  117. /***/ 136:
  118. /***/ function(module, exports, __webpack_require__) {
  119. 'use strict';
  120. exports.__esModule = true;
  121. var _clickoutside = __webpack_require__(10);
  122. var _clickoutside2 = _interopRequireDefault(_clickoutside);
  123. var _emitter = __webpack_require__(14);
  124. var _emitter2 = _interopRequireDefault(_emitter);
  125. var _button = __webpack_require__(137);
  126. var _button2 = _interopRequireDefault(_button);
  127. var _buttonGroup = __webpack_require__(138);
  128. var _buttonGroup2 = _interopRequireDefault(_buttonGroup);
  129. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  130. exports.default = {
  131. name: 'ElDropdown',
  132. componentName: 'ElDropdown',
  133. mixins: [_emitter2.default],
  134. directives: { Clickoutside: _clickoutside2.default },
  135. components: {
  136. ElButton: _button2.default,
  137. ElButtonGroup: _buttonGroup2.default
  138. },
  139. props: {
  140. trigger: {
  141. type: String,
  142. default: 'hover'
  143. },
  144. menuAlign: {
  145. type: String,
  146. default: 'end'
  147. },
  148. type: String,
  149. size: String,
  150. splitButton: Boolean,
  151. hideOnClick: {
  152. type: Boolean,
  153. default: true
  154. }
  155. },
  156. data: function data() {
  157. return {
  158. timeout: null,
  159. visible: false
  160. };
  161. },
  162. mounted: function mounted() {
  163. this.$on('menu-item-click', this.handleMenuItemClick);
  164. this.initEvent();
  165. },
  166. watch: {
  167. visible: function visible(val) {
  168. this.broadcast('ElDropdownMenu', 'visible', val);
  169. }
  170. },
  171. methods: {
  172. show: function show() {
  173. var _this = this;
  174. clearTimeout(this.timeout);
  175. this.timeout = setTimeout(function () {
  176. _this.visible = true;
  177. }, 250);
  178. },
  179. hide: function hide() {
  180. var _this2 = this;
  181. clearTimeout(this.timeout);
  182. this.timeout = setTimeout(function () {
  183. _this2.visible = false;
  184. }, 150);
  185. },
  186. handleClick: function handleClick() {
  187. this.visible = !this.visible;
  188. },
  189. initEvent: function initEvent() {
  190. var trigger = this.trigger,
  191. show = this.show,
  192. hide = this.hide,
  193. handleClick = this.handleClick,
  194. splitButton = this.splitButton;
  195. var triggerElm = splitButton ? this.$refs.trigger.$el : this.$slots.default[0].elm;
  196. if (trigger === 'hover') {
  197. triggerElm.addEventListener('mouseenter', show);
  198. triggerElm.addEventListener('mouseleave', hide);
  199. var dropdownElm = this.$slots.dropdown[0].elm;
  200. dropdownElm.addEventListener('mouseenter', show);
  201. dropdownElm.addEventListener('mouseleave', hide);
  202. } else if (trigger === 'click') {
  203. triggerElm.addEventListener('click', handleClick);
  204. }
  205. },
  206. handleMenuItemClick: function handleMenuItemClick(command, instance) {
  207. if (this.hideOnClick) {
  208. this.visible = false;
  209. }
  210. this.$emit('command', command, instance);
  211. }
  212. },
  213. render: function render(h) {
  214. var _this3 = this;
  215. var hide = this.hide,
  216. splitButton = this.splitButton,
  217. type = this.type,
  218. size = this.size;
  219. var handleClick = function handleClick(_) {
  220. _this3.$emit('click');
  221. };
  222. var triggerElm = !splitButton ? this.$slots.default : h(
  223. 'el-button-group',
  224. null,
  225. [h(
  226. 'el-button',
  227. {
  228. attrs: { type: type, size: size },
  229. nativeOn: {
  230. 'click': handleClick
  231. }
  232. },
  233. [this.$slots.default]
  234. ), h(
  235. 'el-button',
  236. { ref: 'trigger', attrs: { type: type, size: size },
  237. 'class': 'el-dropdown__caret-button' },
  238. [h(
  239. 'i',
  240. { 'class': 'el-dropdown__icon el-icon-caret-bottom' },
  241. []
  242. )]
  243. )]
  244. );
  245. return h(
  246. 'div',
  247. { 'class': 'el-dropdown', directives: [{
  248. name: 'clickoutside',
  249. value: hide
  250. }]
  251. },
  252. [triggerElm, this.$slots.dropdown]
  253. );
  254. }
  255. };
  256. /***/ },
  257. /***/ 137:
  258. /***/ function(module, exports) {
  259. module.exports = require("element-ui/lib/button");
  260. /***/ },
  261. /***/ 138:
  262. /***/ function(module, exports) {
  263. module.exports = require("element-ui/lib/button-group");
  264. /***/ }
  265. /******/ });