From 6674355b83bc47cd50ffcf016fdbbbfcdd703cf2 Mon Sep 17 00:00:00 2001 From: Imshann <851188611@qq.com> Date: Thu, 24 Feb 2022 16:09:56 +0800 Subject: [PATCH] 优化选项阿凯 --- build/TabPane/TabPane.js | 94 +++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------- build/Tabs/Tabs.js | 129 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------ build/Tag/Tag.js | 13 ++++++------- dist/ng-antd.js | 4 ++-- example/tabs.html | 10 +++++----- src/TabPane/TabPane.js | 44 ++++++++++++++++++++++++++++---------------- src/Tabs/Tabs.js | 44 ++++++++++++++++++++++++++------------------ 7 files changed, 169 insertions(+), 169 deletions(-) diff --git a/build/TabPane/TabPane.js b/build/TabPane/TabPane.js index d2b7fef..a2159ff 100644 --- a/build/TabPane/TabPane.js +++ b/build/TabPane/TabPane.js @@ -1,54 +1,50 @@ import template from "./TabPane.html"; angular.module("esNgAntd").directive("antdTabPane", function () { - return { - controllerAs: "antdTabPane", - restrict: "E", - transclude: true, - replace: true, - scope: { - key: "@", - tab: "@", - }, - template: template, - controller: function ($scope, $element, $attrs) { - this.getContext = function () { - return $scope; - }; + return { + template: template, + restrict: "E", + replace: true, + transclude: true, + scope: { + key: "@", + tab: "@" + }, + require: ["^antdTabs"], + controller: function ($scope, $element, $attrs) { + $scope.watch = { + tab: function (newVal) { + if (newVal) { + let item = $scope.antdTabs.state.labels.find(function (item) { + return item.key === $scope.key; + }); - $scope.state = { - activeKey: null, - key: $scope.key, - }; - $scope.watch = { - tab: function (newVal, oldVal) { - if (newVal !== oldVal) { - let item = $scope.antdTabs.state.labels.find(function ( - item - ) { - return item.key === $scope.key; - }); + if (item) { + item.name = newVal; + } + } + } + }; + $scope.state = { + activeKey: null, + key: $scope.key + }; + }, + link: function ($scope, $element, $attrs, $controllers) { + for (const key in $scope.watch) { + $scope.$watch(key, $scope.watch[key], true); + } - if (item) { - item.name = newVal; - } - } - }, - }; + let [antdTabs] = $controllers; - for (const key in $scope.watch) { - $scope.$watch(key, $scope.watch[key], true); - } - }, - require: ["?^antdTabs"], - link: function ($scope, $element, $attrs, $controllers, $transclude) { - let [antdTabs] = $controllers; - $scope.antdTabs = antdTabs.getContext(); - $scope.antdTabs.state.labels.push({ - name: $scope.tab, - key: $scope.key, - }); - $scope.antdTabs.state.childrens.push($scope); - $scope.state.activeKey = $scope.antdTabs.state.activeKey; - }, - }; -}); + if (antdTabs) { + $scope.antdTabs = antdTabs.getContext(); + $scope.antdTabs.state.labels.push({ + name: $scope.tab, + key: $scope.key + }); + $scope.antdTabs.state.childrens.push($scope); + $scope.state.activeKey = $scope.antdTabs.state.activeKey; + } + } + }; +}); \ No newline at end of file diff --git a/build/Tabs/Tabs.js b/build/Tabs/Tabs.js index c00c44f..5f159a8 100644 --- a/build/Tabs/Tabs.js +++ b/build/Tabs/Tabs.js @@ -1,79 +1,64 @@ import template from "./Tabs.html"; import style from "antd/lib/tabs/style/index.css"; -angular.module("esNgAntd").directive("antdTabs", function (esNgAntd) { - return { - controllerAs: "antdTabs", - restrict: "E", - transclude: true, - replace: true, - scope: { - defaultActiveKey: "@", - onChange: "&", - }, - template: template, - controller: function ($scope, $element, $attrs) { - this.getContext = function () { - return $scope; - }; +angular.module("esNgAntd").directive("antdTabs", ["esNgAntd", function (esNgAntd) { + return { + template: template, + restrict: "E", + replace: true, + transclude: true, + scope: { + defaultActiveKey: "@", + onChange: "&" + }, + controller: function ($scope, $element) { + this.getContext = function () { + return $scope; + }; - $scope.state = { - childrens: [], - labels: [], - tabWidth: 0, - offsetLeft: 0, - activeKey: $scope.defaultActiveKey, - }; + $scope.state = { + childrens: [], + labels: [], + tabWidth: 0, + offsetLeft: 0, + activeKey: $scope.defaultActiveKey + }; - $scope.handleClick = function (labelKey, tabKey, event) { - let target = event.target; - $scope.state.tabWidth = target.clientWidth; - let currentMarginLeft = parseFloat( - getComputedStyle(target, null).marginLeft - ); - let beforeTarget = Array.prototype.slice - .call(target.parentNode.querySelectorAll("div")) - .splice(0, tabKey); + $scope.handleClick = function (labelKey, tabKey, event) { + let target = event.target; + $scope.state.tabWidth = target.clientWidth; + let currentMarginLeft = parseFloat(getComputedStyle(target, null).marginLeft); + let beforeTarget = Array.prototype.slice.call(target.parentNode.querySelectorAll("div")).splice(0, tabKey); - if (beforeTarget.length > 0) { - $scope.state.offsetLeft = - beforeTarget - .map(function (item) { - return ( - item.clientWidth + - parseFloat( - getComputedStyle(item, null).marginLeft - ) - ); - }) - .reduce(function (prev, curr) { - return prev + curr; - }) + currentMarginLeft; - } else { - $scope.state.offsetLeft = 0; - } + if (beforeTarget.length > 0) { + $scope.state.offsetLeft = beforeTarget.map(function (item) { + return item.clientWidth + parseFloat(getComputedStyle(item, null).marginLeft); + }).reduce(function (prev, curr) { + return prev + curr; + }) + currentMarginLeft; + } else { + $scope.state.offsetLeft = 0; + } - $scope.state.activeKey = labelKey; - $scope.state.childrens.forEach(function (element) { - element.state.activeKey = labelKey; - }); - $scope.onChange({ - key: labelKey, - }); - }; - }, - link: function ($scope, $element, $attrs, $controllers, $transclude) { - esNgAntd.createStyle("ant-tabs", style); + $scope.state.activeKey = labelKey; + $scope.state.childrens.forEach(function (element) { + element.state.activeKey = labelKey; + }); + $scope.onChange({ + key: labelKey + }); + }; + }, + link: function ($scope, $element) { + esNgAntd.createStyle("ant-tabs", style); - if ($scope.defaultActiveKey) { - setTimeout(() => { - if ($element[0].querySelector(".ant-tabs-tab-active")) { - $scope.state.tabWidth = $element[0].querySelector( - ".ant-tabs-tab-active" - ).clientWidth; - $scope.$apply(); - } - }, 0); - } - }, - }; -}); + if ($scope.defaultActiveKey) { + setTimeout(() => { + if ($element[0].querySelector(".ant-tabs-tab-active")) { + $scope.state.tabWidth = $element[0].querySelector(".ant-tabs-tab-active").clientWidth; + $scope.$apply(); + } + }, 0); + } + } + }; +}]); \ No newline at end of file diff --git a/build/Tag/Tag.js b/build/Tag/Tag.js index 72f9f6d..5db0698 100644 --- a/build/Tag/Tag.js +++ b/build/Tag/Tag.js @@ -1,9 +1,8 @@ import template from "./Tag.html"; angular.module("esNgAntd").directive("antdTag", function () { - return { - controllerAs: "antdTag", - restrict: "E", - transclude: true, - replace: true, - }; -}); + return { + restrict: "E", + replace: true, + transclude: true + }; +}); \ No newline at end of file diff --git a/dist/ng-antd.js b/dist/ng-antd.js index 7c7adce..3895104 100644 --- a/dist/ng-antd.js +++ b/dist/ng-antd.js @@ -400,7 +400,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Spi /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _TabPane_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./TabPane.html */ \"./build/TabPane/TabPane.html\");\n\nangular.module(\"esNgAntd\").directive(\"antdTabPane\", function () {\n return {\n controllerAs: \"antdTabPane\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n key: \"@\",\n tab: \"@\",\n },\n template: _TabPane_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 activeKey: null,\n key: $scope.key,\n };\n $scope.watch = {\n tab: function (newVal, oldVal) {\n if (newVal !== oldVal) {\n let item = $scope.antdTabs.state.labels.find(function (\n item\n ) {\n return item.key === $scope.key;\n });\n\n if (item) {\n item.name = newVal;\n }\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n },\n require: [\"?^antdTabs\"],\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n let [antdTabs] = $controllers;\n $scope.antdTabs = antdTabs.getContext();\n $scope.antdTabs.state.labels.push({\n name: $scope.tab,\n key: $scope.key,\n });\n $scope.antdTabs.state.childrens.push($scope);\n $scope.state.activeKey = $scope.antdTabs.state.activeKey;\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/TabPane/TabPane.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _TabPane_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./TabPane.html */ \"./build/TabPane/TabPane.html\");\n\nangular.module(\"esNgAntd\").directive(\"antdTabPane\", function () {\n return {\n template: _TabPane_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n key: \"@\",\n tab: \"@\"\n },\n require: [\"^antdTabs\"],\n controller: function ($scope, $element, $attrs) {\n $scope.watch = {\n tab: function (newVal) {\n if (newVal) {\n let item = $scope.antdTabs.state.labels.find(function (item) {\n return item.key === $scope.key;\n });\n\n if (item) {\n item.name = newVal;\n }\n }\n }\n };\n $scope.state = {\n activeKey: null,\n key: $scope.key\n };\n },\n link: function ($scope, $element, $attrs, $controllers) {\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n\n let [antdTabs] = $controllers;\n\n if (antdTabs) {\n $scope.antdTabs = antdTabs.getContext();\n $scope.antdTabs.state.labels.push({\n name: $scope.tab,\n key: $scope.key\n });\n $scope.antdTabs.state.childrens.push($scope);\n $scope.state.activeKey = $scope.antdTabs.state.activeKey;\n }\n }\n };\n});\n\n//# sourceURL=webpack://ng-antd/./build/TabPane/TabPane.js?"); /***/ }), @@ -422,7 +422,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tab /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tabs_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Tabs.html */ \"./build/Tabs/Tabs.html\");\n/* harmony import */ var antd_lib_tabs_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/tabs/style/index.css */ \"./node_modules/antd/lib/tabs/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdTabs\", function (esNgAntd) {\n return {\n controllerAs: \"antdTabs\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n defaultActiveKey: \"@\",\n onChange: \"&\",\n },\n template: _Tabs_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 childrens: [],\n labels: [],\n tabWidth: 0,\n offsetLeft: 0,\n activeKey: $scope.defaultActiveKey,\n };\n\n $scope.handleClick = function (labelKey, tabKey, event) {\n let target = event.target;\n $scope.state.tabWidth = target.clientWidth;\n let currentMarginLeft = parseFloat(\n getComputedStyle(target, null).marginLeft\n );\n let beforeTarget = Array.prototype.slice\n .call(target.parentNode.querySelectorAll(\"div\"))\n .splice(0, tabKey);\n\n if (beforeTarget.length > 0) {\n $scope.state.offsetLeft =\n beforeTarget\n .map(function (item) {\n return (\n item.clientWidth +\n parseFloat(\n getComputedStyle(item, null).marginLeft\n )\n );\n })\n .reduce(function (prev, curr) {\n return prev + curr;\n }) + currentMarginLeft;\n } else {\n $scope.state.offsetLeft = 0;\n }\n\n $scope.state.activeKey = labelKey;\n $scope.state.childrens.forEach(function (element) {\n element.state.activeKey = labelKey;\n });\n $scope.onChange({\n key: labelKey,\n });\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-tabs\", antd_lib_tabs_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n if ($scope.defaultActiveKey) {\n setTimeout(() => {\n if ($element[0].querySelector(\".ant-tabs-tab-active\")) {\n $scope.state.tabWidth = $element[0].querySelector(\n \".ant-tabs-tab-active\"\n ).clientWidth;\n $scope.$apply();\n }\n }, 0);\n }\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Tabs/Tabs.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tabs_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Tabs.html */ \"./build/Tabs/Tabs.html\");\n/* harmony import */ var antd_lib_tabs_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/tabs/style/index.css */ \"./node_modules/antd/lib/tabs/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdTabs\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Tabs_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n defaultActiveKey: \"@\",\n onChange: \"&\"\n },\n controller: function ($scope, $element) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n childrens: [],\n labels: [],\n tabWidth: 0,\n offsetLeft: 0,\n activeKey: $scope.defaultActiveKey\n };\n\n $scope.handleClick = function (labelKey, tabKey, event) {\n let target = event.target;\n $scope.state.tabWidth = target.clientWidth;\n let currentMarginLeft = parseFloat(getComputedStyle(target, null).marginLeft);\n let beforeTarget = Array.prototype.slice.call(target.parentNode.querySelectorAll(\"div\")).splice(0, tabKey);\n\n if (beforeTarget.length > 0) {\n $scope.state.offsetLeft = beforeTarget.map(function (item) {\n return item.clientWidth + parseFloat(getComputedStyle(item, null).marginLeft);\n }).reduce(function (prev, curr) {\n return prev + curr;\n }) + currentMarginLeft;\n } else {\n $scope.state.offsetLeft = 0;\n }\n\n $scope.state.activeKey = labelKey;\n $scope.state.childrens.forEach(function (element) {\n element.state.activeKey = labelKey;\n });\n $scope.onChange({\n key: labelKey\n });\n };\n },\n link: function ($scope, $element) {\n esNgAntd.createStyle(\"ant-tabs\", antd_lib_tabs_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n if ($scope.defaultActiveKey) {\n setTimeout(() => {\n if ($element[0].querySelector(\".ant-tabs-tab-active\")) {\n $scope.state.tabWidth = $element[0].querySelector(\".ant-tabs-tab-active\").clientWidth;\n $scope.$apply();\n }\n }, 0);\n }\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Tabs/Tabs.js?"); /***/ }), diff --git a/example/tabs.html b/example/tabs.html index d71d0e4..929fa2c 100644 --- a/example/tabs.html +++ b/example/tabs.html @@ -14,11 +14,11 @@
- - - - - + + + + +
diff --git a/src/TabPane/TabPane.js b/src/TabPane/TabPane.js index 22e4c3e..336b785 100644 --- a/src/TabPane/TabPane.js +++ b/src/TabPane/TabPane.js @@ -1,16 +1,31 @@ import template from "./TabPane.html"; class TabPane { - props = { key: Number, tab: String }; + + require = ["^antdTabs"]; state = { activeKey: null, key: this.props.key, }; - watch = { - tab: function (newVal, oldVal) { - if (newVal !== oldVal) { + constructor($element, $attrs, $controllers) { + let [antdTabs] = $controllers; + + if (antdTabs) { + this.antdTabs = antdTabs.getContext(); + this.antdTabs.state.labels.push({ + name: this.props.tab, + key: this.props.key, + }); + this.antdTabs.state.childrens.push($scope); + this.state.activeKey = this.antdTabs.state.activeKey; + } + } + + componentDidUpdate(prevProps) { + if (prevProps.tab !== this.props.tab) { + if (newVal) { let item = this.antdTabs.state.labels.find(function (item) { return item.key === this.props.key; }); @@ -18,18 +33,15 @@ class TabPane { item.name = newVal; } } - }, - }; - - template = template; + } + } - constructor(antdTabs) { - this.antdTabs = antdTabs.getContext(); - this.antdTabs.state.labels.push({ - name: this.props.tab, - key: this.props.key, - }); - this.antdTabs.state.childrens.push($scope); - this.state.activeKey = this.antdTabs.state.activeKey; + render() { + return template; } } + +TabPane.propTypes = { + key: PropTypes.string, + tab: PropTypes.string, +} \ No newline at end of file diff --git a/src/Tabs/Tabs.js b/src/Tabs/Tabs.js index 1e37f1b..85484e0 100644 --- a/src/Tabs/Tabs.js +++ b/src/Tabs/Tabs.js @@ -4,7 +4,7 @@ import style from "antd/lib/tabs/style/index.css"; class Tabs { useModules = ["esNgAntd"]; - props = { defaultActiveKey: Number, onChange: Function }; + context = true; state = { childrens: [], @@ -14,15 +14,11 @@ class Tabs { activeKey: this.props.defaultActiveKey, }; - template = template; - - constructor() { + constructor($element) { esNgAntd.createStyle("ant-tabs", style); if (this.props.defaultActiveKey) { setTimeout(() => { - if ($element[0].querySelector( - ".ant-tabs-tab-active" - )) { + if ($element[0].querySelector(".ant-tabs-tab-active")) { this.state.tabWidth = $element[0].querySelector( ".ant-tabs-tab-active" ).clientWidth; @@ -35,21 +31,24 @@ class Tabs { handleClick(labelKey, tabKey, event) { let target = event.target; this.state.tabWidth = target.clientWidth; - let currentMarginLeft = parseFloat(getComputedStyle(target, null).marginLeft); + let currentMarginLeft = parseFloat( + getComputedStyle(target, null).marginLeft + ); let beforeTarget = Array.prototype.slice .call(target.parentNode.querySelectorAll("div")) .splice(0, tabKey); if (beforeTarget.length > 0) { - this.state.offsetLeft = beforeTarget - .map(function (item) { - return ( - item.clientWidth + - parseFloat(getComputedStyle(item, null).marginLeft) - ); - }) - .reduce(function (prev, curr) { - return prev + curr; - }) + currentMarginLeft; + this.state.offsetLeft = + beforeTarget + .map(function (item) { + return ( + item.clientWidth + + parseFloat(getComputedStyle(item, null).marginLeft) + ); + }) + .reduce(function (prev, curr) { + return prev + curr; + }) + currentMarginLeft; } else { this.state.offsetLeft = 0; } @@ -61,4 +60,13 @@ class Tabs { key: labelKey, }); } + + render() { + return template; + } } + +Tabs.propTypes = { + defaultActiveKey: PropTypes.string, + onChange: PropTypes.function, +}; -- libgit2 0.21.2