essa-platform / es-ng-antd

Commit 4c519425caebd6ffcae13ddc7234db8a399dd414

Authored by Imshann
1 parent 1b6f912f

优化图片组件

Showing 5 changed files with 85 additions and 24 deletions   Show diff stats
Inline Side-by-side
build/ImagePreviewGroup/ImagePreviewGroup.js
  Show/Hide comments   View file @4c51942
... ... @@ -7,8 +7,11 @@ angular
7 7 restrict: "E",
8 8 transclude: true,
9 9 replace: true,
  10 + scope: {
  11 + preview: "=",
  12 + },
10 13 template: template,
11   - controller: function ($scope, $element) {
  14 + controller: function ($scope, $element, $attrs) {
12 15 this.getContext = function () {
13 16 return $scope;
14 17 };
... ... @@ -25,36 +28,66 @@ angular
25 28 return $scope.state.childrens.length - 1;
26 29 };
27 30  
  31 + $scope.setCurrent = function (value) {
  32 + $scope.state.current = value;
  33 +
  34 + if (
  35 + typeof $scope.preview === "object" &&
  36 + typeof $scope.preview.onCurrentChange === "function"
  37 + ) {
  38 + $scope.preview.onCurrentChange(value);
  39 + }
  40 + };
  41 +
  42 + $scope.setVisible = function (value) {
  43 + $scope.state.visible = value;
  44 +
  45 + if (
  46 + typeof $scope.preview === "object" &&
  47 + typeof $scope.preview.onVisibleChange === "function"
  48 + ) {
  49 + $scope.preview.onVisibleChange(value);
  50 + }
  51 + };
  52 +
28 53 $scope.handleOpen = function (index) {
29   - $scope.state.current = index;
  54 + $scope.setCurrent(index);
30 55 $scope.state.src = $scope.state.childrens[index].state.src;
31   - $scope.state.visible = true;
  56 + $scope.setVisible(true);
32 57 };
33 58  
34 59 $scope.handleClose = function () {
35   - $scope.state.visible = false;
  60 + $scope.setVisible(false);
36 61 };
37 62  
38 63 $scope.handlePrev = function () {
39   - $scope.state.current =
40   - $scope.state.current > 0 ? $scope.state.current - 1 : 0;
  64 + $scope.setCurrent(
  65 + $scope.state.current > 0 ? $scope.state.current - 1 : 0
  66 + );
41 67 $scope.state.src =
42 68 $scope.state.childrens[$scope.state.current].state.src;
43 69 };
44 70  
45 71 $scope.handleNext = function () {
46   - $scope.state.current =
  72 + $scope.setCurrent(
47 73 $scope.state.current < $scope.state.childrens.length - 1
48 74 ? $scope.state.current + 1
49   - : $scope.state.childrens.length - 1;
  75 + : $scope.state.childrens.length - 1
  76 + );
50 77 $scope.state.src =
51 78 $scope.state.childrens[$scope.state.current].state.src;
52 79 };
53 80  
54 81 $scope.handlePreview = function () {
  82 + let className;
  83 +
  84 + if ($attrs.class) {
  85 + className = ` ${$attrs.class}`;
  86 + }
  87 +
55 88 esNgAntd.createLayer(
56 89 `
57   - <div class="ant-image-preview-root">
  90 + <div class="ant-image-preview-root${className}">
58 91 <div class="ant-image-preview-mask" ng-if="state.visible"></div>
59 92 <div class="ant-image-preview-wrap" ng-show="state.visible">
60 93 <div class="ant-image-preview">
... ...
package.json
  Show/Hide comments   View file @4c51942
... ... @@ -11,7 +11,7 @@
11 11 "devDependencies": {
12 12 "@ant-design/icons-svg": "^4.2.1",
13 13 "antd": "^4.18.2",
14   - "beanboom": "0.8.5",
  14 + "beanboom": "0.8.7",
15 15 "css-loader": "^6.5.1",
16 16 "html-loader": "^3.0.1",
17 17 "style-loader": "^3.3.1",
... ...
src/ImagePreviewGroup/ImagePreviewGroup.js
  Show/Hide comments   View file @4c51942
... ... @@ -3,6 +3,10 @@ import template from &quot;./ImagePreviewGroup.html&quot;;
3 3 class ImagePreviewGroup {
4 4 useModules = ["esNgAntd"];
5 5  
  6 + props = {
  7 + preview: Object,
  8 + };
  9 +
6 10 template = template;
7 11  
8 12 state = {
... ... @@ -21,34 +25,58 @@ class ImagePreviewGroup {
21 25 return this.state.childrens.length - 1;
22 26 }
23 27  
  28 + setCurrent(value) {
  29 + this.state.current = value;
  30 + if (
  31 + typeof this.props.preview === "object" &&
  32 + typeof this.props.preview.onCurrentChange === "function"
  33 + ) {
  34 + this.props.preview.onCurrentChange(value);
  35 + }
  36 + }
  37 +
  38 + setVisible(value) {
  39 + this.state.visible = value;
  40 + if (
  41 + typeof this.props.preview === "object" &&
  42 + typeof this.props.preview.onVisibleChange === "function"
  43 + ) {
  44 + this.props.preview.onVisibleChange(value);
  45 + }
  46 + }
  47 +
24 48 handleOpen(index) {
25   - this.state.current = index;
  49 + this.setCurrent(index);
26 50 this.state.src = this.state.childrens[index].state.src;
27   - this.state.visible = true;
  51 + this.setVisible(true)
28 52 }
29 53  
30 54 handleClose() {
31   - this.state.visible = false;
  55 + this.setVisible(false)
32 56 }
33 57  
34 58 handlePrev() {
35   - this.state.current =
36   - this.state.current > 0 ? this.state.current - 1 : 0;
  59 + this.setCurrent(this.state.current > 0 ? this.state.current - 1 : 0);
37 60 this.state.src = this.state.childrens[this.state.current].state.src;
38 61 }
39 62  
40 63 handleNext() {
41   - this.state.current =
  64 + this.setCurrent(
42 65 this.state.current < this.state.childrens.length - 1
43 66 ? this.state.current + 1
44   - : this.state.childrens.length - 1;
  67 + : this.state.childrens.length - 1
  68 + );
45 69 this.state.src = this.state.childrens[this.state.current].state.src;
46 70 }
47 71  
48 72 handlePreview() {
  73 + let className;
  74 + if ($attrs.class) {
  75 + className = ` ${$attrs.class}`;
  76 + }
49 77 esNgAntd.createLayer(
50 78 `
51   - <div class="ant-image-preview-root">
  79 + <div class="ant-image-preview-root${className}">
52 80 <div class="ant-image-preview-mask" ng-if="state.visible"></div>
53 81 <div class="ant-image-preview-wrap" ng-show="state.visible">
54 82 <div class="ant-image-preview">
... ...
webpack.config.js
  Show/Hide comments   View file @4c51942
... ... @@ -6,11 +6,11 @@ module.exports = {
6 6 entry: "./build/index.js",
7 7 output: {
8 8 // bpms
9   - path: "/Users/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd",
  9 + // path: "/Users/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd",
10 10 // boss
11 11 // path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd",
12 12 // mvo
13   - // path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd",
  13 + path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd",
14 14 // local
15 15 // path: path.resolve(__dirname, "dist"),
16 16 filename: "ng-antd.js",
... ...
yarn.lock
  Show/Hide comments   View file @4c51942
... ... @@ -1320,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3:
1320 1320 dependencies:
1321 1321 "@babel/helper-define-polyfill-provider" "^0.2.4"
1322 1322  
1323   -beanboom@0.8.5:
1324   - version "0.8.5"
1325   - resolved "https://registry.npmmirror.com/beanboom/download/beanboom-0.8.5.tgz#f661201a4ab1f082e485bae35a74395222407783"
1326   - integrity sha512-hVP/QBRpUGHQxqpAAZHREN64LIfhbsIH1KWTItGNkIcT6u/rGrtqqv/m3xUDV7pxOV6UTU5vVaYgkoit38KfGA==
  1323 +beanboom@0.8.7:
  1324 + version "0.8.7"
  1325 + resolved "https://registry.npmmirror.com/beanboom/download/beanboom-0.8.7.tgz#64c3b6b874bd8c271ee1dfd9babfaa9a621ec1d6"
  1326 + integrity sha512-/P0cRqcxybyx/ynRd9K12n++OrVj/NTUW5lJQ6ToqbrY/JPIHvGQGZnnLyQ1thzSIKl+0jaz/pvHlRF1TYOc7Q==
1327 1327 dependencies:
1328 1328 "@babel/core" "^7.12.10"
1329 1329 "@babel/plugin-proposal-class-properties" "^7.13.0"
... ...