From 2092c4d57262beb898146eddd941ba13359dab22 Mon Sep 17 00:00:00 2001 From: Imshann <851188611@qq.com> Date: Mon, 14 Feb 2022 11:35:38 +0800 Subject: [PATCH] 优化 --- build/Button/Button.js | 113 +++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------- dist/ng-antd.js | 2 +- example/button.html | 12 ++++++------ src/Button/Button.js | 22 ++++++++++++---------- 4 files changed, 70 insertions(+), 79 deletions(-) diff --git a/build/Button/Button.js b/build/Button/Button.js index 266a629..41f59ff 100644 --- a/build/Button/Button.js +++ b/build/Button/Button.js @@ -1,69 +1,58 @@ -import template from "./Button.html"; import style from "antd/lib/button/style/index.css"; -angular.module("esNgAntd").directive("antdButton", function (esNgAntd) { - return { - controllerAs: "antdButton", - restrict: "E", - transclude: true, - replace: true, - scope: { - type: "@", - size: "@", - ghost: "@", - loading: "@", - htmlType: "@", - }, - template: template, - controller: function ($scope, $element, $attrs) { - this.getContext = function () { - return $scope; - }; - - $scope.state = { - disabled: null, - className: "", - }; - $scope.watch = { - loading: (newVal) => { - if (newVal !== undefined) { - if (newVal === "true") { - $scope.state.className += " ant-btn-loading"; - } else { - $scope.state.className = - $scope.state.className.replace( - " ant-btn-loading", - "" - ); - } - } - }, - }; - - for (const key in $scope.watch) { - $scope.$watch(key, $scope.watch[key], true); +import template from "./Button.html"; +angular.module("esNgAntd").directive("antdButton", ["esNgAntd", function (esNgAntd) { + return { + template: template, + restrict: "E", + replace: true, + transclude: true, + scope: { + type: "@", + size: "@", + htmlType: "@", + ghost: "=", + loading: "@" + }, + controller: function ($scope) { + $scope.state = { + disabled: null, + className: "" + }; + $scope.watch = { + loading: newVal => { + if (newVal !== undefined) { + if (newVal === "true") { + $scope.state.className += " ant-btn-loading"; + } else { + $scope.state.className = $scope.state.className.replace(" ant-btn-loading", ""); } - }, - link: function ($scope, $element, $attrs, $controllers, $transclude) { - esNgAntd.createStyle("ant-btn", style); - let className = ["ant-btn"]; + } + } + }; + }, + link: function ($scope, $element, $attrs, $controllers, $transclude) { + esNgAntd.createStyle("ant-btn", style); + let className = ["ant-btn"]; + + console.log($scope); - if ($scope.type) { - className.push("ant-btn-" + $scope.type); - } + if ($scope.type) { + className.push("ant-btn-" + $scope.type); + } - if ($scope.size && ["lg", "sm", "xs"].includes($scope.size)) { - className.push("ant-btn-" + $scope.size); - } + if ($scope.size && ["lg", "sm", "xs"].includes($scope.size)) { + className.push("ant-btn-" + $scope.size); + } - if ($scope.ghost) { - className.push("ant-btn-background-ghost"); - } + if ($scope.ghost) { + className.push("ant-btn-background-ghost"); + } - $scope.state.className = className.join(" "); + $scope.state.className = className.join(" "); - if ($scope.htmlType) { - $element[0].setAttribute("type", $scope.htmlType); - } - }, - }; -}); + if ($scope.htmlType) { + $element[0].setAttribute("type", $scope.htmlType); + } + } + }; +}]); \ No newline at end of file diff --git a/dist/ng-antd.js b/dist/ng-antd.js index 21fd31e..da6a281 100644 --- a/dist/ng-antd.js +++ b/dist/ng-antd.js @@ -49,7 +49,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Bre /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Button_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Button.html */ \"./build/Button/Button.html\");\n/* harmony import */ var antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/button/style/index.css */ \"./node_modules/antd/lib/button/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdButton\", function (esNgAntd) {\n return {\n controllerAs: \"antdButton\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n type: \"@\",\n size: \"@\",\n ghost: \"@\",\n loading: \"@\",\n htmlType: \"@\",\n },\n template: _Button_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 disabled: null,\n className: \"\",\n };\n $scope.watch = {\n loading: (newVal) => {\n if (newVal !== undefined) {\n if (newVal === \"true\") {\n $scope.state.className += \" ant-btn-loading\";\n } else {\n $scope.state.className =\n $scope.state.className.replace(\n \" ant-btn-loading\",\n \"\"\n );\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 esNgAntd.createStyle(\"ant-btn\", antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n let className = [\"ant-btn\"];\n\n if ($scope.type) {\n className.push(\"ant-btn-\" + $scope.type);\n }\n\n if ($scope.size && [\"lg\", \"sm\", \"xs\"].includes($scope.size)) {\n className.push(\"ant-btn-\" + $scope.size);\n }\n\n if ($scope.ghost) {\n className.push(\"ant-btn-background-ghost\");\n }\n\n $scope.state.className = className.join(\" \");\n\n if ($scope.htmlType) {\n $element[0].setAttribute(\"type\", $scope.htmlType);\n }\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Button/Button.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/button/style/index.css */ \"./node_modules/antd/lib/button/style/index.css\");\n/* harmony import */ var _Button_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Button.html */ \"./build/Button/Button.html\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdButton\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Button_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n type: \"@\",\n size: \"@\",\n htmlType: \"@\",\n ghost: \"=\",\n loading: \"@\"\n },\n controller: function ($scope) {\n $scope.state = {\n disabled: null,\n className: \"\"\n };\n $scope.watch = {\n loading: newVal => {\n if (newVal !== undefined) {\n if (newVal === \"true\") {\n $scope.state.className += \" ant-btn-loading\";\n } else {\n $scope.state.className = $scope.state.className.replace(\" ant-btn-loading\", \"\");\n }\n }\n }\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-btn\", antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n let className = [\"ant-btn\"];\n \n console.log($scope);\n\n if ($scope.type) {\n className.push(\"ant-btn-\" + $scope.type);\n }\n\n if ($scope.size && [\"lg\", \"sm\", \"xs\"].includes($scope.size)) {\n className.push(\"ant-btn-\" + $scope.size);\n }\n\n if ($scope.ghost) {\n className.push(\"ant-btn-background-ghost\");\n }\n\n $scope.state.className = className.join(\" \");\n\n if ($scope.htmlType) {\n $element[0].setAttribute(\"type\", $scope.htmlType);\n }\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Button/Button.js?"); /***/ }), diff --git a/example/button.html b/example/button.html index 26062c9..cb9ec10 100644 --- a/example/button.html +++ b/example/button.html @@ -15,16 +15,16 @@

Primary

- Primary + Primary

Default

- I am button. + I am button.

Link

- Link - Link + Link + Link

Ghost

- Link + Link

Loading

- Click me + Click me
diff --git a/src/Button/Button.js b/src/Button/Button.js index 5e82401..ec3f5cd 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -5,21 +5,11 @@ class Button { useModules = ["esNgAntd"]; - props = { - type: String, - size: String, - ghost: Boolean, - loading: Boolean, - htmlType: String, - }; - state = { disabled: null, className: "", }; - template = template; - watch = { loading: (newVal)=> { if (newVal !== undefined) { @@ -54,4 +44,16 @@ class Button { $element[0].setAttribute("type", this.props.htmlType) } } + + render() { + return template; + } } + +Button.propTypes = { + type: PropTypes.string, + size: PropTypes.string, + htmlType: PropTypes.string, + ghost: PropTypes.boolean, + loading: PropTypes.boolean, +}; -- libgit2 0.21.2