no message

src/components/common/ImagePreview.vue

+<template>
+    <div style="width: 100vw !important; overflow: hidden">
+    <div class="column items-center justify-center">
+      <q-img width="100%" height="100%" :src="images[currentIndex]" :img-style="{'transform':scaleString+' '+rotateString}" spinner-color="primary" spinner-size="30px" fit="none" />
+      <div class="img-preview-tools-box" style="box-shadow: none !important">
+        <div class="img-preview-tools" style="box-shadow: none !important">
+          <div class="row items-center" style="box-shadow: none !important">
+            <q-icon name="first_page" size="28px" color="grey-2" class="q-mr-md cursor-pointer"  v-ripple @click="changeImageIndexHandler(-1)"/>
+            <q-icon name="last_page" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="changeImageIndexHandler(1)"/>
+            <q-icon name="rotate_right" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="rotateHandler(1)"/>
+            <q-icon name="rotate_left" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="rotateHandler(-1)"/>
+            <q-icon name="crop_free" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="zoomHandler(0)"/>
+            <q-icon name="zoom_out" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="zoomHandler(-1)"/>
+            <q-icon name="zoom_in" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="zoomHandler(1)"/>
+            <q-icon name="close" size="28px" color="grey-2" class="cursor-pointer" v-ripple v-close-popup/>
+          </div>
+        </div>
+    </div>
+    </div>
+    
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: ['current', 'images'],
+    data() {
+    return {
+        currentIndex: 0,
+        scale:1,
+        scaleString:'scale(1)',
+        rotate:0,
+        rotateString:'rotate(0deg)'
+    }
+    },
+    watch:{
+        current:(n,o)=>{
+            this.current = n
+            this.images = this.images
+            this.currentIndex=this.images.indexOf(this.current)
+            this.currentIndex = this.currentIndex==-1?0:this.currentIndex
+        }
+    },
+    mounted() {
+        this.currentIndex=this.images.indexOf(this.current)
+        this.currentIndex = this.currentIndex==-1?0:this.currentIndex
+    },
+    methods: {
+      
+        zoomHandler(num){
+          if(num==0){
+            this.scale=1
+          }
+          if(this.scale<3 && num>0){
+            this.scale+=0.25
+          }
+          if(this.scale>0.25 && num<0){
+            this.scale-=0.25
+          }
+          this.scaleString=`scale(${this.scale})`
+          console.log(this.scale,data.scaleString)
+        },
+        rotateHandler(num){
+          if(num==0){
+            this.rotate=0
+          }
+          if(num>0){
+            this.rotate+=90
+          }
+          if(num<0){
+            this.rotate-=90
+          }
+          this.rotateString=`rotate(${this.rotate}deg)`
+        },
+        changeImageIndexHandler(num){
+            this.scale=1
+            this.scaleString=`scale(${this.scale})`
+            this.rotate=0
+            this.rotateString=`rotate(${this.rotate}deg)`
+            let i = this.currentIndex
+            i+=num
+            i = i<0?this.images.length-1:i
+            i = i==this.images.length?0:i
+            this.currentIndex = i
+        }
+    }
+  }
+  </script>
+  
+  <style>
+  .img-preview-tools-box {
+    position: fixed;
+    z-index: 999999;
+    bottom: 100px;
+  }
+  .img-preview-tools-box .img-preview-tools {
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 48px;
+    padding: 10px 20px;
+    display: inline-block;
+  }
+  </style>
+  
+  
\ No newline at end of file