essa-platform / es-ng-antd

Blame view

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