popover.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  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__(225);
  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. /***/ 13:
  83. /***/ function(module, exports) {
  84. module.exports = require("element-ui/lib/utils/vue-popper");
  85. /***/ },
  86. /***/ 56:
  87. /***/ function(module, exports) {
  88. module.exports = require("vue");
  89. /***/ },
  90. /***/ 117:
  91. /***/ function(module, exports) {
  92. module.exports = require("element-ui/lib/utils/dom");
  93. /***/ },
  94. /***/ 225:
  95. /***/ function(module, exports, __webpack_require__) {
  96. 'use strict';
  97. exports.__esModule = true;
  98. var _main = __webpack_require__(226);
  99. var _main2 = _interopRequireDefault(_main);
  100. var _directive = __webpack_require__(229);
  101. var _directive2 = _interopRequireDefault(_directive);
  102. var _vue = __webpack_require__(56);
  103. var _vue2 = _interopRequireDefault(_vue);
  104. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  105. _vue2.default.directive('popover', _directive2.default);
  106. /* istanbul ignore next */
  107. _main2.default.install = function (Vue) {
  108. Vue.directive('popover', _directive2.default);
  109. Vue.component(_main2.default.name, _main2.default);
  110. };
  111. _main2.default.directive = _directive2.default;
  112. exports.default = _main2.default;
  113. /***/ },
  114. /***/ 226:
  115. /***/ function(module, exports, __webpack_require__) {
  116. var Component = __webpack_require__(3)(
  117. /* script */
  118. __webpack_require__(227),
  119. /* template */
  120. __webpack_require__(228),
  121. /* scopeId */
  122. null,
  123. /* cssModules */
  124. null
  125. )
  126. module.exports = Component.exports
  127. /***/ },
  128. /***/ 227:
  129. /***/ function(module, exports, __webpack_require__) {
  130. 'use strict';
  131. exports.__esModule = true;
  132. var _vuePopper = __webpack_require__(13);
  133. var _vuePopper2 = _interopRequireDefault(_vuePopper);
  134. var _dom = __webpack_require__(117);
  135. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  136. //
  137. //
  138. //
  139. //
  140. //
  141. //
  142. //
  143. //
  144. //
  145. //
  146. //
  147. //
  148. //
  149. //
  150. //
  151. //
  152. //
  153. exports.default = {
  154. name: 'ElPopover',
  155. mixins: [_vuePopper2.default],
  156. props: {
  157. trigger: {
  158. type: String,
  159. default: 'click',
  160. validator: function validator(value) {
  161. return ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1;
  162. }
  163. },
  164. title: String,
  165. disabled: Boolean,
  166. content: String,
  167. reference: {},
  168. popperClass: String,
  169. width: {},
  170. visibleArrow: {
  171. default: true
  172. },
  173. transition: {
  174. type: String,
  175. default: 'fade-in-linear'
  176. }
  177. },
  178. watch: {
  179. showPopper: function showPopper(newVal, oldVal) {
  180. newVal ? this.$emit('show') : this.$emit('hide');
  181. }
  182. },
  183. mounted: function mounted() {
  184. var reference = this.reference || this.$refs.reference;
  185. var popper = this.popper || this.$refs.popper;
  186. if (!reference && this.$slots.reference && this.$slots.reference[0]) {
  187. reference = this.referenceElm = this.$slots.reference[0].elm;
  188. }
  189. if (this.trigger === 'click') {
  190. (0, _dom.on)(reference, 'click', this.doToggle);
  191. (0, _dom.on)(document, 'click', this.handleDocumentClick);
  192. } else if (this.trigger === 'hover') {
  193. (0, _dom.on)(reference, 'mouseenter', this.handleMouseEnter);
  194. (0, _dom.on)(popper, 'mouseenter', this.handleMouseEnter);
  195. (0, _dom.on)(reference, 'mouseleave', this.handleMouseLeave);
  196. (0, _dom.on)(popper, 'mouseleave', this.handleMouseLeave);
  197. } else if (this.trigger === 'focus') {
  198. var found = false;
  199. if ([].slice.call(reference.children).length) {
  200. var children = reference.childNodes;
  201. var len = children.length;
  202. for (var i = 0; i < len; i++) {
  203. if (children[i].nodeName === 'INPUT' || children[i].nodeName === 'TEXTAREA') {
  204. (0, _dom.on)(children[i], 'focus', this.doShow);
  205. (0, _dom.on)(children[i], 'blur', this.doClose);
  206. found = true;
  207. break;
  208. }
  209. }
  210. }
  211. if (found) return;
  212. if (reference.nodeName === 'INPUT' || reference.nodeName === 'TEXTAREA') {
  213. (0, _dom.on)(reference, 'focus', this.doShow);
  214. (0, _dom.on)(reference, 'blur', this.doClose);
  215. } else {
  216. (0, _dom.on)(reference, 'mousedown', this.doShow);
  217. (0, _dom.on)(reference, 'mouseup', this.doClose);
  218. }
  219. }
  220. },
  221. methods: {
  222. doToggle: function doToggle() {
  223. this.showPopper = !this.showPopper;
  224. },
  225. doShow: function doShow() {
  226. this.showPopper = true;
  227. },
  228. doClose: function doClose() {
  229. this.showPopper = false;
  230. },
  231. handleMouseEnter: function handleMouseEnter() {
  232. this.showPopper = true;
  233. clearTimeout(this._timer);
  234. },
  235. handleMouseLeave: function handleMouseLeave() {
  236. var _this = this;
  237. this._timer = setTimeout(function () {
  238. _this.showPopper = false;
  239. }, 200);
  240. },
  241. handleDocumentClick: function handleDocumentClick(e) {
  242. var reference = this.reference || this.$refs.reference;
  243. var popper = this.popper || this.$refs.popper;
  244. if (!reference && this.$slots.reference && this.$slots.reference[0]) {
  245. reference = this.referenceElm = this.$slots.reference[0].elm;
  246. }
  247. if (!this.$el || !reference || this.$el.contains(e.target) || reference.contains(e.target) || !popper || popper.contains(e.target)) return;
  248. this.showPopper = false;
  249. }
  250. },
  251. destroyed: function destroyed() {
  252. var reference = this.reference;
  253. (0, _dom.off)(reference, 'click', this.doToggle);
  254. (0, _dom.off)(reference, 'mouseup', this.doClose);
  255. (0, _dom.off)(reference, 'mousedown', this.doShow);
  256. (0, _dom.off)(reference, 'focus', this.doShow);
  257. (0, _dom.off)(reference, 'blur', this.doClose);
  258. (0, _dom.off)(reference, 'mouseleave', this.handleMouseLeave);
  259. (0, _dom.off)(reference, 'mouseenter', this.handleMouseEnter);
  260. (0, _dom.off)(document, 'click', this.handleDocumentClick);
  261. }
  262. };
  263. /***/ },
  264. /***/ 228:
  265. /***/ function(module, exports) {
  266. module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
  267. return _c('span', [_c('transition', {
  268. attrs: {
  269. "name": _vm.transition
  270. },
  271. on: {
  272. "after-leave": _vm.doDestroy
  273. }
  274. }, [_c('div', {
  275. directives: [{
  276. name: "show",
  277. rawName: "v-show",
  278. value: (!_vm.disabled && _vm.showPopper),
  279. expression: "!disabled && showPopper"
  280. }],
  281. ref: "popper",
  282. staticClass: "el-popover",
  283. class: [_vm.popperClass],
  284. style: ({
  285. width: _vm.width + 'px'
  286. })
  287. }, [(_vm.title) ? _c('div', {
  288. staticClass: "el-popover__title",
  289. domProps: {
  290. "textContent": _vm._s(_vm.title)
  291. }
  292. }) : _vm._e(), _vm._t("default", [_vm._v(_vm._s(_vm.content))])], 2)]), _vm._t("reference")], 2)
  293. },staticRenderFns: []}
  294. /***/ },
  295. /***/ 229:
  296. /***/ function(module, exports) {
  297. "use strict";
  298. exports.__esModule = true;
  299. exports.default = {
  300. bind: function bind(el, binding, vnode) {
  301. vnode.context.$refs[binding.arg].$refs.reference = el;
  302. }
  303. };
  304. /***/ }
  305. /******/ });