Commit 91af8307571161df3ee7cea77ecf608c8653ce87
1 parent
d88eaac5
优化Textarea组件
Showing
3 changed files
with
62 additions
and
85 deletions
Show diff stats
build/Textarea/Textarea.js
| 1 | -/** | |
| 2 | - * 多行文本框 | |
| 3 | - */ | |
| 4 | 1 | import template from "./Textarea.html"; |
| 5 | 2 | import style from "antd/lib/input/style/index.css"; |
| 6 | -angular.module("esNgAntd").directive("antdTextarea", function () { | |
| 7 | - return { | |
| 8 | - controllerAs: "antdTextarea", | |
| 9 | - restrict: "E", | |
| 10 | - transclude: true, | |
| 11 | - replace: true, | |
| 12 | - scope: { | |
| 13 | - context: "=", | |
| 14 | - showCount: "@", | |
| 15 | - maxLength: "@", | |
| 16 | - placeholder: "@", | |
| 17 | - onChange: "&", | |
| 18 | - value: "@", | |
| 19 | - }, | |
| 20 | - template: template, | |
| 21 | - controller: function ($scope, $element, $attrs) { | |
| 22 | - this.getContext = function () { | |
| 23 | - return $scope; | |
| 24 | - }; | |
| 3 | +angular.module("esNgAntd").directive("antdTextarea", ["esNgAntd", function (esNgAntd) { | |
| 4 | + return { | |
| 5 | + template: template, | |
| 6 | + restrict: "E", | |
| 7 | + replace: true, | |
| 8 | + transclude: true, | |
| 9 | + scope: { | |
| 10 | + value: "@", | |
| 11 | + placeholder: "@", | |
| 12 | + showCount: "=", | |
| 13 | + maxLength: "=", | |
| 14 | + onChange: "&" | |
| 15 | + }, | |
| 16 | + controller: function ($scope) { | |
| 17 | + $scope.state = { | |
| 18 | + value: $scope.value, | |
| 19 | + count: 0, | |
| 20 | + maxLength: $scope.maxLength || "off" | |
| 21 | + }; | |
| 25 | 22 | |
| 26 | - $scope.state = { | |
| 27 | - value: $scope.value, | |
| 28 | - count: 0, | |
| 29 | - maxLength: $scope.maxLength || "off", | |
| 30 | - }; | |
| 23 | + $scope.handleKeyup = function (event) { | |
| 24 | + if (!$scope.event) { | |
| 25 | + $scope.event = event; | |
| 26 | + } | |
| 31 | 27 | |
| 32 | - $scope.handleKeyup = function (event) { | |
| 33 | - if (!$scope.event) { | |
| 34 | - $scope.event = event; | |
| 35 | - } | |
| 28 | + if ($scope.state.maxLength === "off") { | |
| 29 | + return; | |
| 30 | + } | |
| 36 | 31 | |
| 37 | - if ($scope.state.maxLength === "off") { | |
| 38 | - return; | |
| 39 | - } | |
| 32 | + let target = event.target; | |
| 33 | + $scope.state.count = target.value.length; | |
| 34 | + }; | |
| 40 | 35 | |
| 41 | - let target = event.target; | |
| 42 | - $scope.state.count = target.value.length; | |
| 43 | - }; | |
| 36 | + $scope.handleClick = function (event) { | |
| 37 | + if (!$scope.event) { | |
| 38 | + $scope.event = event; | |
| 39 | + } | |
| 40 | + }; | |
| 44 | 41 | |
| 45 | - $scope.handleClick = function (event) { | |
| 46 | - if (!$scope.event) { | |
| 47 | - $scope.event = event; | |
| 48 | - } | |
| 49 | - }; | |
| 50 | - | |
| 51 | - $scope.handleChange = function () { | |
| 52 | - // this.props.onChange(this.state.value, this.props.context); | |
| 53 | - $scope.onChange({ | |
| 54 | - event: $scope.event, | |
| 55 | - }); | |
| 56 | - }; | |
| 57 | - }, | |
| 58 | - link: function ($scope, $element, $attrs, $controllers, $transclude) { | |
| 59 | - if (!document.querySelector("#ant-input")) { | |
| 60 | - let styleElement = document.createElement("style"); | |
| 61 | - styleElement.setAttribute("id", "ant-input"); | |
| 62 | - styleElement.setAttribute("type", "text/css"); | |
| 63 | - styleElement.innerHTML = style.toString(); | |
| 64 | - document.head.appendChild(styleElement); | |
| 65 | - } | |
| 66 | - }, | |
| 67 | - }; | |
| 68 | -}); | |
| 42 | + $scope.handleChange = function () { | |
| 43 | + $scope.onChange({ | |
| 44 | + event: $scope.event | |
| 45 | + }); | |
| 46 | + }; | |
| 47 | + }, | |
| 48 | + link: function ($scope) { | |
| 49 | + esNgAntd.createStyle("ant-input", style); | |
| 50 | + } | |
| 51 | + }; | |
| 52 | +}]); | |
| 69 | 53 | \ No newline at end of file | ... | ... |
dist/ng-antd.js
| ... | ... | @@ -433,7 +433,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tab |
| 433 | 433 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 434 | 434 | |
| 435 | 435 | "use strict"; |
| 436 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Textarea_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Textarea.html */ \"./build/Textarea/Textarea.html\");\n/* harmony import */ var antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/input/style/index.css */ \"./node_modules/antd/lib/input/style/index.css\");\n/**\n * 多行文本框\n */\n\n\nangular.module(\"esNgAntd\").directive(\"antdTextarea\", function () {\n return {\n controllerAs: \"antdTextarea\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n context: \"=\",\n showCount: \"@\",\n maxLength: \"@\",\n placeholder: \"@\",\n onChange: \"&\",\n value: \"@\",\n },\n template: _Textarea_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 value: $scope.value,\n count: 0,\n maxLength: $scope.maxLength || \"off\",\n };\n\n $scope.handleKeyup = function (event) {\n if (!$scope.event) {\n $scope.event = event;\n }\n\n if ($scope.state.maxLength === \"off\") {\n return;\n }\n\n let target = event.target;\n $scope.state.count = target.value.length;\n };\n\n $scope.handleClick = function (event) {\n if (!$scope.event) {\n $scope.event = event;\n }\n };\n\n $scope.handleChange = function () {\n // this.props.onChange(this.state.value, this.props.context);\n $scope.onChange({\n event: $scope.event,\n });\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n if (!document.querySelector(\"#ant-input\")) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", \"ant-input\");\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toString();\n document.head.appendChild(styleElement);\n }\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Textarea/Textarea.js?"); | |
| 436 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Textarea_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Textarea.html */ \"./build/Textarea/Textarea.html\");\n/* harmony import */ var antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/input/style/index.css */ \"./node_modules/antd/lib/input/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdTextarea\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Textarea_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n value: \"@\",\n placeholder: \"@\",\n showCount: \"=\",\n maxLength: \"=\",\n onChange: \"&\"\n },\n controller: function ($scope) {\n $scope.state = {\n value: $scope.value,\n count: 0,\n maxLength: $scope.maxLength || \"off\"\n };\n\n $scope.handleKeyup = function (event) {\n if (!$scope.event) {\n $scope.event = event;\n }\n\n if ($scope.state.maxLength === \"off\") {\n return;\n }\n\n let target = event.target;\n $scope.state.count = target.value.length;\n };\n\n $scope.handleClick = function (event) {\n if (!$scope.event) {\n $scope.event = event;\n }\n };\n\n $scope.handleChange = function () {\n $scope.onChange({\n event: $scope.event\n });\n };\n },\n link: function ($scope) {\n esNgAntd.createStyle(\"ant-input\", antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Textarea/Textarea.js?"); | |
| 437 | 437 | |
| 438 | 438 | /***/ }), |
| 439 | 439 | ... | ... |
src/Textarea/Textarea.js
| 1 | -/** | |
| 2 | - * 多行文本框 | |
| 3 | - */ | |
| 4 | 1 | import template from "./Textarea.html"; |
| 5 | 2 | import style from "antd/lib/input/style/index.css"; |
| 6 | 3 | |
| 7 | 4 | class Textarea { |
| 8 | - props = { | |
| 9 | - context: Object, | |
| 10 | - showCount: Boolean, | |
| 11 | - maxLength: Number, | |
| 12 | - placeholder: String, | |
| 13 | - onChange: Function, | |
| 14 | - value: String, | |
| 15 | - }; | |
| 5 | + useModules = ["esNgAntd"]; | |
| 16 | 6 | |
| 17 | 7 | state = { |
| 18 | 8 | value: this.props.value, |
| ... | ... | @@ -20,7 +10,9 @@ class Textarea { |
| 20 | 10 | maxLength: this.props.maxLength || "off", |
| 21 | 11 | }; |
| 22 | 12 | |
| 23 | - template = template; | |
| 13 | + constructor() { | |
| 14 | + esNgAntd.createStyle("ant-input", style); | |
| 15 | + } | |
| 24 | 16 | |
| 25 | 17 | handleKeyup(event) { |
| 26 | 18 | if (!this.event) { |
| ... | ... | @@ -40,19 +32,20 @@ class Textarea { |
| 40 | 32 | } |
| 41 | 33 | |
| 42 | 34 | handleChange() { |
| 43 | - // this.props.onChange(this.state.value, this.props.context); | |
| 44 | 35 | this.props.onChange({ |
| 45 | - event: this.event | |
| 46 | - }) | |
| 36 | + event: this.event, | |
| 37 | + }); | |
| 47 | 38 | } |
| 48 | 39 | |
| 49 | - constructor() { | |
| 50 | - if (!document.querySelector("#ant-input")) { | |
| 51 | - let styleElement = document.createElement("style"); | |
| 52 | - styleElement.setAttribute("id", "ant-input"); | |
| 53 | - styleElement.setAttribute("type", "text/css"); | |
| 54 | - styleElement.innerHTML = style.toString(); | |
| 55 | - document.head.appendChild(styleElement); | |
| 56 | - } | |
| 40 | + render() { | |
| 41 | + return template; | |
| 57 | 42 | } |
| 58 | 43 | } |
| 44 | + | |
| 45 | +Textarea.propTypes = { | |
| 46 | + value: PropTypes.string, | |
| 47 | + placeholder: PropTypes.string, | |
| 48 | + showCount: PropTypes.boolean, | |
| 49 | + maxLength: PropTypes.number, | |
| 50 | + onChange: PropTypes.function, | |
| 51 | +}; | ... | ... |