safecheck-client 3.0.39-74 → 3.0.39-75

package/src/components/Util/ImgSelfSafePlus.vue

@@ -1,218 +1,218 @@
-<template>
-  <div>
-    <img :src="src" :alt="alt" @click.stop="open()" :width="width" :height="height" title="点击查看图片"
-         :id="'vc-imgself-img-'+attach">
-    <div class="full-img" v-show="show" @contextmenu.prevent.stop="clearStyle">
-      <img :src="src2" alt="" class="img-state" :alt="alt || ''" @mousewheel="bigimg(this)" id="image" draggable="false"
-           @mousedown.prevent="dropImage" style="position:fixed">
-      <div class="btns row">
-        <button type="button" name="button" class="btn btn-primary" @click.stop="leftRevolve()">向左旋转</button>
-        <button type="button" name="button" class="btn btn-primary" @click.stop="rightRevolve()">向右旋转</button>
-        <button type="button" name="button" class="btn btn-primary" @click.stop="close()">关闭</button>
-        <button type="button" name="button" class="btn btn-primary" @click.stop="previousPage()">上一页</button>
-        <button type="button" name="button" class="btn btn-primary" @click.stop="nextPage()">下一页</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import $ from 'jquery'
-
-  export default {
-    props: {
-      src: {
-        type: String
-      },
-      width: {
-        default: 60
-      },
-      height: {
-        default: 60
-      },
-      alt: {
-        default: '图片加载失败'
-      },
-      attach: {
-        type: String,
-        default: 'name'
-      },
-      list: {
-        type: Array,
-        default: []
-      }
-    },
-    data() {
-      return {
-        show: false,
-        deg: 0,
-        odiv: null,
-        powerw: 1.0,
-        container:null,
-        positionX: null,
-        positionY: null,
-        powerh: 1.0,
-        src2:""
-      }
-    },
-    ready(){
-      const elementsToMount = document.getElementsByClassName("full-img");
-      this.container = document.createElement('div');
-      this.container.style.height = '0px'
-      // 将要挂载的元素放入新创建的 div中
-      for (let i = 0; i < elementsToMount.length; i++) {
-        this.container.appendChild(elementsToMount[i]);
-      }
-      // 将新创建的 div 挂载到 body 上
-      document.body.appendChild(this.container);
-      this.src2=this.src
-    },
-    beforeDestroy(){
-      // 销毁挂载的
-      if (this.container && this.container.parentNode) {
-        this.container.parentNode.removeChild(this.container);
-      }
-    },
-    methods: {
-      nextPage() {
-        console.log(this.list)
-        //当前图片，是最后一张图片
-        if (this.src2=== this.list[this.list.length - 1].f_overall_path) {
-            this.src2= this.list[0].f_overall_path
-          } else {
-          for (let i = 0; i < this.list.length; i++) {
-            if (this.src2=== this.list[i].f_overall_path) {
-              this.src2= this.list[i + 1].f_overall_path
-              break
-            }
-          }
-        }
-
-      },
-      previousPage() {
-        console.log(this.list)
-        //当前图片，是第一张图片
-        if (this.src2 === this.list[0].f_overall_path) {
-          this.src2= this.list[this.list.length - 1].f_overall_path
-        } else {
-          for (let i = 0; i < this.list.length; i++) {
-            if (this.src2=== this.list[i].f_overall_path) {
-              this.src2= this.list[i - 1].f_overall_path
-              break
-            }
-          }
-        }
-      },
-      clearStyle(e){
-        if (e === null) {
-          return
-        }
-        this.odiv = document.getElementById('image')
-        this.odiv.style.left = 500 + 'px';
-        this.odiv.style.top = -150 + 'px';
-      },
-      bigimg() {
-        if (event.wheelDelta > 0) {
-          this.powerh = this.powerh * 1.15
-          this.powerw = 1.15 * this.powerw
-        } else {
-          this.powerh = this.powerh * 0.85
-          this.powerw = 0.85 * this.powerw
-        }
-        this.imgState()
-      },
-      dropImage(e) {
-        if (e === null) {
-          return
-        }
-        this.odiv = e.target;
-        let disX = e.clientX - this.odiv.offsetLeft;
-        let disY = e.clientY - this.odiv.offsetTop;
-        document.onmousemove = (e) => {
-          let left = e.clientX - disX;
-          let top = e.clientY - disY;
-          this.positionX = top;
-          this.positionY = left;
-          this.odiv.style.left = left + 'px';
-          this.odiv.style.top = top + 'px';
-        };
-        document.onmouseup = (e) => {
-          document.onmousemove = null;
-          document.onmouseup = null;
-        };
-      },
-      open() {
-        this.deg = 0
-        this.powerw = 0.7
-        this.powerh = 0.8
-        $('.full-img').css({
-          'transform': 'rotate(' + this.deg + 'deg) scale(' + this.powerh + ' ,' + this.powerw + ')'
-        })
-        $('.container').css({
-          'opacity': '1'
-        })
-        this.show = true
-      },
-      close() {
-        this.show = false
-      },
-      leftRevolve() {
-        //tag
-        this.deg -= 90
-        this.imgState()
-      },
-      rightRevolve() {
-        //tag
-        this.deg += 90
-        this.imgState()
-      },
-      imgState() {
-        $('.img-state').css({
-          'transform': 'rotate(' + this.deg + 'deg) scale(' + this.powerh + ' ,' + this.powerw + ')'
-        })
-
-      }
-    },
-    watch:{
-      'src'(val){
-        if(val){
-          this.src2 = val
-        }
-      }
-    }
-  }
-</script>
-<style media="screen" scoped>
-  .full-img {
-    position: fixed;
-    width: 100%;
-    /*height: 1000px;*/
-    overflow: hidden;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1070;
-    opacity: 1;
-    background: rgba(0, 0, 0, 0.8);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-  }
-
-  .btns {
-    position: fixed;
-    bottom: 100px;
-    height: auto;
-  }
-
-  .btns button {
-    margin-right: 20px;
-  }
-
-  .img-state {
-
-  }
-</style>
+<template>
+  <div>
+    <img :src="src" :alt="alt" @click.stop="open()" :width="width" :height="height" title="点击查看图片"
+         :id="'vc-imgself-img-'+attach">
+    <div class="full-img" v-show="show" @contextmenu.prevent.stop="clearStyle">
+      <img :src="src2" alt="" class="img-state" :alt="alt || ''" @mousewheel="bigimg(this)" id="image" draggable="false"
+           @mousedown.prevent="dropImage" style="position:fixed">
+      <div class="btns row">
+        <button type="button" name="button" class="btn btn-primary" @click.stop="leftRevolve()">向左旋转</button>
+        <button type="button" name="button" class="btn btn-primary" @click.stop="rightRevolve()">向右旋转</button>
+        <button type="button" name="button" class="btn btn-primary" @click.stop="close()">关闭</button>
+        <button type="button" v-if="list.length>0" name="button" class="btn btn-primary" @click.stop="previousPage()">上一页</button>
+        <button type="button" v-if="list.length>0" name="button" class="btn btn-primary" @click.stop="nextPage()">下一页</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import $ from 'jquery'
+
+  export default {
+    props: {
+      src: {
+        type: String
+      },
+      width: {
+        default: 60
+      },
+      height: {
+        default: 60
+      },
+      alt: {
+        default: '图片加载失败'
+      },
+      attach: {
+        type: String,
+        default: 'name'
+      },
+      list: {
+        type: Array,
+        default: []
+      }
+    },
+    data() {
+      return {
+        show: false,
+        deg: 0,
+        odiv: null,
+        powerw: 1.0,
+        container:null,
+        positionX: null,
+        positionY: null,
+        powerh: 1.0,
+        src2:""
+      }
+    },
+    ready(){
+      const elementsToMount = document.getElementsByClassName("full-img");
+      this.container = document.createElement('div');
+      this.container.style.height = '0px'
+      // 将要挂载的元素放入新创建的 div中
+      for (let i = 0; i < elementsToMount.length; i++) {
+        this.container.appendChild(elementsToMount[i]);
+      }
+      // 将新创建的 div 挂载到 body 上
+      document.body.appendChild(this.container);
+      this.src2=this.src
+    },
+    beforeDestroy(){
+      // 销毁挂载的
+      if (this.container && this.container.parentNode) {
+        this.container.parentNode.removeChild(this.container);
+      }
+    },
+    methods: {
+      nextPage() {
+        console.log(this.list)
+        //当前图片，是最后一张图片
+        if (this.src2=== this.list[this.list.length - 1].f_overall_path) {
+            this.src2= this.list[0].f_overall_path
+          } else {
+          for (let i = 0; i < this.list.length; i++) {
+            if (this.src2=== this.list[i].f_overall_path) {
+              this.src2= this.list[i + 1].f_overall_path
+              break
+            }
+          }
+        }
+
+      },
+      previousPage() {
+        console.log(this.list)
+        //当前图片，是第一张图片
+        if (this.src2 === this.list[0].f_overall_path) {
+          this.src2= this.list[this.list.length - 1].f_overall_path
+        } else {
+          for (let i = 0; i < this.list.length; i++) {
+            if (this.src2=== this.list[i].f_overall_path) {
+              this.src2= this.list[i - 1].f_overall_path
+              break
+            }
+          }
+        }
+      },
+      clearStyle(e){
+        if (e === null) {
+          return
+        }
+        this.odiv = document.getElementById('image')
+        this.odiv.style.left = 500 + 'px';
+        this.odiv.style.top = -150 + 'px';
+      },
+      bigimg() {
+        if (event.wheelDelta > 0) {
+          this.powerh = this.powerh * 1.15
+          this.powerw = 1.15 * this.powerw
+        } else {
+          this.powerh = this.powerh * 0.85
+          this.powerw = 0.85 * this.powerw
+        }
+        this.imgState()
+      },
+      dropImage(e) {
+        if (e === null) {
+          return
+        }
+        this.odiv = e.target;
+        let disX = e.clientX - this.odiv.offsetLeft;
+        let disY = e.clientY - this.odiv.offsetTop;
+        document.onmousemove = (e) => {
+          let left = e.clientX - disX;
+          let top = e.clientY - disY;
+          this.positionX = top;
+          this.positionY = left;
+          this.odiv.style.left = left + 'px';
+          this.odiv.style.top = top + 'px';
+        };
+        document.onmouseup = (e) => {
+          document.onmousemove = null;
+          document.onmouseup = null;
+        };
+      },
+      open() {
+        this.deg = 0
+        this.powerw = 0.7
+        this.powerh = 0.8
+        $('.full-img').css({
+          'transform': 'rotate(' + this.deg + 'deg) scale(' + this.powerh + ' ,' + this.powerw + ')'
+        })
+        $('.container').css({
+          'opacity': '1'
+        })
+        this.show = true
+      },
+      close() {
+        this.show = false
+      },
+      leftRevolve() {
+        //tag
+        this.deg -= 90
+        this.imgState()
+      },
+      rightRevolve() {
+        //tag
+        this.deg += 90
+        this.imgState()
+      },
+      imgState() {
+        $('.img-state').css({
+          'transform': 'rotate(' + this.deg + 'deg) scale(' + this.powerh + ' ,' + this.powerw + ')'
+        })
+
+      }
+    },
+    watch:{
+      'src'(val){
+        if(val){
+          this.src2 = val
+        }
+      }
+    }
+  }
+</script>
+<style media="screen" scoped>
+  .full-img {
+    position: fixed;
+    width: 100%;
+    /*height: 1000px;*/
+    overflow: hidden;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1070;
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+  }
+
+  .btns {
+    position: fixed;
+    bottom: 100px;
+    height: auto;
+  }
+
+  .btns button {
+    margin-right: 20px;
+  }
+
+  .img-state {
+
+  }
+</style>