From 91af8307571161df3ee7cea77ecf608c8653ce87 Mon Sep 17 00:00:00 2001 From: Imshann <851188611@qq.com> Date: Thu, 24 Feb 2022 15:03:53 +0800 Subject: [PATCH] 优化Textarea组件 --- build/Textarea/Textarea.js | 106 +++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------- dist/ng-antd.js | 2 +- src/Textarea/Textarea.js | 39 ++++++++++++++++----------------------- 3 files changed, 62 insertions(+), 85 deletions(-) diff --git a/build/Textarea/Textarea.js b/build/Textarea/Textarea.js index 5eed4fe..1074031 100644 --- a/build/Textarea/Textarea.js +++ b/build/Textarea/Textarea.js @@ -1,68 +1,52 @@ -/** - * 多行文本框 - */ import template from "./Textarea.html"; import style from "antd/lib/input/style/index.css"; -angular.module("esNgAntd").directive("antdTextarea", function () { - return { - controllerAs: "antdTextarea", - restrict: "E", - transclude: true, - replace: true, - scope: { - context: "=", - showCount: "@", - maxLength: "@", - placeholder: "@", - onChange: "&", - value: "@", - }, - template: template, - controller: function ($scope, $element, $attrs) { - this.getContext = function () { - return $scope; - }; +angular.module("esNgAntd").directive("antdTextarea", ["esNgAntd", function (esNgAntd) { + return { + template: template, + restrict: "E", + replace: true, + transclude: true, + scope: { + value: "@", + placeholder: "@", + showCount: "=", + maxLength: "=", + onChange: "&" + }, + controller: function ($scope) { + $scope.state = { + value: $scope.value, + count: 0, + maxLength: $scope.maxLength || "off" + }; - $scope.state = { - value: $scope.value, - count: 0, - maxLength: $scope.maxLength || "off", - }; + $scope.handleKeyup = function (event) { + if (!$scope.event) { + $scope.event = event; + } - $scope.handleKeyup = function (event) { - if (!$scope.event) { - $scope.event = event; - } + if ($scope.state.maxLength === "off") { + return; + } - if ($scope.state.maxLength === "off") { - return; - } + let target = event.target; + $scope.state.count = target.value.length; + }; - let target = event.target; - $scope.state.count = target.value.length; - }; + $scope.handleClick = function (event) { + if (!$scope.event) { + $scope.event = event; + } + }; - $scope.handleClick = function (event) { - if (!$scope.event) { - $scope.event = event; - } - }; - - $scope.handleChange = function () { - // this.props.onChange(this.state.value, this.props.context); - $scope.onChange({ - event: $scope.event, - }); - }; - }, - link: function ($scope, $element, $attrs, $controllers, $transclude) { - if (!document.querySelector("#ant-input")) { - let styleElement = document.createElement("style"); - styleElement.setAttribute("id", "ant-input"); - styleElement.setAttribute("type", "text/css"); - styleElement.innerHTML = style.toString(); - document.head.appendChild(styleElement); - } - }, - }; -}); + $scope.handleChange = function () { + $scope.onChange({ + event: $scope.event + }); + }; + }, + link: function ($scope) { + esNgAntd.createStyle("ant-input", style); + } + }; +}]); \ No newline at end of file diff --git a/dist/ng-antd.js b/dist/ng-antd.js index 2b668a5..ec6d81b 100644 --- a/dist/ng-antd.js +++ b/dist/ng-antd.js @@ -433,7 +433,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 _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?"); +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?"); /***/ }), diff --git a/src/Textarea/Textarea.js b/src/Textarea/Textarea.js index 8e007dd..38e8438 100644 --- a/src/Textarea/Textarea.js +++ b/src/Textarea/Textarea.js @@ -1,18 +1,8 @@ -/** - * 多行文本框 - */ import template from "./Textarea.html"; import style from "antd/lib/input/style/index.css"; class Textarea { - props = { - context: Object, - showCount: Boolean, - maxLength: Number, - placeholder: String, - onChange: Function, - value: String, - }; + useModules = ["esNgAntd"]; state = { value: this.props.value, @@ -20,7 +10,9 @@ class Textarea { maxLength: this.props.maxLength || "off", }; - template = template; + constructor() { + esNgAntd.createStyle("ant-input", style); + } handleKeyup(event) { if (!this.event) { @@ -40,19 +32,20 @@ class Textarea { } handleChange() { - // this.props.onChange(this.state.value, this.props.context); this.props.onChange({ - event: this.event - }) + event: this.event, + }); } - constructor() { - if (!document.querySelector("#ant-input")) { - let styleElement = document.createElement("style"); - styleElement.setAttribute("id", "ant-input"); - styleElement.setAttribute("type", "text/css"); - styleElement.innerHTML = style.toString(); - document.head.appendChild(styleElement); - } + render() { + return template; } } + +Textarea.propTypes = { + value: PropTypes.string, + placeholder: PropTypes.string, + showCount: PropTypes.boolean, + maxLength: PropTypes.number, + onChange: PropTypes.function, +}; -- libgit2 0.21.2