Commit ff56db901746cb29463cef91240493b445849696
1 parent
6fcf6aec
优化
Showing
5 changed files
with
98 additions
and
13 deletions
Show diff stats
build/Popover/Popover.html
| 1 | -<div ng-style="{display:'inline-block'}" ng-click="handleClick()" ng-transclude></div> | ||
| 2 | \ No newline at end of file | 1 | \ No newline at end of file |
| 2 | +<div ng-style="{display:'inline-block'}" ng-click="handleClick()" ng-mouseenter="onMouseEnter()" ng-mouseleave="onMouseLeave()" ng-transclude></div> | ||
| 3 | \ No newline at end of file | 3 | \ No newline at end of file |
build/Popover/Popover.js
| @@ -2,7 +2,7 @@ import template from "./Popover.html"; | @@ -2,7 +2,7 @@ import template from "./Popover.html"; | ||
| 2 | import style from "antd/lib/popover/style/index.css"; | 2 | import style from "antd/lib/popover/style/index.css"; |
| 3 | angular | 3 | angular |
| 4 | .module("esNgAntd") | 4 | .module("esNgAntd") |
| 5 | - .directive("esPopover", function ($compile, esNgAntd) { | 5 | + .directive("esPopover", function ($compile, $timeout, esNgAntd) { |
| 6 | return { | 6 | return { |
| 7 | controllerAs: "esPopover", | 7 | controllerAs: "esPopover", |
| 8 | restrict: "E", | 8 | restrict: "E", |
| @@ -14,6 +14,7 @@ angular | @@ -14,6 +14,7 @@ angular | ||
| 14 | context: "=", | 14 | context: "=", |
| 15 | placement: "@", | 15 | placement: "@", |
| 16 | getPopupContainer: "&", | 16 | getPopupContainer: "&", |
| 17 | + trigger: "@", | ||
| 17 | }, | 18 | }, |
| 18 | template: template, | 19 | template: template, |
| 19 | controller: function ($scope, $element, $attrs) { | 20 | controller: function ($scope, $element, $attrs) { |
| @@ -25,6 +26,8 @@ angular | @@ -25,6 +26,8 @@ angular | ||
| 25 | visible: false, | 26 | visible: false, |
| 26 | content: $scope.content ? $scope.content : "", | 27 | content: $scope.content ? $scope.content : "", |
| 27 | clickTarget: null, | 28 | clickTarget: null, |
| 29 | + trigger: $scope.trigger || "hover", | ||
| 30 | + closing: false, | ||
| 28 | }; | 31 | }; |
| 29 | 32 | ||
| 30 | $scope.myEvent = function () { | 33 | $scope.myEvent = function () { |
| @@ -39,6 +42,10 @@ angular | @@ -39,6 +42,10 @@ angular | ||
| 39 | }; | 42 | }; |
| 40 | 43 | ||
| 41 | $scope.handleClick = function () { | 44 | $scope.handleClick = function () { |
| 45 | + if ($scope.state.trigger !== "click") { | ||
| 46 | + return; | ||
| 47 | + } | ||
| 48 | + | ||
| 42 | if ($scope.state.visible === false) { | 49 | if ($scope.state.visible === false) { |
| 43 | // 气泡层（显示） | 50 | // 气泡层（显示） |
| 44 | $scope.state.visible = true; // 处理位置 | 51 | $scope.state.visible = true; // 处理位置 |
| @@ -58,6 +65,44 @@ angular | @@ -58,6 +65,44 @@ angular | ||
| 58 | } | 65 | } |
| 59 | }; | 66 | }; |
| 60 | 67 | ||
| 68 | + $scope.showPopover = function () { | ||
| 69 | + // 气泡层（显示） | ||
| 70 | + $scope.state.visible = true; // 调整位置 | ||
| 71 | + | ||
| 72 | + $scope.handlePosition(); | ||
| 73 | + }; | ||
| 74 | + | ||
| 75 | + $scope.hidePopover = function () { | ||
| 76 | + $scope.state.closing = true; | ||
| 77 | + $timeout(function () { | ||
| 78 | + if ($scope.state.closing === false) { | ||
| 79 | + return; | ||
| 80 | + } | ||
| 81 | + | ||
| 82 | + $scope.state.visible = false; | ||
| 83 | + }, 100); | ||
| 84 | + }; | ||
| 85 | + | ||
| 86 | + $scope.onMouseEnter = function () { | ||
| 87 | + if ($scope.state.trigger !== "hover") { | ||
| 88 | + return; | ||
| 89 | + } | ||
| 90 | + | ||
| 91 | + if ($scope.state.closing === true) { | ||
| 92 | + $scope.state.closing = false; | ||
| 93 | + } | ||
| 94 | + | ||
| 95 | + $scope.showPopover(); | ||
| 96 | + }; | ||
| 97 | + | ||
| 98 | + $scope.onMouseLeave = function () { | ||
| 99 | + if ($scope.state.trigger !== "hover") { | ||
| 100 | + return; | ||
| 101 | + } | ||
| 102 | + | ||
| 103 | + $scope.hidePopover(); | ||
| 104 | + }; | ||
| 105 | + | ||
| 61 | $scope.handlePosition = function () { | 106 | $scope.handlePosition = function () { |
| 62 | setTimeout(function () { | 107 | setTimeout(function () { |
| 63 | let popover = | 108 | let popover = |
| @@ -128,7 +173,7 @@ angular | @@ -128,7 +173,7 @@ angular | ||
| 128 | ? `<div class="ant-popover-title"><span>${$scope.title}</span></div>` | 173 | ? `<div class="ant-popover-title"><span>${$scope.title}</span></div>` |
| 129 | : ""; | 174 | : ""; |
| 130 | let content = `<div> | 175 | let content = `<div> |
| 131 | - <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${$scope.placement}'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')"> | 176 | + <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${$scope.placement}'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')" ng-mouseleave="onMouseLeave()" ng-mouseenter="onMouseEnter()"> |
| 132 | <div class="ant-popover-content"> | 177 | <div class="ant-popover-content"> |
| 133 | <div class="ant-popover-arrow"> | 178 | <div class="ant-popover-arrow"> |
| 134 | <span class="ant-popover-arrow-content"></span> | 179 | <span class="ant-popover-arrow-content"></span> |
dist/ng-antd.js
| @@ -291,7 +291,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Pag | @@ -291,7 +291,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Pag | ||
| 291 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 291 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 292 | 292 | ||
| 293 | "use strict"; | 293 | "use strict"; |
| 294 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Popover_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Popover.html */ \"./build/Popover/Popover.html\");\n/* harmony import */ var antd_lib_popover_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/popover/style/index.css */ \"./node_modules/antd/lib/popover/style/index.css\");\n\n\nangular\n .module(\"esNgAntd\")\n .directive(\"esPopover\", function ($compile, esNgAntd) {\n return {\n controllerAs: \"esPopover\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n title: \"@\",\n content: \"@\",\n context: \"=\",\n placement: \"@\",\n getPopupContainer: \"&\",\n },\n template: _Popover_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n visible: false,\n content: $scope.content ? $scope.content : \"\",\n clickTarget: null,\n };\n\n $scope.myEvent = function () {\n setTimeout(() => {\n $scope.state.visible = false;\n $scope.$apply();\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n };\n\n $scope.handleClick = function () {\n if ($scope.state.visible === false) {\n // 气泡层（显示）\n $scope.state.visible = true; // 处理位置\n\n $scope.handlePosition(); // 事件绑定\n\n document.body.addEventListener(\"click\", $scope.myEvent);\n } else {\n setTimeout(() => {\n $scope.state.visible = false;\n $scope.$apply();\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n }\n };\n\n $scope.handlePosition = function () {\n setTimeout(function () {\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n\n if ($scope.placement === \"top\") {\n popover.style[\"top\"] = $scope.getTop();\n } else if ($scope.placement === \"bottom\") {\n popover.style[\"top\"] = $scope.getTop();\n }\n\n popover.style.left = $scope.getLeft() + \"px\";\n }, 0);\n };\n\n $scope.getLeft = function () {\n let parent = $scope.getPopupContainer();\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n let target = $scope.state.target;\n\n if (parent) {\n return -(\n popover.clientWidth / 2 -\n target.clientWidth / 2\n );\n } else {\n let offset = esNgAntd.getOffset(target);\n return (\n offset.left -\n (popover.clientWidth / 2 - target.clientWidth / 2)\n );\n }\n };\n\n $scope.getTop = function () {\n let parent = $scope.getPopupContainer();\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n let target = $scope.state.target;\n\n if (parent) {\n if ($scope.placement === \"top\") {\n return -popover.clientHeight + \"px\";\n } else if ($scope.placement === \"bottom\") {\n }\n } else {\n let offset = esNgAntd.getOffset(target);\n\n if ($scope.placement === \"top\") {\n return offset.top - popover.clientHeight - 4 + \"px\";\n } else if ($scope.placement === \"bottom\") {\n return offset.top + target.clientHeight + 4 + \"px\";\n }\n }\n };\n },\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n esNgAntd.createStyle(\"ant-popover\", antd_lib_popover_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n $scope.state.target = $element[0];\n let title = $scope.title\n ? `<div class=\"ant-popover-title\"><span>${$scope.title}</span></div>`\n : \"\";\n let content = `<div>\n <div style=\"outline:none\" ng-class=\"'ant-popover ant-popover-placement-${$scope.placement}'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')\">\n <div class=\"ant-popover-content\">\n <div class=\"ant-popover-arrow\">\n <span class=\"ant-popover-arrow-content\"></span>\n </div>\n <div class=\"ant-popover-inner\">\n <div>\n ${title}\n <div class=\"ant-popover-inner-content\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>`;\n let div = document.createElement(\"div\");\n\n if (typeof $scope.getPopupContainer() === \"function\") {\n $scope.state.popupContainer = $scope.getPopupContainer()();\n }\n\n if (!$scope.state.popupContainer) {\n div.style.position = \"absolute\";\n div.style.top = \"0px\";\n div.style.left = \"0px\";\n div.style.width = \"100%\";\n div.innerHTML = content;\n document.body.appendChild(div);\n } else {\n $scope.state.popupContainer.appendChild(div);\n }\n\n div.addEventListener(\"click\", function (event) {\n event.stopPropagation();\n });\n $scope.state.target.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n });\n $compile(div)($scope);\n div.querySelector(\".ant-popover-inner-content\").innerHTML =\n $scope.state.content;\n $compile(div.querySelector(\".ant-popover-inner-content\"))(\n $scope.$parent\n );\n $scope.state.popover = div;\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Popover/Popover.js?"); | 294 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Popover_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Popover.html */ \"./build/Popover/Popover.html\");\n/* harmony import */ var antd_lib_popover_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/popover/style/index.css */ \"./node_modules/antd/lib/popover/style/index.css\");\n\n\nangular\n .module(\"esNgAntd\")\n .directive(\"esPopover\", function ($compile, $timeout, esNgAntd) {\n return {\n controllerAs: \"esPopover\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n title: \"@\",\n content: \"@\",\n context: \"=\",\n placement: \"@\",\n getPopupContainer: \"&\",\n trigger: \"@\",\n },\n template: _Popover_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n visible: false,\n content: $scope.content ? $scope.content : \"\",\n clickTarget: null,\n trigger: $scope.trigger || \"hover\",\n closing: false,\n };\n\n $scope.myEvent = function () {\n setTimeout(() => {\n $scope.state.visible = false;\n $scope.$apply();\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n };\n\n $scope.handleClick = function () {\n if ($scope.state.trigger !== \"click\") {\n return;\n }\n\n if ($scope.state.visible === false) {\n // 气泡层（显示）\n $scope.state.visible = true; // 处理位置\n\n $scope.handlePosition(); // 事件绑定\n\n document.body.addEventListener(\"click\", $scope.myEvent);\n } else {\n setTimeout(() => {\n $scope.state.visible = false;\n $scope.$apply();\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n }\n };\n\n $scope.showPopover = function () {\n // 气泡层（显示）\n $scope.state.visible = true; // 调整位置\n\n $scope.handlePosition();\n };\n\n $scope.hidePopover = function () {\n $scope.state.closing = true;\n $timeout(function () {\n if ($scope.state.closing === false) {\n return;\n }\n\n $scope.state.visible = false;\n }, 100);\n };\n\n $scope.onMouseEnter = function () {\n if ($scope.state.trigger !== \"hover\") {\n return;\n }\n\n if ($scope.state.closing === true) {\n $scope.state.closing = false;\n }\n\n $scope.showPopover();\n };\n\n $scope.onMouseLeave = function () {\n if ($scope.state.trigger !== \"hover\") {\n return;\n }\n\n $scope.hidePopover();\n };\n\n $scope.handlePosition = function () {\n setTimeout(function () {\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n\n if ($scope.placement === \"top\") {\n popover.style[\"top\"] = $scope.getTop();\n } else if ($scope.placement === \"bottom\") {\n popover.style[\"top\"] = $scope.getTop();\n }\n\n popover.style.left = $scope.getLeft() + \"px\";\n }, 0);\n };\n\n $scope.getLeft = function () {\n let parent = $scope.getPopupContainer();\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n let target = $scope.state.target;\n\n if (parent) {\n return -(\n popover.clientWidth / 2 -\n target.clientWidth / 2\n );\n } else {\n let offset = esNgAntd.getOffset(target);\n return (\n offset.left -\n (popover.clientWidth / 2 - target.clientWidth / 2)\n );\n }\n };\n\n $scope.getTop = function () {\n let parent = $scope.getPopupContainer();\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n let target = $scope.state.target;\n\n if (parent) {\n if ($scope.placement === \"top\") {\n return -popover.clientHeight + \"px\";\n } else if ($scope.placement === \"bottom\") {\n }\n } else {\n let offset = esNgAntd.getOffset(target);\n\n if ($scope.placement === \"top\") {\n return offset.top - popover.clientHeight - 4 + \"px\";\n } else if ($scope.placement === \"bottom\") {\n return offset.top + target.clientHeight + 4 + \"px\";\n }\n }\n };\n },\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n esNgAntd.createStyle(\"ant-popover\", antd_lib_popover_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n $scope.state.target = $element[0];\n let title = $scope.title\n ? `<div class=\"ant-popover-title\"><span>${$scope.title}</span></div>`\n : \"\";\n let content = `<div>\n <div style=\"outline:none\" ng-class=\"'ant-popover ant-popover-placement-${$scope.placement}'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')\" ng-mouseleave=\"onMouseLeave()\" ng-mouseenter=\"onMouseEnter()\">\n <div class=\"ant-popover-content\">\n <div class=\"ant-popover-arrow\">\n <span class=\"ant-popover-arrow-content\"></span>\n </div>\n <div class=\"ant-popover-inner\">\n <div>\n ${title}\n <div class=\"ant-popover-inner-content\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>`;\n let div = document.createElement(\"div\");\n\n if (typeof $scope.getPopupContainer() === \"function\") {\n $scope.state.popupContainer = $scope.getPopupContainer()();\n }\n\n if (!$scope.state.popupContainer) {\n div.style.position = \"absolute\";\n div.style.top = \"0px\";\n div.style.left = \"0px\";\n div.style.width = \"100%\";\n div.innerHTML = content;\n document.body.appendChild(div);\n } else {\n $scope.state.popupContainer.appendChild(div);\n }\n\n div.addEventListener(\"click\", function (event) {\n event.stopPropagation();\n });\n $scope.state.target.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n });\n $compile(div)($scope);\n div.querySelector(\".ant-popover-inner-content\").innerHTML =\n $scope.state.content;\n $compile(div.querySelector(\".ant-popover-inner-content\"))(\n $scope.$parent\n );\n $scope.state.popover = div;\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Popover/Popover.js?"); |
| 295 | 295 | ||
| 296 | /***/ }), | 296 | /***/ }), |
| 297 | 297 | ||
| @@ -9661,7 +9661,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac | @@ -9661,7 +9661,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac | ||
| 9661 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 9661 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 9662 | 9662 | ||
| 9663 | "use strict"; | 9663 | "use strict"; |
| 9664 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div ng-style=\\\"{display:'inline-block'}\\\" ng-click=\\\"handleClick()\\\" ng-transclude></div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Popover/Popover.html?"); | 9664 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div ng-style=\\\"{display:'inline-block'}\\\" ng-click=\\\"handleClick()\\\" ng-mouseenter=\\\"onMouseEnter()\\\" ng-mouseleave=\\\"onMouseLeave()\\\" ng-transclude></div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Popover/Popover.html?"); |
| 9665 | 9665 | ||
| 9666 | /***/ }), | 9666 | /***/ }), |
| 9667 | 9667 |
src/Popover/Popover.html
| 1 | -<div style={{display: 'inline-block'}} onClick={this.handleClick}>{children}</div> | ||
| 2 | \ No newline at end of file | 1 | \ No newline at end of file |
| 2 | +<div style={{display: 'inline-block'}} onClick={this.handleClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>{children}</div> | ||
| 3 | \ No newline at end of file | 3 | \ No newline at end of file |
src/Popover/Popover.js
| @@ -2,10 +2,9 @@ import template from "./Popover.html"; | @@ -2,10 +2,9 @@ import template from "./Popover.html"; | ||
| 2 | import style from "antd/lib/popover/style/index.css"; | 2 | import style from "antd/lib/popover/style/index.css"; |
| 3 | 3 | ||
| 4 | class Popover { | 4 | class Popover { |
| 5 | - | ||
| 6 | template = template; | 5 | template = template; |
| 7 | 6 | ||
| 8 | - useModules = ["$compile", "esNgAntd"]; | 7 | + useModules = ["$compile", "$timeout", "esNgAntd"]; |
| 9 | 8 | ||
| 10 | props = { | 9 | props = { |
| 11 | title: String, | 10 | title: String, |
| @@ -13,12 +12,15 @@ class Popover { | @@ -13,12 +12,15 @@ class Popover { | ||
| 13 | context: Object, | 12 | context: Object, |
| 14 | placement: String, | 13 | placement: String, |
| 15 | getPopupContainer: Function, | 14 | getPopupContainer: Function, |
| 15 | + trigger: String, | ||
| 16 | }; | 16 | }; |
| 17 | 17 | ||
| 18 | state = { | 18 | state = { |
| 19 | visible: false, | 19 | visible: false, |
| 20 | content: this.props.content ? this.props.content : "", | 20 | content: this.props.content ? this.props.content : "", |
| 21 | clickTarget: null, | 21 | clickTarget: null, |
| 22 | + trigger: this.props.trigger || "hover", | ||
| 23 | + closing: false, | ||
| 22 | }; | 24 | }; |
| 23 | 25 | ||
| 24 | constructor() { | 26 | constructor() { |
| @@ -28,9 +30,7 @@ class Popover { | @@ -28,9 +30,7 @@ class Popover { | ||
| 28 | ? `<div class="ant-popover-title"><span>${this.props.title}</span></div>` | 30 | ? `<div class="ant-popover-title"><span>${this.props.title}</span></div>` |
| 29 | : ""; | 31 | : ""; |
| 30 | let content = `<div> | 32 | let content = `<div> |
| 31 | - <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${ | ||
| 32 | - this.props.placement | ||
| 33 | - }'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')"> | 33 | + <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${this.props.placement}'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')" ng-mouseleave="onMouseLeave()" ng-mouseenter="onMouseEnter()"> |
| 34 | <div class="ant-popover-content"> | 34 | <div class="ant-popover-content"> |
| 35 | <div class="ant-popover-arrow"> | 35 | <div class="ant-popover-arrow"> |
| 36 | <span class="ant-popover-arrow-content"></span> | 36 | <span class="ant-popover-arrow-content"></span> |
| @@ -65,8 +65,11 @@ class Popover { | @@ -65,8 +65,11 @@ class Popover { | ||
| 65 | e.stopPropagation(); | 65 | e.stopPropagation(); |
| 66 | }); | 66 | }); |
| 67 | $compile(div)($scope); | 67 | $compile(div)($scope); |
| 68 | - div.querySelector(".ant-popover-inner-content").innerHTML = this.state.content; | ||
| 69 | - $compile(div.querySelector(".ant-popover-inner-content"))($scope.$parent) | 68 | + div.querySelector(".ant-popover-inner-content").innerHTML = |
| 69 | + this.state.content; | ||
| 70 | + $compile(div.querySelector(".ant-popover-inner-content"))( | ||
| 71 | + $scope.$parent | ||
| 72 | + ); | ||
| 70 | this.state.popover = div; | 73 | this.state.popover = div; |
| 71 | } | 74 | } |
| 72 | 75 | ||
| @@ -79,6 +82,9 @@ class Popover { | @@ -79,6 +82,9 @@ class Popover { | ||
| 79 | } | 82 | } |
| 80 | 83 | ||
| 81 | handleClick() { | 84 | handleClick() { |
| 85 | + if (this.state.trigger !== "click") { | ||
| 86 | + return; | ||
| 87 | + } | ||
| 82 | if (this.state.visible === false) { | 88 | if (this.state.visible === false) { |
| 83 | // 气泡层（显示） | 89 | // 气泡层（显示） |
| 84 | this.state.visible = true; | 90 | this.state.visible = true; |
| @@ -95,6 +101,40 @@ class Popover { | @@ -95,6 +101,40 @@ class Popover { | ||
| 95 | } | 101 | } |
| 96 | } | 102 | } |
| 97 | 103 | ||
| 104 | + showPopover() { | ||
| 105 | + // 气泡层（显示） | ||
| 106 | + this.state.visible = true; | ||
| 107 | + // 调整位置 | ||
| 108 | + this.handlePosition(); | ||
| 109 | + } | ||
| 110 | + | ||
| 111 | + hidePopover() { | ||
| 112 | + this.state.closing = true; | ||
| 113 | + $timeout(function () { | ||
| 114 | + if (this.state.closing === false) { | ||
| 115 | + return; | ||
| 116 | + } | ||
| 117 | + this.state.visible = false; | ||
| 118 | + }, 100); | ||
| 119 | + } | ||
| 120 | + | ||
| 121 | + onMouseEnter() { | ||
| 122 | + if (this.state.trigger !== "hover") { | ||
| 123 | + return; | ||
| 124 | + } | ||
| 125 | + if (this.state.closing === true) { | ||
| 126 | + this.state.closing = false; | ||
| 127 | + } | ||
| 128 | + this.showPopover(); | ||
| 129 | + } | ||
| 130 | + | ||
| 131 | + onMouseLeave() { | ||
| 132 | + if (this.state.trigger !== "hover") { | ||
| 133 | + return; | ||
| 134 | + } | ||
| 135 | + this.hidePopover(); | ||
| 136 | + } | ||
| 137 | + | ||
| 98 | handlePosition() { | 138 | handlePosition() { |
| 99 | setTimeout(function () { | 139 | setTimeout(function () { |
| 100 | let popover = this.state.popover.querySelector(".ant-popover"); | 140 | let popover = this.state.popover.querySelector(".ant-popover"); |