From e7610b685a86ed0e60ca02234da161c9bc20b234 Mon Sep 17 00:00:00 2001 From: Imshann <851188611@qq.com> Date: Wed, 19 Jan 2022 14:08:20 +0800 Subject: [PATCH] feat(pagination): 优化组件 --- build/Common/Common.js | 1 - build/Pagination/Pagination.html | 6 +++--- build/Pagination/Pagination.js | 13 ++++++------- build/Popover/Popover.js | 12 +++++++++--- build/Slot/Slot.js | 2 +- dist/ng-antd.js | 10 +++++----- example/pagination.html | 2 +- src/Common/Common.js | 1 - src/Pagination/Pagination.html | 6 +++--- src/Pagination/Pagination.js | 10 ++++------ src/Popover/Popover.js | 10 ++++++---- webpack.config.js | 4 ++-- 12 files changed, 40 insertions(+), 37 deletions(-) diff --git a/build/Common/Common.js b/build/Common/Common.js index 5387d98..184581d 100644 --- a/build/Common/Common.js +++ b/build/Common/Common.js @@ -38,7 +38,6 @@ angular.module("esNgAntd").service("esNgAntd", [ /\.ant\-/g, ".disabled-ant-" ); - console.log(rule.selectorText); } } }; diff --git a/build/Pagination/Pagination.html b/build/Pagination/Pagination.html index 1696abe..21b29e5 100644 --- a/build/Pagination/Pagination.html +++ b/build/Pagination/Pagination.html @@ -21,11 +21,11 @@
  • - + 10 条/页 20 条/页 - 30 条/页 - 40 条/页 + 50 条/页 + 100 条/页
    跳至页 diff --git a/build/Pagination/Pagination.js b/build/Pagination/Pagination.js index ab48aab..3711ebb 100644 --- a/build/Pagination/Pagination.js +++ b/build/Pagination/Pagination.js @@ -146,6 +146,10 @@ angular.module("esNgAntd").directive("esPagination", function (esNgAntd) { }; $scope.handleClick = function (value) { + if (value === $scope.state.current) { + return; + } + if (value === "next") { value = $scope.state.current + 5; } @@ -154,12 +158,7 @@ angular.module("esNgAntd").directive("esPagination", function (esNgAntd) { value = $scope.state.current - 5; } - $scope.setCurrent($scope.getCurrent(value)); // 更新回调 - - $scope.onChange({ - page: $scope.state.current, - pageSize: $scope.state.pageSize, - }); + $scope.setCurrent($scope.getCurrent(value)); }; $scope.handleChange = function () { @@ -173,7 +172,7 @@ angular.module("esNgAntd").directive("esPagination", function (esNgAntd) { $scope.onChange({ page: current, - pageSize: $scope.state.pageSize, + pageSize: parseInt($scope.state.pageSize), }); }; diff --git a/build/Popover/Popover.js b/build/Popover/Popover.js index a9b718a..e7e11e5 100644 --- a/build/Popover/Popover.js +++ b/build/Popover/Popover.js @@ -160,6 +160,7 @@ angular } }; }, + require: ["?^esTable"], link: function ( $scope, $element, @@ -167,6 +168,7 @@ angular $controllers, $transclude ) { + let [esTable] = $controllers; esNgAntd.createStyle("ant-popover", style); $scope.state.target = $element[0]; let title = $scope.title @@ -213,9 +215,13 @@ angular $compile(div)($scope); div.querySelector(".ant-popover-inner-content").innerHTML = $scope.state.content; - $compile(div.querySelector(".ant-popover-inner-content"))( - $scope.$parent - ); + + if (!esTable) { + $compile(div.querySelector(".ant-popover-inner-content"))( + $scope.$parent + ); + } + $scope.state.popover = div; }, }; diff --git a/build/Slot/Slot.js b/build/Slot/Slot.js index b15b07c..f8ece22 100644 --- a/build/Slot/Slot.js +++ b/build/Slot/Slot.js @@ -8,7 +8,7 @@ angular.module("esNgAntd").directive("esSlot", function ($compile) { content: "@", context: "=", }, - controller: function ($scope, $element) { + controller: function ($scope, $element, $attrs) { this.getContext = function () { return $scope; }; diff --git a/dist/ng-antd.js b/dist/ng-antd.js index 2fe20ed..135d106 100644 --- a/dist/ng-antd.js +++ b/dist/ng-antd.js @@ -104,7 +104,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Col /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/style/index.css */ \"./node_modules/antd/lib/style/index.css\");\n\nangular.module(\"esNgAntd\").service(\"esNgAntd\", [\n \"$compile\",\n function ($compile) {\n this.styleSheets = null;\n\n this.createStyle = function (key, style) {\n if (!document.querySelector(\"#antd\")) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", \"antd\");\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"].toString();\n document.head.appendChild(styleElement);\n }\n\n if (!document.querySelector(\"#\" + key)) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", key);\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = style.toString();\n document.head.appendChild(styleElement);\n\n if (this.styleSheets) {\n this.disableStyle(key);\n }\n }\n };\n\n this.disableStyle = function (name) {\n for (let i = 0; i < this.styleSheets.cssRules.length; i++) {\n let rule = this.styleSheets.cssRules[i];\n\n if (\n rule.selectorText &&\n rule.selectorText.indexOf(name) !== -1\n ) {\n rule.selectorText = rule.selectorText.replace(\n /\\.ant\\-/g,\n \".disabled-ant-\"\n );\n console.log(rule.selectorText);\n }\n }\n };\n\n this.conflict = function (filename) {\n for (let i = 0; i < document.styleSheets.length; i++) {\n const element = document.styleSheets[i];\n\n if (element.href && element.href.indexOf(filename) !== -1) {\n this.styleSheets = element;\n }\n }\n };\n\n this.createLayer = function (content, scope) {\n let div = document.createElement(\"div\");\n div.innerHTML = content;\n document.body.appendChild(div);\n $compile(div)(scope);\n };\n\n this.getOffset = function (ele) {\n if (!ele || ele.nodeType != 1) {\n return;\n }\n\n let rect = ele.getBoundingClientRect();\n let doc = ele.ownerDocument.documentElement;\n return {\n top: rect.top + window.pageYOffset - doc.clientTop,\n left: rect.left + window.pageXOffset - doc.clientLeft,\n };\n };\n },\n]);\n\n\n//# sourceURL=webpack://ng-antd/./build/Common/Common.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/style/index.css */ \"./node_modules/antd/lib/style/index.css\");\n\nangular.module(\"esNgAntd\").service(\"esNgAntd\", [\n \"$compile\",\n function ($compile) {\n this.styleSheets = null;\n\n this.createStyle = function (key, style) {\n if (!document.querySelector(\"#antd\")) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", \"antd\");\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"].toString();\n document.head.appendChild(styleElement);\n }\n\n if (!document.querySelector(\"#\" + key)) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", key);\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = style.toString();\n document.head.appendChild(styleElement);\n\n if (this.styleSheets) {\n this.disableStyle(key);\n }\n }\n };\n\n this.disableStyle = function (name) {\n for (let i = 0; i < this.styleSheets.cssRules.length; i++) {\n let rule = this.styleSheets.cssRules[i];\n\n if (\n rule.selectorText &&\n rule.selectorText.indexOf(name) !== -1\n ) {\n rule.selectorText = rule.selectorText.replace(\n /\\.ant\\-/g,\n \".disabled-ant-\"\n );\n }\n }\n };\n\n this.conflict = function (filename) {\n for (let i = 0; i < document.styleSheets.length; i++) {\n const element = document.styleSheets[i];\n\n if (element.href && element.href.indexOf(filename) !== -1) {\n this.styleSheets = element;\n }\n }\n };\n\n this.createLayer = function (content, scope) {\n let div = document.createElement(\"div\");\n div.innerHTML = content;\n document.body.appendChild(div);\n $compile(div)(scope);\n };\n\n this.getOffset = function (ele) {\n if (!ele || ele.nodeType != 1) {\n return;\n }\n\n let rect = ele.getBoundingClientRect();\n let doc = ele.ownerDocument.documentElement;\n return {\n top: rect.top + window.pageYOffset - doc.clientTop,\n left: rect.left + window.pageXOffset - doc.clientLeft,\n };\n };\n },\n]);\n\n\n//# sourceURL=webpack://ng-antd/./build/Common/Common.js?"); /***/ }), @@ -280,7 +280,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Mod /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Pagination_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Pagination.html */ \"./build/Pagination/Pagination.html\");\n/* harmony import */ var antd_lib_pagination_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/pagination/style/index.css */ \"./node_modules/antd/lib/pagination/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"esPagination\", function (esNgAntd) {\n return {\n controllerAs: \"esPagination\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n defaultCurrent: \"@\",\n current: \"@\",\n total: \"@\",\n defaultPageSize: \"@\",\n pageSize: \"@\",\n onChange: \"&\",\n onShowSizeChange: \"&\",\n showQuickJumper: \"@\",\n showSizeChanger: \"@\",\n size: \"@\",\n showTotal: \"&\",\n },\n template: _Pagination_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 total: null,\n current: null,\n pageSize: null,\n pageNum: null,\n pageNumList: null,\n };\n $scope.watch = {\n total: function (newVal, oldVal) {\n if (newVal && oldVal) {\n $scope.state.total = Number(newVal);\n $scope.state.pageNum = $scope.getPageNum();\n $scope.state.pageNumList = $scope.getPageNumList();\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n\n $scope.handleShowTotal = function () {\n return $scope.showTotal({\n total: $scope.state.total,\n });\n };\n\n $scope.getItemLinkClassName = function (value) {\n if (typeof value === \"number\") {\n return (\n \"ant-pagination-item\" +\n ($scope.state.current === value\n ? \" ant-pagination-item-active\"\n : \"\")\n );\n } else {\n return \"ant-pagination-jump-next ant-pagination-jump-next-custom-icon\";\n }\n };\n\n $scope.getPageNumList = function () {\n let pageNumList = [$scope.state.current];\n let pageNum = $scope.getPageNum();\n\n if (pageNum <= 7 || $scope.state.current - 1 < 4) {\n for (let i = $scope.state.current - 1; i > 0; i--) {\n pageNumList.unshift(i);\n }\n } else {\n let len =\n $scope.state.current - 1 > 2\n ? 2\n : $scope.state.current - 1;\n\n for (let i = 1; i <= len; i++) {\n pageNumList.unshift($scope.state.current - i);\n }\n\n if ($scope.state.current - 2 > 2) {\n pageNumList.unshift(\"prev\");\n pageNumList.unshift(1);\n }\n }\n\n if (pageNum <= 7 || pageNum - $scope.state.current < 4) {\n for (let i = $scope.state.current + 1; i <= pageNum; i++) {\n pageNumList.push(i);\n }\n } else {\n let limit =\n 3 - $scope.state.current > 0\n ? 2 + (3 - $scope.state.current)\n : 2;\n let len =\n pageNum - $scope.state.current > limit\n ? limit\n : pageNum - $scope.state.current;\n\n for (let i = 1; i <= len; i++) {\n pageNumList.push($scope.state.current + i);\n }\n\n if (pageNum - $scope.state.current > 2) {\n pageNumList.push(\"next\");\n pageNumList.push(pageNum);\n }\n }\n\n return pageNumList;\n };\n\n $scope.getPageNum = function () {\n return (\n Math.ceil(\n $scope.state.total /\n ($scope.pageSize || $scope.defaultPageSize || 10)\n ) || 1\n );\n };\n\n $scope.getPopupContainer = function () {\n return $element[0].querySelector(\".ant-pagination-options\");\n };\n\n $scope.handleNext = function () {\n if ($scope.state.current === $scope.state.pageNum) {\n return false;\n }\n\n $scope.handleClick(++$scope.state.current);\n };\n\n $scope.handlePrev = function () {\n if ($scope.state.current === 1) {\n return false;\n }\n\n $scope.handleClick(--$scope.state.current);\n };\n\n $scope.handleClick = function (value) {\n if (value === \"next\") {\n value = $scope.state.current + 5;\n }\n\n if (value === \"prev\") {\n value = $scope.state.current - 5;\n }\n\n $scope.setCurrent($scope.getCurrent(value)); // 更新回调\n\n $scope.onChange({\n page: $scope.state.current,\n pageSize: $scope.state.pageSize,\n });\n };\n\n $scope.handleChange = function () {\n let current = $scope.state.current;\n\n if ($scope.state.current > $scope.state.pageNum) {\n current = $scope.state.pageNum;\n } else if ($scope.state.current < 1) {\n current = 1;\n }\n\n $scope.onChange({\n page: current,\n pageSize: $scope.state.pageSize,\n });\n };\n\n $scope.handleSelectChange = function (value) {\n $scope.state.current = 1;\n $scope.state.pageSize = parseInt(value);\n $scope.handleChange();\n };\n\n $scope.getCurrent = function (number) {\n if (number > $scope.state.pageNum) {\n return $scope.state.pageNum;\n }\n\n if (number < 1) {\n return 1;\n }\n\n return parseInt(number);\n };\n\n $scope.setCurrent = function (value) {\n if (!value) {\n return;\n }\n\n $scope.state.current = $scope.getCurrent(value);\n $scope.state.pageNumList = $scope.getPageNumList();\n $scope.handleChange();\n };\n\n $scope.handleBlur = function (event) {\n $scope.setCurrent(event.target.value);\n event.target.value = null;\n };\n\n $scope.onKeyPress = function (event) {\n if (event.keyCode === 13 || event.keyCode === 32) {\n $scope.setCurrent(event.target.value);\n event.target.value = null;\n }\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-pagination\", antd_lib_pagination_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n $scope.state.total = Number($scope.total || 0);\n $scope.state.current = Number(\n $scope.current || $scope.defaultCurrent || 1\n );\n $scope.state.pageSize =\n $scope.pageSize || $scope.defaultPageSize || 10;\n $scope.state.pageNum = $scope.getPageNum();\n $scope.state.pageNumList = $scope.getPageNumList();\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Pagination_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Pagination.html */ \"./build/Pagination/Pagination.html\");\n/* harmony import */ var antd_lib_pagination_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/pagination/style/index.css */ \"./node_modules/antd/lib/pagination/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"esPagination\", function (esNgAntd) {\n return {\n controllerAs: \"esPagination\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n defaultCurrent: \"@\",\n current: \"@\",\n total: \"@\",\n defaultPageSize: \"@\",\n pageSize: \"@\",\n onChange: \"&\",\n onShowSizeChange: \"&\",\n showQuickJumper: \"@\",\n showSizeChanger: \"@\",\n size: \"@\",\n showTotal: \"&\",\n },\n template: _Pagination_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 total: null,\n current: null,\n pageSize: null,\n pageNum: null,\n pageNumList: null,\n };\n $scope.watch = {\n total: function (newVal, oldVal) {\n if (newVal && oldVal) {\n $scope.state.total = Number(newVal);\n $scope.state.pageNum = $scope.getPageNum();\n $scope.state.pageNumList = $scope.getPageNumList();\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n\n $scope.handleShowTotal = function () {\n return $scope.showTotal({\n total: $scope.state.total,\n });\n };\n\n $scope.getItemLinkClassName = function (value) {\n if (typeof value === \"number\") {\n return (\n \"ant-pagination-item\" +\n ($scope.state.current === value\n ? \" ant-pagination-item-active\"\n : \"\")\n );\n } else {\n return \"ant-pagination-jump-next ant-pagination-jump-next-custom-icon\";\n }\n };\n\n $scope.getPageNumList = function () {\n let pageNumList = [$scope.state.current];\n let pageNum = $scope.getPageNum();\n\n if (pageNum <= 7 || $scope.state.current - 1 < 4) {\n for (let i = $scope.state.current - 1; i > 0; i--) {\n pageNumList.unshift(i);\n }\n } else {\n let len =\n $scope.state.current - 1 > 2\n ? 2\n : $scope.state.current - 1;\n\n for (let i = 1; i <= len; i++) {\n pageNumList.unshift($scope.state.current - i);\n }\n\n if ($scope.state.current - 2 > 2) {\n pageNumList.unshift(\"prev\");\n pageNumList.unshift(1);\n }\n }\n\n if (pageNum <= 7 || pageNum - $scope.state.current < 4) {\n for (let i = $scope.state.current + 1; i <= pageNum; i++) {\n pageNumList.push(i);\n }\n } else {\n let limit =\n 3 - $scope.state.current > 0\n ? 2 + (3 - $scope.state.current)\n : 2;\n let len =\n pageNum - $scope.state.current > limit\n ? limit\n : pageNum - $scope.state.current;\n\n for (let i = 1; i <= len; i++) {\n pageNumList.push($scope.state.current + i);\n }\n\n if (pageNum - $scope.state.current > 2) {\n pageNumList.push(\"next\");\n pageNumList.push(pageNum);\n }\n }\n\n return pageNumList;\n };\n\n $scope.getPageNum = function () {\n return (\n Math.ceil(\n $scope.state.total /\n ($scope.pageSize || $scope.defaultPageSize || 10)\n ) || 1\n );\n };\n\n $scope.getPopupContainer = function () {\n return $element[0].querySelector(\".ant-pagination-options\");\n };\n\n $scope.handleNext = function () {\n if ($scope.state.current === $scope.state.pageNum) {\n return false;\n }\n\n $scope.handleClick(++$scope.state.current);\n };\n\n $scope.handlePrev = function () {\n if ($scope.state.current === 1) {\n return false;\n }\n\n $scope.handleClick(--$scope.state.current);\n };\n\n $scope.handleClick = function (value) {\n if (value === $scope.state.current) {\n return;\n }\n\n if (value === \"next\") {\n value = $scope.state.current + 5;\n }\n\n if (value === \"prev\") {\n value = $scope.state.current - 5;\n }\n\n $scope.setCurrent($scope.getCurrent(value));\n };\n\n $scope.handleChange = function () {\n let current = $scope.state.current;\n\n if ($scope.state.current > $scope.state.pageNum) {\n current = $scope.state.pageNum;\n } else if ($scope.state.current < 1) {\n current = 1;\n }\n\n $scope.onChange({\n page: current,\n pageSize: parseInt($scope.state.pageSize),\n });\n };\n\n $scope.handleSelectChange = function (value) {\n $scope.state.current = 1;\n $scope.state.pageSize = parseInt(value);\n $scope.handleChange();\n };\n\n $scope.getCurrent = function (number) {\n if (number > $scope.state.pageNum) {\n return $scope.state.pageNum;\n }\n\n if (number < 1) {\n return 1;\n }\n\n return parseInt(number);\n };\n\n $scope.setCurrent = function (value) {\n if (!value) {\n return;\n }\n\n $scope.state.current = $scope.getCurrent(value);\n $scope.state.pageNumList = $scope.getPageNumList();\n $scope.handleChange();\n };\n\n $scope.handleBlur = function (event) {\n $scope.setCurrent(event.target.value);\n event.target.value = null;\n };\n\n $scope.onKeyPress = function (event) {\n if (event.keyCode === 13 || event.keyCode === 32) {\n $scope.setCurrent(event.target.value);\n event.target.value = null;\n }\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-pagination\", antd_lib_pagination_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n $scope.state.total = Number($scope.total || 0);\n $scope.state.current = Number(\n $scope.current || $scope.defaultCurrent || 1\n );\n $scope.state.pageSize =\n $scope.pageSize || $scope.defaultPageSize || 10;\n $scope.state.pageNum = $scope.getPageNum();\n $scope.state.pageNumList = $scope.getPageNumList();\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.js?"); /***/ }), @@ -291,7 +291,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Pag /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -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 ? `
    ${$scope.title}
    `\n : \"\";\n let content = `
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n ${title}\n
    \n
    \n
    \n
    \n
    \n
    `;\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?"); +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 require: [\"?^esTable\"],\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n let [esTable] = $controllers;\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 ? `
    ${$scope.title}
    `\n : \"\";\n let content = `
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n ${title}\n
    \n
    \n
    \n
    \n
    \n
    `;\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\n if (!esTable) {\n $compile(div.querySelector(\".ant-popover-inner-content\"))(\n $scope.$parent\n );\n }\n\n $scope.state.popover = div;\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Popover/Popover.js?"); /***/ }), @@ -367,7 +367,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Sel \****************************/ /***/ (() => { -eval("angular.module(\"esNgAntd\").directive(\"esSlot\", function ($compile) {\n return {\n controllerAs: \"esSlot\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n content: \"@\",\n context: \"=\",\n },\n controller: function ($scope, $element) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.watch = {\n content: (newValue) => {\n if (newValue !== undefined) {\n if (/<[^>]+>/.test(newValue)) {\n $element.replaceWith(\n $compile(newValue)(\n $scope.context ? $scope.context : $scope\n )\n );\n } else {\n $element.text(newValue);\n }\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {},\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Slot/Slot.js?"); +eval("angular.module(\"esNgAntd\").directive(\"esSlot\", function ($compile) {\n return {\n controllerAs: \"esSlot\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n content: \"@\",\n context: \"=\",\n },\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.watch = {\n content: (newValue) => {\n if (newValue !== undefined) {\n if (/<[^>]+>/.test(newValue)) {\n $element.replaceWith(\n $compile(newValue)(\n $scope.context ? $scope.context : $scope\n )\n );\n } else {\n $element.text(newValue);\n }\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {},\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Slot/Slot.js?"); /***/ }), @@ -9650,7 +9650,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -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 = \"
      \\n
    • {{handleShowTotal()}}
      • \\n
    • \\n \\n
      • \\n
    • \\n {{value}}\\n \\n
      \\n \\n \\n •••\\n
      \\n       \\n
      • \\n
    • \\n \\n
      • \\n
    • \\n \\n 10 条/页\\n 20 条/页\\n 30 条/页\\n 40 条/页\\n \\n
      \\n 跳至页\\n
      \\n
      • \\n
    \";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.html?"); +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 = \"
      \\n
    • {{handleShowTotal()}}
      • \\n
    • \\n \\n
      • \\n
    • \\n {{value}}\\n \\n
      \\n \\n \\n •••\\n
      \\n       \\n
      • \\n
    • \\n \\n
      • \\n
    • \\n \\n 10 条/页\\n 20 条/页\\n 50 条/页\\n 100 条/页\\n \\n
      \\n 跳至页\\n
      \\n
      • \\n
    \";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.html?"); /***/ }), diff --git a/example/pagination.html b/example/pagination.html index 673a290..db1f1c4 100644 --- a/example/pagination.html +++ b/example/pagination.html @@ -9,7 +9,7 @@
    -
    diff --git a/src/Common/Common.js b/src/Common/Common.js index c749b63..120bf98 100644 --- a/src/Common/Common.js +++ b/src/Common/Common.js @@ -36,7 +36,6 @@ angular.module("esNgAntd").service("esNgAntd", [ /\.ant\-/g, ".disabled-ant-" ); - console.log(rule.selectorText); } } }; diff --git a/src/Pagination/Pagination.html b/src/Pagination/Pagination.html index d1e5a3a..cdbad55 100644 --- a/src/Pagination/Pagination.html +++ b/src/Pagination/Pagination.html @@ -23,11 +23,11 @@
  • - {showSizeChanger === 'true' && + {showSizeChanger === 'true' && 10 条/页 20 条/页 - 30 条/页 - 40 条/页 + 50 条/页 + 100 条/页 } {showQuickJumper === 'true' &&
    跳至页 diff --git a/src/Pagination/Pagination.js b/src/Pagination/Pagination.js index b0b6096..2231c9a 100644 --- a/src/Pagination/Pagination.js +++ b/src/Pagination/Pagination.js @@ -137,6 +137,9 @@ class Pagination { } handleClick(value) { + if (value === this.state.current) { + return; + } if (value === "next") { value = this.state.current + 5; } @@ -144,11 +147,6 @@ class Pagination { value = this.state.current - 5; } this.setCurrent(this.getCurrent(value)); - // 更新回调 - this.props.onChange({ - page: this.state.current, - pageSize: this.state.pageSize, - }); } handleChange() { @@ -160,7 +158,7 @@ class Pagination { } this.props.onChange({ page: current, - pageSize: this.state.pageSize, + pageSize: parseInt(this.state.pageSize), }); } diff --git a/src/Popover/Popover.js b/src/Popover/Popover.js index 5c2ee82..de87b53 100644 --- a/src/Popover/Popover.js +++ b/src/Popover/Popover.js @@ -23,7 +23,7 @@ class Popover { closing: false, }; - constructor() { + constructor(esTable) { esNgAntd.createStyle("ant-popover", style); this.state.target = $element[0]; let title = this.props.title @@ -67,9 +67,11 @@ class Popover { $compile(div)($scope); div.querySelector(".ant-popover-inner-content").innerHTML = this.state.content; - $compile(div.querySelector(".ant-popover-inner-content"))( - $scope.$parent - ); + if (!esTable) { + $compile(div.querySelector(".ant-popover-inner-content"))( + $scope.$parent + ); + } this.state.popover = div; } diff --git a/webpack.config.js b/webpack.config.js index 78da758..ca2f468 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,11 +8,11 @@ module.exports = { // bpms // path: "/Usersc/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd", // boss - path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd", + // path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd", // mvo // path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd", // local - // path: path.resolve(__dirname, "dist"), + path: path.resolve(__dirname, "dist"), filename: "ng-antd.js", }, module: { -- libgit2 0.21.2