safecheck-client 3.0.34-20 → 3.0.34-21

package/src/components/android/ImgSelfAndroid.vue

@@ -1,181 +1,181 @@
-<template>
-  <div>
-    <img :src="src" :alt="alt" @click="open()"   :width="width" :height="height"title="点击查看图片" :id="'vc-imgself-img-'+attach">
-    <div class="full-img" v-if="show">
-      <div @click="on"  draggable="false" >
-        <img :src="src" id="image" alt="" style="width: 100%" class="img-state" :alt="alt || ''">
-      </div>
-      <div class="btns">
-        <button type="button" name="button" class="btn btn-primary" @click="close()" :id="'vc-imgself-close-'+attach">关闭</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'
-      }
-    },
-    data () {
-      return {
-        show: false,
-        deg: 0,
-        power: 1
-      }
-    },
-    methods: {
-      open () {
-        this.deg = 0
-        this.power = 0.5
-        this.show = true
-      },
-      close () {
-        this.show = false
-      },
-      on(){
-        $(function (){
-          let result = {}
-          var eleImg = document.querySelector('#image');
-          var store = {
-            scale: 1
-          };
-          // 缩放处理
-          eleImg.addEventListener('touchstart', function (event) {
-            var touches = event.touches;
-            var events = touches[0];
-            var events2 = touches[1];
-
-            var x = eleImg.offsetLeft;
-            var y = eleImg.offsetTop;
-
-            if (!events) {
-              return;
-            }
-            event.preventDefault();
-            // 第一个触摸点的坐标
-            store.pageX = events.pageX;
-            store.pageY = events.pageY;
-            store.x = x;
-            store.y = y;
-            store.moveable = true;
-            if (events2) {
-              store.pageX2 = events2.pageX;
-              store.pageY2 = events2.pageY;
-            }
-            store.originScale = store.scale || 1;
-          },{ passive: false });
-          document.addEventListener('touchmove', function (event) {
-            if (!store.moveable) {
-              return;
-            }
-            event.preventDefault();
-            var touches = event.touches;
-            var events = touches[0];
-            var events2 = touches[1];
-            result.textContent = '触摸点数量：' + touches.length;
-            if (events2) {
-              if (!store.pageX2) {
-                store.pageX2 = events2.pageX;
-              }
-              if (!store.pageY2) {
-                store.pageY2 = events2.pageY;
-              }
-              var getDistance = function (start, stop) {
-                return Math.hypot(stop.x - start.x, stop.y - start.y);
-              };
-              var zoom = getDistance({
-                  x: events.pageX,
-                  y: events.pageY
-                }, {
-                  x: events2.pageX,
-                  y: events2.pageY
-                }) /
-                getDistance({
-                  x: store.pageX,
-                  y: store.pageY
-                }, {
-                  x: store.pageX2,
-                  y: store.pageY2
-                });
-              var newScale = store.originScale * zoom;
-              if (newScale > 4) {
-                newScale = 4;
-              }
-              store.scale = newScale;
-              eleImg.style.transform = 'scale('+ newScale +')';
-              result.textContent = 'zoom: '+ zoom + ', apply scale: ' + newScale;
-            }else{
-              var moveX = events.pageX - store.pageX;
-              var moveY = events.pageY - store.pageY;
-              var imagetop = store.x + moveX;
-              var imageleft = store.y + moveY;
-              eleImg.style.transform = `translate(${imagetop}px, ${imageleft}px) scale(${store.scale})`;
-            }
-          },{ passive: false });
-
-          document.addEventListener('touchend', function () {
-            store.moveable = false;
-
-            delete store.pageX2;
-            delete store.pageY2;
-          },{ passive: false });
-          document.addEventListener('touchcancel', function () {
-            store.moveable = false;
-            delete store.pageX2;
-            delete store.pageY2;
-          },{ passive: false });
-        });
-      }
-
-    },
-    ready(){
-    }
-  }
-</script>
-<style media="screen">
-  .full-img {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 20;
-    background: rgba(0,0,0,0.8);
-    display: flex;
-    overflow: auto;
-    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="open()"   :width="width" :height="height"title="点击查看图片" :id="'vc-imgself-img-'+attach">
+    <div class="full-img" v-if="show">
+      <div @click="on"  draggable="false" >
+        <img :src="src" id="image" alt="" style="width: 100%" class="img-state" :alt="alt || ''">
+      </div>
+      <div class="btns">
+        <button type="button" name="button" class="btn btn-primary" @click="close()" :id="'vc-imgself-close-'+attach">关闭</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'
+      }
+    },
+    data () {
+      return {
+        show: false,
+        deg: 0,
+        power: 1
+      }
+    },
+    methods: {
+      open () {
+        this.deg = 0
+        this.power = 0.5
+        this.show = true
+      },
+      close () {
+        this.show = false
+      },
+      on(){
+        $(function (){
+          let result = {}
+          var eleImg = document.querySelector('#image');
+          var store = {
+            scale: 1
+          };
+          // 缩放处理
+          eleImg.addEventListener('touchstart', function (event) {
+            var touches = event.touches;
+            var events = touches[0];
+            var events2 = touches[1];
+
+            var x = eleImg.offsetLeft;
+            var y = eleImg.offsetTop;
+
+            if (!events) {
+              return;
+            }
+            event.preventDefault();
+            // 第一个触摸点的坐标
+            store.pageX = events.pageX;
+            store.pageY = events.pageY;
+            store.x = x;
+            store.y = y;
+            store.moveable = true;
+            if (events2) {
+              store.pageX2 = events2.pageX;
+              store.pageY2 = events2.pageY;
+            }
+            store.originScale = store.scale || 1;
+          },{ passive: false });
+          document.addEventListener('touchmove', function (event) {
+            if (!store.moveable) {
+              return;
+            }
+            event.preventDefault();
+            var touches = event.touches;
+            var events = touches[0];
+            var events2 = touches[1];
+            result.textContent = '触摸点数量：' + touches.length;
+            if (events2) {
+              if (!store.pageX2) {
+                store.pageX2 = events2.pageX;
+              }
+              if (!store.pageY2) {
+                store.pageY2 = events2.pageY;
+              }
+              var getDistance = function (start, stop) {
+                return Math.hypot(stop.x - start.x, stop.y - start.y);
+              };
+              var zoom = getDistance({
+                  x: events.pageX,
+                  y: events.pageY
+                }, {
+                  x: events2.pageX,
+                  y: events2.pageY
+                }) /
+                getDistance({
+                  x: store.pageX,
+                  y: store.pageY
+                }, {
+                  x: store.pageX2,
+                  y: store.pageY2
+                });
+              var newScale = store.originScale * zoom;
+              if (newScale > 4) {
+                newScale = 4;
+              }
+              store.scale = newScale;
+              eleImg.style.transform = 'scale('+ newScale +')';
+              result.textContent = 'zoom: '+ zoom + ', apply scale: ' + newScale;
+            }else{
+              var moveX = events.pageX - store.pageX;
+              var moveY = events.pageY - store.pageY;
+              var imagetop = store.x + moveX;
+              var imageleft = store.y + moveY;
+              eleImg.style.transform = `translate(${imagetop}px, ${imageleft}px) scale(${store.scale})`;
+            }
+          },{ passive: false });
+
+          document.addEventListener('touchend', function () {
+            store.moveable = false;
+
+            delete store.pageX2;
+            delete store.pageY2;
+          },{ passive: false });
+          document.addEventListener('touchcancel', function () {
+            store.moveable = false;
+            delete store.pageX2;
+            delete store.pageY2;
+          },{ passive: false });
+        });
+      }
+
+    },
+    ready(){
+    }
+  }
+</script>
+<style media="screen">
+  .full-img {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 20;
+    background: rgba(0,0,0,0.8);
+    display: flex;
+    overflow: auto;
+    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>