essa-platform / es-ng-antd

Blame view

src/ImagePreviewGroup/ImagePreviewGroup.js 3.73 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
 
                  <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()">
81f8a467   Imshann   调整组件前缀 
88
 
                                              <antd-icon type="CloseOutlined"></antd-icon>
1b6f912f   Imshann   优化 
89
90
91
92
93
94
95
 
                                          </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()">
81f8a467   Imshann   调整组件前缀 
96
 
                                      <antd-icon type="LeftOutlined"></antd-icon>
1b6f912f   Imshann   优化 
97
98
 
                                  </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()">
81f8a467   Imshann   调整组件前缀 
99
 
                                      <antd-icon type="RightOutlined"></antd-icon>
1b6f912f   Imshann   优化 
100
101
102
103
104
105
106
107
108
 
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          `,
              $scope
          );
3a3ecabe   Imshann   init 
109
110
 
      }
  }