essa-platform / es-ng-antd

Blame view

src/ImagePreviewGroup/ImagePreviewGroup.js 3.72 KB
Edit Raw Normal View History
3a3ecabe   Imshann   init 
1
2
3
 
  import template from "./ImagePreviewGroup.html";
  
  class ImagePreviewGroup {
1b6f912f   Imshann   优化 
4
5
 
      useModules = ["esNgAntd"];
4c519425   Imshann   优化图片组件 
6
7
8
9
 
      props = {
          preview: Object,
      };
3a3ecabe   Imshann   init 
10
 
      template = template;
1b6f912f   Imshann   优化 
11
12
13
14
15
16
17
18
 
  
      state = {
          current: 0,
          visible: false,
          src: null,
          childrens: [],
      };
3a3ecabe   Imshann   init 
19
 
      constructor() {
1b6f912f   Imshann   优化 
20
21
22
23
24
25
26
27
 
          this.handlePreview();
      }
  
      addChildren(children) {
          this.state.childrens.push(children);
          return this.state.childrens.length - 1;
      }
4c519425   Imshann   优化图片组件 
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
      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);
          }
      }
1b6f912f   Imshann   优化 
48
 
      handleOpen(index) {
4c519425   Imshann   优化图片组件 
49
 
          this.setCurrent(index);
1b6f912f   Imshann   优化 
50
 
          this.state.src = this.state.childrens[index].state.src;
4c519425   Imshann   优化图片组件 
51
 
          this.setVisible(true)
1b6f912f   Imshann   优化 
52
53
54
 
      }
  
      handleClose() {
4c519425   Imshann   优化图片组件 
55
 
          this.setVisible(false)
1b6f912f   Imshann   优化 
56
57
58
 
      }
  
      handlePrev() {
4c519425   Imshann   优化图片组件 
59
 
          this.setCurrent(this.state.current > 0 ? this.state.current - 1 : 0);
1b6f912f   Imshann   优化 
60
61
62
63
 
          this.state.src = this.state.childrens[this.state.current].state.src;
      }
  
      handleNext() {
4c519425   Imshann   优化图片组件 
64
 
          this.setCurrent(
1b6f912f   Imshann   优化 
65
66
 
              this.state.current < this.state.childrens.length - 1
                  ? this.state.current + 1
4c519425   Imshann   优化图片组件 
67
68
 
                  : this.state.childrens.length - 1
          );
1b6f912f   Imshann   优化 
69
70
71
72
 
          this.state.src = this.state.childrens[this.state.current].state.src;
      }
  
      handlePreview() {
4c519425   Imshann   优化图片组件 
73
74
75
76
 
          let className;
          if ($attrs.class) {
              className = ` ${$attrs.class}`;
          }
1b6f912f   Imshann   优化 
77
78
 
          esNgAntd.createLayer(
              `
4c519425   Imshann   优化图片组件 
79
 
              <div class="ant-image-preview-root${className}">
1b6f912f   Imshann   优化 
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
                  <div class="ant-image-preview-mask" ng-if="state.visible"></div>
                  <div class="ant-image-preview-wrap" ng-show="state.visible">
                      <div class="ant-image-preview">
                          <div class="ant-image-preview-content">
                              <div class="ant-image-preview-body">
                                  <ul class="ant-image-preview-operations">
                                      <li class="ant-image-preview-operations-operation">
                                          <span class="anticon anticon-close ant-image-preview-operations-icon" ng-click="handleClose()">
                                              <es-icon type="CloseOutlined"></es-icon>
                                          </span>
                                      </li> 
                                  </ul>
                                  <div class="ant-image-preview-img-wrapper">
                                      <img class="ant-image-preview-img" ng-src="{{state.src}}"/>
                                  </div>
                                  <div ng-class="{'ant-image-preview-switch-left': true, 'ant-image-preview-switch-left-disabled': state.current===0}" ng-click="handlePrev()">
                                      <es-icon type="LeftOutlined"></es-icon>
                                  </div>
                                  <div ng-class="{'ant-image-preview-switch-right': true,'ant-image-preview-switch-right-disabled': (state.childrens.length-1)===state.current}"  ng-click="handleNext()">
                                      <es-icon type="RightOutlined"></es-icon>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          `,
              $scope
          );
3a3ecabe   Imshann   init 
109
110
 
      }
  }