From 4c519425caebd6ffcae13ddc7234db8a399dd414 Mon Sep 17 00:00:00 2001 From: Imshann <851188611@qq.com> Date: Tue, 11 Jan 2022 14:15:35 +0800 Subject: [PATCH] 优化图片组件 --- build/ImagePreviewGroup/ImagePreviewGroup.js | 51 ++++++++++++++++++++++++++++++++++++++++++--------- package.json | 2 +- src/ImagePreviewGroup/ImagePreviewGroup.js | 44 ++++++++++++++++++++++++++++++++++++-------- webpack.config.js | 4 ++-- yarn.lock | 8 ++++---- 5 files changed, 85 insertions(+), 24 deletions(-) diff --git a/build/ImagePreviewGroup/ImagePreviewGroup.js b/build/ImagePreviewGroup/ImagePreviewGroup.js index 4ccda4d..da0c34c 100644 --- a/build/ImagePreviewGroup/ImagePreviewGroup.js +++ b/build/ImagePreviewGroup/ImagePreviewGroup.js @@ -7,8 +7,11 @@ angular restrict: "E", transclude: true, replace: true, + scope: { + preview: "=", + }, template: template, - controller: function ($scope, $element) { + controller: function ($scope, $element, $attrs) { this.getContext = function () { return $scope; }; @@ -25,36 +28,66 @@ angular return $scope.state.childrens.length - 1; }; + $scope.setCurrent = function (value) { + $scope.state.current = value; + + if ( + typeof $scope.preview === "object" && + typeof $scope.preview.onCurrentChange === "function" + ) { + $scope.preview.onCurrentChange(value); + } + }; + + $scope.setVisible = function (value) { + $scope.state.visible = value; + + if ( + typeof $scope.preview === "object" && + typeof $scope.preview.onVisibleChange === "function" + ) { + $scope.preview.onVisibleChange(value); + } + }; + $scope.handleOpen = function (index) { - $scope.state.current = index; + $scope.setCurrent(index); $scope.state.src = $scope.state.childrens[index].state.src; - $scope.state.visible = true; + $scope.setVisible(true); }; $scope.handleClose = function () { - $scope.state.visible = false; + $scope.setVisible(false); }; $scope.handlePrev = function () { - $scope.state.current = - $scope.state.current > 0 ? $scope.state.current - 1 : 0; + $scope.setCurrent( + $scope.state.current > 0 ? $scope.state.current - 1 : 0 + ); $scope.state.src = $scope.state.childrens[$scope.state.current].state.src; }; $scope.handleNext = function () { - $scope.state.current = + $scope.setCurrent( $scope.state.current < $scope.state.childrens.length - 1 ? $scope.state.current + 1 - : $scope.state.childrens.length - 1; + : $scope.state.childrens.length - 1 + ); $scope.state.src = $scope.state.childrens[$scope.state.current].state.src; }; $scope.handlePreview = function () { + let className; + + if ($attrs.class) { + className = ` ${$attrs.class}`; + } + esNgAntd.createLayer( ` -
+
diff --git a/package.json b/package.json index 5b1675b..affc224 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "devDependencies": { "@ant-design/icons-svg": "^4.2.1", "antd": "^4.18.2", - "beanboom": "0.8.5", + "beanboom": "0.8.7", "css-loader": "^6.5.1", "html-loader": "^3.0.1", "style-loader": "^3.3.1", diff --git a/src/ImagePreviewGroup/ImagePreviewGroup.js b/src/ImagePreviewGroup/ImagePreviewGroup.js index 81c49e0..b58f7cc 100644 --- a/src/ImagePreviewGroup/ImagePreviewGroup.js +++ b/src/ImagePreviewGroup/ImagePreviewGroup.js @@ -3,6 +3,10 @@ import template from "./ImagePreviewGroup.html"; class ImagePreviewGroup { useModules = ["esNgAntd"]; + props = { + preview: Object, + }; + template = template; state = { @@ -21,34 +25,58 @@ class ImagePreviewGroup { return this.state.childrens.length - 1; } + setCurrent(value) { + this.state.current = value; + if ( + typeof this.props.preview === "object" && + typeof this.props.preview.onCurrentChange === "function" + ) { + this.props.preview.onCurrentChange(value); + } + } + + setVisible(value) { + this.state.visible = value; + if ( + typeof this.props.preview === "object" && + typeof this.props.preview.onVisibleChange === "function" + ) { + this.props.preview.onVisibleChange(value); + } + } + handleOpen(index) { - this.state.current = index; + this.setCurrent(index); this.state.src = this.state.childrens[index].state.src; - this.state.visible = true; + this.setVisible(true) } handleClose() { - this.state.visible = false; + this.setVisible(false) } handlePrev() { - this.state.current = - this.state.current > 0 ? this.state.current - 1 : 0; + this.setCurrent(this.state.current > 0 ? this.state.current - 1 : 0); this.state.src = this.state.childrens[this.state.current].state.src; } handleNext() { - this.state.current = + this.setCurrent( this.state.current < this.state.childrens.length - 1 ? this.state.current + 1 - : this.state.childrens.length - 1; + : this.state.childrens.length - 1 + ); this.state.src = this.state.childrens[this.state.current].state.src; } handlePreview() { + let className; + if ($attrs.class) { + className = ` ${$attrs.class}`; + } esNgAntd.createLayer( ` -
+
diff --git a/webpack.config.js b/webpack.config.js index 8aeae93..700bc4e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,11 +6,11 @@ module.exports = { entry: "./build/index.js", output: { // bpms - path: "/Users/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd", + // path: "/Users/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd", // boss // path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd", // mvo - // path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd", + path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd", // local // path: path.resolve(__dirname, "dist"), filename: "ng-antd.js", diff --git a/yarn.lock b/yarn.lock index e99e2bc..d8808a9 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.8.5: - version "0.8.5" - resolved "https://registry.npmmirror.com/beanboom/download/beanboom-0.8.5.tgz#f661201a4ab1f082e485bae35a74395222407783" - integrity sha512-hVP/QBRpUGHQxqpAAZHREN64LIfhbsIH1KWTItGNkIcT6u/rGrtqqv/m3xUDV7pxOV6UTU5vVaYgkoit38KfGA== +beanboom@0.8.7: + version "0.8.7" + resolved "https://registry.npmmirror.com/beanboom/download/beanboom-0.8.7.tgz#64c3b6b874bd8c271ee1dfd9babfaa9a621ec1d6" + integrity sha512-/P0cRqcxybyx/ynRd9K12n++OrVj/NTUW5lJQ6ToqbrY/JPIHvGQGZnnLyQ1thzSIKl+0jaz/pvHlRF1TYOc7Q== dependencies: "@babel/core" "^7.12.10" "@babel/plugin-proposal-class-properties" "^7.13.0" -- libgit2 0.21.2