From a468667f248901c82d54b9972b251ae211ac7dd8 Mon Sep 17 00:00:00 2001 From: Imshann <851188611@qq.com> Date: Sat, 8 Jan 2022 16:31:57 +0800 Subject: [PATCH] 优化 --- build/Form/Form.js | 6 +++++- build/Pagination/Pagination.html | 8 ++++---- build/Select/Select.html | 2 +- build/Select/Select.js | 39 +++++++++++++++++++++++++++++---------- dist/ng-antd.js | 6 +++--- example/select.html | 4 ++-- src/Form/Form.js | 12 ++++++++---- src/Pagination/Pagination.html | 8 ++++---- src/Select/Select.html | 2 +- src/Select/Select.js | 35 ++++++++++++++++++++++++++--------- 10 files changed, 83 insertions(+), 39 deletions(-) diff --git a/build/Form/Form.js b/build/Form/Form.js index dd0bcd5..9154453 100644 --- a/build/Form/Form.js +++ b/build/Form/Form.js @@ -25,7 +25,11 @@ angular.module("esNgAntd").directive("esForm", function (esNgAntd) { $scope.resetFields = function () { $scope.state.formItems.forEach(function (item) { - item.value = null; + if (typeof item.setValue === "function") { + item.setValue(item.defaultValue || null); + } else { + item.value = null; + } }); }; diff --git a/build/Pagination/Pagination.html b/build/Pagination/Pagination.html index 1ba497b..27d8007 100644 --- a/build/Pagination/Pagination.html +++ b/build/Pagination/Pagination.html @@ -14,10 +14,10 @@
  • - 10 条/页 - 20 条/页 - 30 条/页 - 40 条/页 + 10 条/页 + 20 条/页 + 30 条/页 + 40 条/页
    跳至页 diff --git a/build/Select/Select.html b/build/Select/Select.html index 3d682c8..0e7b50c 100644 --- a/build/Select/Select.html +++ b/build/Select/Select.html @@ -1,4 +1,4 @@ -
    +
    {{state.label}}
    diff --git a/build/Select/Select.js b/build/Select/Select.js index 9dcbd83..13673ea 100644 --- a/build/Select/Select.js +++ b/build/Select/Select.js @@ -10,6 +10,7 @@ angular replace: true, scope: { value: "@", + defaultValue: "@", placeholder: "@", onChange: "&", placeholder: "@", @@ -25,10 +26,25 @@ angular open: false, childrens: [], label: null, - value: null, + value: $scope.value || $scope.defaultValue, popup: null, }; + $scope.setValue = function (value) { + let option = $scope.state.childrens.find(function (option) { + return option.value === value; + }); + + if (option) { + option.label = option.element.text(); + $scope.state.label = option.label; + $scope.state.value = option.value; + } else { + $scope.state.label = null; + $scope.state.value = null; + } + }; + $scope.addOption = function (option) { $scope.state.childrens.push(option); }; @@ -134,16 +150,19 @@ angular ) { let [esForm, esFormItem] = $controllers; esNgAntd.createStyle("ant-select", style); - $scope.esForm = esForm.getContext(); - $scope.esFormItem = esFormItem.getContext(); - $scope.esForm.state.formItems.push($scope); - let option = $scope.state.childrens.find(function (option) { - return option.value === $scope.value; - }); - - if (option) { - $scope.state.label = option.label; + + if (esForm) { + $scope.esForm = esForm.getContext(); + $scope.esForm.state.formItems.push($scope); } + + if (esFormItem) { + $scope.esFormItem = esFormItem.getContext(); + } + + $timeout(function () { + $scope.setValue($scope.value || $scope.defaultValue); + }, 100); }, }; }); diff --git a/dist/ng-antd.js b/dist/ng-antd.js index 513584b..6393397 100644 --- a/dist/ng-antd.js +++ b/dist/ng-antd.js @@ -346,7 +346,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Row /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Select_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Select.html */ \"./build/Select/Select.html\");\n/* harmony import */ var antd_lib_select_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/select/style/index.css */ \"./node_modules/antd/lib/select/style/index.css\");\n\n\nangular\n .module(\"esNgAntd\")\n .directive(\"esSelect\", function ($compile, $timeout, esNgAntd) {\n return {\n controllerAs: \"esSelect\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n value: \"@\",\n placeholder: \"@\",\n onChange: \"&\",\n placeholder: \"@\",\n getPopupContainer: \"&\",\n },\n template: _Select_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n open: false,\n childrens: [],\n label: null,\n value: null,\n popup: null,\n };\n\n $scope.addOption = function (option) {\n $scope.state.childrens.push(option);\n };\n\n $scope.handleClick = function (option) {\n $scope.state.open = !$scope.state.open;\n $scope.state.label = option.label;\n $scope.state.value = option.value;\n $scope.onChange({\n value: $scope.state.value,\n });\n };\n\n $scope.getOffset = function (ele) {\n if (!ele || ele.nodeType != 1) {\n return;\n }\n\n let func = $scope.getPopupContainer();\n\n if (typeof func === \"function\" && func() !== undefined) {\n return {\n top: $element[0].offsetTop,\n left: $element[0].offsetLeft,\n };\n } else {\n let rect = ele.getBoundingClientRect();\n let doc = ele.ownerDocument.documentElement;\n return {\n top: rect.top + window.pageYOffset - doc.clientTop,\n left:\n rect.left + window.pageXOffset - doc.clientLeft,\n };\n }\n };\n\n $scope.myEvent = function () {\n $timeout(() => {\n $scope.state.open = false;\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n };\n\n $scope.handleBlur = function () {\n // 事件绑定\n document.body.addEventListener(\"click\", $scope.myEvent);\n };\n\n $scope.handleOpen = function (event) {\n event.stopPropagation();\n const { height, width } =\n $element[0].getBoundingClientRect();\n const { top, left } = $scope.getOffset($element[0]); // 处理标签\n\n $scope.state.childrens.forEach(function (item) {\n item.label = item.element.text();\n });\n let div = document.createElement(\"div\");\n div.style.position = \"absolute\";\n div.style.left = 0;\n div.style.top = 0;\n div.style.width = \"100%\";\n div.appendChild(\n $compile(`
    \n
    \n
    {{option.label}}
    \n
    \n
    `)($scope)[0]\n );\n\n if ($scope.state.popup === null) {\n let func = $scope.getPopupContainer();\n\n if (\n typeof func === \"function\" &&\n func() !== undefined\n ) {\n $element[0].style.position = \"relative\";\n $scope.getPopupContainer()().appendChild(div);\n } else {\n document.body.appendChild(div);\n }\n\n $scope.state.popup = div;\n }\n\n $scope.state.open = !$scope.state.open;\n $scope.handleBlur();\n };\n },\n require: [\"?^esForm\", \"?^esFormItem\"],\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n let [esForm, esFormItem] = $controllers;\n esNgAntd.createStyle(\"ant-select\", antd_lib_select_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n $scope.esForm = esForm.getContext();\n $scope.esFormItem = esFormItem.getContext();\n $scope.esForm.state.formItems.push($scope);\n let option = $scope.state.childrens.find(function (option) {\n return option.value === $scope.value;\n });\n\n if (option) {\n $scope.state.label = option.label;\n }\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Select/Select.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Select_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Select.html */ \"./build/Select/Select.html\");\n/* harmony import */ var antd_lib_select_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/select/style/index.css */ \"./node_modules/antd/lib/select/style/index.css\");\n\n\nangular\n .module(\"esNgAntd\")\n .directive(\"esSelect\", function ($compile, $timeout, esNgAntd) {\n return {\n controllerAs: \"esSelect\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n value: \"@\",\n placeholder: \"@\",\n onChange: \"&\",\n placeholder: \"@\",\n getPopupContainer: \"&\",\n },\n template: _Select_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n open: false,\n childrens: [],\n label: null,\n value: null,\n popup: null,\n };\n\n $scope.addOption = function (option) {\n $scope.state.childrens.push(option);\n };\n\n $scope.handleClick = function (option) {\n $scope.state.open = !$scope.state.open;\n $scope.state.label = option.label;\n $scope.state.value = option.value;\n $scope.onChange({\n value: $scope.state.value,\n });\n };\n\n $scope.getOffset = function (ele) {\n if (!ele || ele.nodeType != 1) {\n return;\n }\n\n let func = $scope.getPopupContainer();\n\n if (typeof func === \"function\" && func() !== undefined) {\n return {\n top: $element[0].offsetTop,\n left: $element[0].offsetLeft,\n };\n } else {\n let rect = ele.getBoundingClientRect();\n let doc = ele.ownerDocument.documentElement;\n return {\n top: rect.top + window.pageYOffset - doc.clientTop,\n left:\n rect.left + window.pageXOffset - doc.clientLeft,\n };\n }\n };\n\n $scope.myEvent = function () {\n $timeout(() => {\n $scope.state.open = false;\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n };\n\n $scope.handleBlur = function () {\n // 事件绑定\n document.body.addEventListener(\"click\", $scope.myEvent);\n };\n\n $scope.handleOpen = function (event) {\n event.stopPropagation();\n const { height, width } =\n $element[0].getBoundingClientRect();\n const { top, left } = $scope.getOffset($element[0]); // 处理标签\n\n $scope.state.childrens.forEach(function (item) {\n item.label = item.element.text();\n });\n let div = document.createElement(\"div\");\n div.style.position = \"absolute\";\n div.style.left = 0;\n div.style.top = 0;\n div.style.width = \"100%\";\n div.appendChild(\n $compile(`
    \n
    \n
    {{option.label}}
    \n
    \n
    `)($scope)[0]\n );\n\n if ($scope.state.popup === null) {\n let func = $scope.getPopupContainer();\n\n if (\n typeof func === \"function\" &&\n func() !== undefined\n ) {\n $element[0].style.position = \"relative\";\n $scope.getPopupContainer()().appendChild(div);\n } else {\n document.body.appendChild(div);\n }\n\n $scope.state.popup = div;\n }\n\n $scope.state.open = !$scope.state.open;\n $scope.handleBlur();\n };\n },\n require: [\"?^esForm\", \"?^esFormItem\"],\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n let [esForm, esFormItem] = $controllers;\n esNgAntd.createStyle(\"ant-select\", antd_lib_select_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n if (esForm) {\n $scope.esForm = esForm.getContext();\n $scope.esForm.state.formItems.push($scope);\n }\n\n if (esFormItem) {\n $scope.esFormItem = esFormItem.getContext();\n }\n\n $timeout(function () {\n let option = $scope.state.childrens.find(function (option) {\n return option.value === $scope.value;\n });\n\n if (option) {\n option.label = option.element.text();\n $scope.state.label = option.label;\n }\n }, 100);\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Select/Select.js?"); /***/ }), @@ -9606,7 +9606,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
      • \\n
    • \\n {{value}}\\n
      • \\n
    • \\n \\n
      • \\n
    • \\n \\n 10 条/页\\n 20 条/页\\n 30 条/页\\n 40 条/页\\n \\n
      \\n 跳至页\\n
      \\n
      • \\n
    \";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.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
      • \\n
    • \\n {{value}}\\n
      • \\n
    • \\n \\n
      • \\n
    • \\n \\n 10 条/页\\n 20 条/页\\n 30 条/页\\n 40 条/页\\n \\n
      \\n 跳至页\\n
      \\n
      • \\n
    \";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.html?"); /***/ }), @@ -9672,7 +9672,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 {{state.label}}\\n
    \\n \\n \\n \\n \\n
    \";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Select/Select.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 {{state.label}}\\n
    \\n \\n \\n \\n \\n
    \";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Select/Select.html?"); /***/ }), diff --git a/example/select.html b/example/select.html index 2d7187b..2ec3e10 100644 --- a/example/select.html +++ b/example/select.html @@ -7,8 +7,8 @@
    - - {{value}} + + {{value}}
    diff --git a/src/Form/Form.js b/src/Form/Form.js index c9b0c7b..93a3318 100644 --- a/src/Form/Form.js +++ b/src/Form/Form.js @@ -15,7 +15,7 @@ class Form { }; state = { - formItems: [] + formItems: [], }; constructor() { @@ -34,8 +34,12 @@ class Form { resetFields() { this.state.formItems.forEach(function (item) { - item.value = null; - }) + if (typeof item.setValue === "function") { + item.setValue(item.defaultValue || null); + } else { + item.value = null; + } + }); } handleSubmit() { @@ -44,7 +48,7 @@ class Form { let name = item.esFormItem && item.esFormItem.name; let value = item.value || item.state.value || null; values[name] = value; - }) + }); // for (let i = 0; i < inputs.length; i++) { // const element = inputs[i]; // const value = element.value === "" ? null : element.value; diff --git a/src/Pagination/Pagination.html b/src/Pagination/Pagination.html index ce500b2..7dc8218 100644 --- a/src/Pagination/Pagination.html +++ b/src/Pagination/Pagination.html @@ -16,10 +16,10 @@
  • {showSizeChanger === 'true' && - 10 条/页 - 20 条/页 - 30 条/页 - 40 条/页 + 10 条/页 + 20 条/页 + 30 条/页 + 40 条/页 } {showQuickJumper === 'true' &&
    跳至页 diff --git a/src/Select/Select.html b/src/Select/Select.html index 18ab317..3be125f 100644 --- a/src/Select/Select.html +++ b/src/Select/Select.html @@ -1,4 +1,4 @@ -
    +
    {state.label}
    diff --git a/src/Select/Select.js b/src/Select/Select.js index 5c7ab2e..fa932a2 100644 --- a/src/Select/Select.js +++ b/src/Select/Select.js @@ -1,13 +1,12 @@ import template from "./Select.html"; import style from "antd/lib/select/style/index.css"; - class Select { - useModules = ["$compile", "$timeout", "esNgAntd"]; props = { value: String, + defaultValue: String, placeholder: String, onChange: Function, placeholder: String, @@ -18,7 +17,7 @@ class Select { open: false, childrens: [], label: null, - value: null, + value: this.props.value || this.props.defaultValue, popup: null, }; @@ -26,14 +25,30 @@ class Select { constructor(esForm, esFormItem) { esNgAntd.createStyle("ant-select", style); - this.esForm = esForm.getContext(); - this.esFormItem = esFormItem.getContext(); - this.esForm.state.formItems.push($scope); + if (esForm) { + this.esForm = esForm.getContext(); + this.esForm.state.formItems.push($scope); + } + if (esFormItem) { + this.esFormItem = esFormItem.getContext(); + } + + $timeout(function () { + this.setValue(this.props.value || this.props.defaultValue); + }, 100); + } + + setValue(value) { let option = this.state.childrens.find(function (option) { - return option.value === this.props.value; + return option.value === value; }); if (option) { + option.label = option.element.text(); this.state.label = option.label; + this.state.value = option.value; + } else { + this.state.label = null; + this.state.value = null; } } @@ -90,7 +105,7 @@ class Select { // 处理标签 this.state.childrens.forEach(function (item) { item.label = item.element.text(); - }) + }); let div = document.createElement("div"); div.style.position = "absolute"; @@ -98,7 +113,9 @@ class Select { div.style.top = 0; div.style.width = "100%"; div.appendChild( - $compile(`
    + $compile(`
    {{option.label}}
    -- libgit2 0.21.2