From ddd373d9edf33a7bb8fa1c0a69413cf286d96a0f Mon Sep 17 00:00:00 2001 From: Imshann <851188611@qq.com> Date: Wed, 16 Feb 2022 14:04:59 +0800 Subject: [PATCH] 优化Card组件 --- build/Button/Button.js | 6 ++---- build/Card/Card.html | 4 ++-- build/Card/Card.js | 51 +++++++++++++++++++++------------------------------ build/Slot/Slot.js | 65 ++++++++++++++++++++++++++++------------------------------------- dist/ng-antd.js | 8 ++++---- example/button.html | 2 +- example/card.html | 10 +++++++--- example/test.html | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 +- src/BreadcrumbItem/BreadcrumbItem.js | 1 + src/Card/Card.html | 4 ++-- src/Card/Card.js | 24 ++++++++++++------------ src/Slot/Slot.js | 29 +++++++++++++---------------- yarn.lock | 8 ++++---- 14 files changed, 198 insertions(+), 116 deletions(-) create mode 100644 example/test.html diff --git a/build/Button/Button.js b/build/Button/Button.js index 41f59ff..48a0eb0 100644 --- a/build/Button/Button.js +++ b/build/Button/Button.js @@ -11,7 +11,7 @@ angular.module("esNgAntd").directive("antdButton", ["esNgAntd", function (esNgAn size: "@", htmlType: "@", ghost: "=", - loading: "@" + loading: "=" }, controller: function ($scope) { $scope.state = { @@ -32,9 +32,7 @@ angular.module("esNgAntd").directive("antdButton", ["esNgAntd", function (esNgAn }, link: function ($scope, $element, $attrs, $controllers, $transclude) { esNgAntd.createStyle("ant-btn", style); - let className = ["ant-btn"]; - - console.log($scope); + let className = ["ant-btn"]; if ($scope.type) { className.push("ant-btn-" + $scope.type); diff --git a/build/Card/Card.html b/build/Card/Card.html index 281881a..6764ace 100644 --- a/build/Card/Card.html +++ b/build/Card/Card.html @@ -1,9 +1,9 @@ -
+
{{title}}
- +
diff --git a/build/Card/Card.js b/build/Card/Card.js index c7603b9..5ef1b9b 100644 --- a/build/Card/Card.js +++ b/build/Card/Card.js @@ -1,31 +1,22 @@ -import template from "./Card.html"; import style from "antd/lib/card/style/index.css"; -angular.module("esNgAntd").directive("antdCard", function (esNgAntd) { - return { - controllerAs: "antdCard", - restrict: "E", - transclude: true, - replace: true, - scope: { - title: "@", - extra: "@", - bordered: "@", - }, - template: template, - controller: function ($scope, $element, $attrs) { - this.getContext = function () { - return $scope; - }; - - $scope.state = { - extra: $scope.extra, - }; - }, - link: function ($scope, $element, $attrs, $controllers, $transclude) { - $element[0].removeAttribute("title"); - $element[0].removeAttribute("extra"); - $element[0].removeAttribute("ng-class"); - esNgAntd.createStyle("ant-card", style); - }, - }; -}); +import template from "./Card.html"; +angular.module("esNgAntd").directive("antdCard", ["esNgAntd", function (esNgAntd) { + return { + template: template, + restrict: "E", + replace: true, + transclude: true, + scope: { + title: "@", + extra: "@", + bordered: "=" + }, + link: function ($scope, $element) { + $element[0].removeAttribute("title"); + $element[0].removeAttribute("extra"); + $element[0].removeAttribute("ng-class"); + $scope.self = $scope; + esNgAntd.createStyle("ant-card", style); + } + }; +}]); \ No newline at end of file diff --git a/build/Slot/Slot.js b/build/Slot/Slot.js index d82f676..c7e53da 100644 --- a/build/Slot/Slot.js +++ b/build/Slot/Slot.js @@ -1,38 +1,29 @@ -angular.module("esNgAntd").directive("antdSlot", function ($compile) { - return { - controllerAs: "antdSlot", - restrict: "E", - transclude: true, - replace: true, - scope: { - content: "@", - context: "=", - }, - controller: function ($scope, $element, $attrs) { - this.getContext = function () { - return $scope; - }; - - $scope.watch = { - content: (newValue) => { - if (newValue !== undefined) { - if (/<[^>]+>/.test(newValue)) { - $element.replaceWith( - $compile(newValue)( - $scope.context ? $scope.context : $scope - ) - ); - } else { - $element.text(newValue); - } - } - }, - }; - - for (const key in $scope.watch) { - $scope.$watch(key, $scope.watch[key], true); +angular.module("esNgAntd").directive("antdSlot", ["$compile", function ($compile) { + return { + restrict: "E", + replace: true, + transclude: true, + scope: { + content: "@", + context: "=" + }, + controller: function ($scope, $element) { + $scope.watch = { + content: function (newVal) { + if (newVal !== undefined) { + if (/<[^>]+>/.test(newVal)) { + $element.replaceWith($compile(newVal)($scope.context ? $scope.context : $scope)); + } else { + $element.text(newVal); } - }, - link: function ($scope, $element, $attrs, $controllers, $transclude) {}, - }; -}); + } + } + }; + }, + link: function ($scope) { + for (const key in $scope.watch) { + $scope.$watch(key, $scope.watch[key], true); + } + } + }; +}]); \ No newline at end of file diff --git a/dist/ng-antd.js b/dist/ng-antd.js index da6a281..ff6d86e 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 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?"); +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 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?"); /***/ }), @@ -60,7 +60,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Card_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Card.html */ \"./build/Card/Card.html\");\n/* harmony import */ var antd_lib_card_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/card/style/index.css */ \"./node_modules/antd/lib/card/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdCard\", function (esNgAntd) {\n return {\n controllerAs: \"antdCard\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n title: \"@\",\n extra: \"@\",\n bordered: \"@\",\n },\n template: _Card_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 extra: $scope.extra,\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n $element[0].removeAttribute(\"title\");\n $element[0].removeAttribute(\"extra\");\n $element[0].removeAttribute(\"ng-class\");\n esNgAntd.createStyle(\"ant-card\", antd_lib_card_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Card/Card.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_card_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/card/style/index.css */ \"./node_modules/antd/lib/card/style/index.css\");\n/* harmony import */ var _Card_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Card.html */ \"./build/Card/Card.html\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdCard\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Card_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n title: \"@\",\n extra: \"@\",\n bordered: \"=\"\n },\n link: function ($scope, $element) {\n $element[0].removeAttribute(\"title\");\n $element[0].removeAttribute(\"extra\");\n $element[0].removeAttribute(\"ng-class\");\n $scope.self = $scope;\n esNgAntd.createStyle(\"ant-card\", antd_lib_card_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Card/Card.js?"); /***/ }), @@ -367,7 +367,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Sel \****************************/ /***/ (() => { -eval("angular.module(\"esNgAntd\").directive(\"antdSlot\", function ($compile) {\n return {\n controllerAs: \"antdSlot\",\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?"); +eval("angular.module(\"esNgAntd\").directive(\"antdSlot\", [\"$compile\", function ($compile) {\n return {\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n content: \"@\",\n context: \"=\"\n },\n controller: function ($scope, $element) {\n $scope.watch = {\n content: function (newVal) {\n if (newVal !== undefined) {\n if (/<[^>]+>/.test(newVal)) {\n $element.replaceWith($compile(newVal)($scope.context ? $scope.context : $scope));\n } else {\n $element.text(newVal);\n }\n }\n }\n };\n },\n link: function ($scope) {\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Slot/Slot.js?"); /***/ }), @@ -9474,7 +9474,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
\\n
\\n
{{title}}
\\n
\\n \\n
\\n
\\n
\\n
\\n
\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Card/Card.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
\\n
\\n
{{title}}
\\n
\\n \\n
\\n
\\n
\\n
\\n
\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Card/Card.html?"); /***/ }), diff --git a/example/button.html b/example/button.html index cb9ec10..9db24e9 100644 --- a/example/button.html +++ b/example/button.html @@ -24,7 +24,7 @@

Ghost

Link

Loading

- Click me + Click me
diff --git a/example/card.html b/example/card.html index 4500bb3..645a42b 100644 --- a/example/card.html +++ b/example/card.html @@ -7,7 +7,9 @@
- + +

I am content.

+
@@ -16,8 +18,10 @@ angular .module("esNgAntd") .controller("mainCtrl", function ($scope) { - $scope.isRead = false; - $scope.status = `More` + $scope.status = `More`; + $scope.onClick = function() { + alert("I am onClick"); + } }); diff --git a/example/test.html b/example/test.html new file mode 100644 index 0000000..0002697 --- /dev/null +++ b/example/test.html @@ -0,0 +1,100 @@ + + + + + + + + + + +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/package.json b/package.json index 08761ab..90867e1 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "devDependencies": { "@ant-design/icons-svg": "^4.2.1", "antd": "^4.18.2", - "beanboom": "^0.9.4", + "beanboom": "^0.9.7", "css-loader": "^6.5.1", "html-loader": "^3.0.1", "style-loader": "^3.3.1", diff --git a/src/BreadcrumbItem/BreadcrumbItem.js b/src/BreadcrumbItem/BreadcrumbItem.js index 72cc1e0..8b6817b 100644 --- a/src/BreadcrumbItem/BreadcrumbItem.js +++ b/src/BreadcrumbItem/BreadcrumbItem.js @@ -1,6 +1,7 @@ import template from "./BreadcrumbItem.html"; class BreadcrumbItem { + useModules = ["esNgAntd"]; constructor() { diff --git a/src/Card/Card.html b/src/Card/Card.html index f4646af..f82036b 100644 --- a/src/Card/Card.html +++ b/src/Card/Card.html @@ -1,9 +1,9 @@ -
+
{title &&
{title}
{extra &&
- +
}
} diff --git a/src/Card/Card.js b/src/Card/Card.js index a7a3be1..7fea16d 100644 --- a/src/Card/Card.js +++ b/src/Card/Card.js @@ -2,24 +2,24 @@ import template from "./Card.html"; import style from "antd/lib/card/style/index.css"; class Card { - props = { - title: String, - extra: String, - bordered: Boolean, - }; - - state = { - extra: this.props.extra, - }; useModules = ["esNgAntd"]; - template = template; - - constructor() { + constructor($element) { $element[0].removeAttribute("title"); $element[0].removeAttribute("extra"); $element[0].removeAttribute("ng-class"); + this.self = $scope; esNgAntd.createStyle("ant-card", style); } + + render() { + return template; + } } + +Card.propTypes = { + title: PropTypes.string, + extra: PropTypes.string, + bordered: PropTypes.boolean, +}; diff --git a/src/Slot/Slot.js b/src/Slot/Slot.js index f0408ec..6f5a036 100644 --- a/src/Slot/Slot.js +++ b/src/Slot/Slot.js @@ -1,28 +1,25 @@ class Slot { - props = { - content: String, - context: Object, - }; useModules = ["$compile"]; - - watch = { - content: (newValue) => { - if (newValue !== undefined) { - if (/<[^>]+>/.test(newValue)) { + + componentDidUpdate(prevProps) { + if(prevProps.content !== this.props.content) { + if (newVal !== undefined) { + if (/<[^>]+>/.test(newVal)) { $element.replaceWith( - $compile(newValue)( + $compile(newVal)( $scope.context ? $scope.context : $scope ) ); } else { - $element.text(newValue); + $element.text(newVal); } } - }, - }; - - constructor() { - + } } } + +Slot.propTypes = { + content: PropTypes.string, + context: PropTypes.object, +}; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 0035654..009f784 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1320,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3: dependencies: "@babel/helper-define-polyfill-provider" "^0.2.4" -beanboom@^0.9.4: - version "0.9.4" - resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.4.tgz#efde9461228151689a82f88610ce58b80d11369f" - integrity sha512-fnz4cE8ZC5Nks8Off/vQTWYfNjLQDfGM34uoNt5+BhK6RlbgIbomQ5g37kXnViTwXrFD6nry7xcowt7wFF5nOw== +beanboom@^0.9.7: + version "0.9.7" + resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.7.tgz#095f340d0e38067b492ed1de914552396c63aaf1" + integrity sha512-0Gqzaos1EJOajLdLesgb2l4+ZzKbW2OKkXXeV5pUqEfE4PGlKXmmPpzdTP21jtHu1vQCxV8nt+Qql4+2J5YEzg== dependencies: "@babel/core" "^7.12.10" "@babel/plugin-proposal-class-properties" "^7.13.0" -- libgit2 0.21.2