个人文档的预览图片的缩放和旋转功能实现

package.json

@@ -53,6 +53,7 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "v-selectpage": "^2.1.4",
+    "v-viewer": "^1.6.4",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",

src/main.js

@@ -2,6 +2,31 @@ import Vue from 'vue'
 
 import Cookies from 'js-cookie'
 
+//引入预览图片样式
+// import Viewer from 'v-viewer'
+// import 'viewerjs/dist/viewer.css'
+// Vue.use(Viewer)
+// Viewer.setDefaults({
+//   Options:{
+//     'inline': true, // 启用 inline 模式
+//     'button': true, // 显示右上角关闭按钮
+//     'navbar': true, // 显示缩略图导航
+//     'title': true, // 显示当前图片的标题
+//     'toolbar': true, // 显示工具栏
+//     'tooltip': true, // 显示缩放百分比
+//     'movable': true, // 图片是否可移动
+//     'zoomable': true, // 图片是否可缩放
+//     'rotatable': true, // 图片是否可旋转
+//     'scalable': true, // 图片是否可翻转
+//     'transition': true, // 使用 CSS3 过度
+//     'fullscreen': true, // 播放时是否全屏
+//     'keyboard': true, // 是否支持键盘
+//     'url': 'data-source' // 设置大图片的 url
+//   }
+// })
+
+
+
 //引入v-selectpage组件
 import vSelectPage from 'v-selectpage'
 
@@ -99,4 +124,12 @@ Vue.use(vSelectPage, {
       axios.post(url, params).then(resp => resolve(resp), resp => reject(resp))
     })
   }
+})
+
+router.beforeEach((to, from, next) => {
+  /* 路由发生变化修改页面title */
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  next()
 })

src/router/index.js

@@ -116,10 +116,6 @@ export const constantRoutes = [{
           path: 'Sto/doc/:groupId(\\d+)',
           component: () => import('@/views1/File/Storage/StoView.vue'),
         },
-        {
-          path: 'individual/pre/user/:docId(\\d+)',
-          component: () => import('@/views1/File/Individual/Pre/PreView.vue'),
-        },
       ]
       },
       {
@@ -251,6 +247,13 @@ export const constantRoutes = [{
     component: () => import('@/views1/LoginView.vue'),
     hidden: true,
   },
+  {
+    path: '/individual/pre/user/:docId(\\d+)',
+    component: () => import('@/views1/File/Individual/Pre/PreView.vue'),
+    meta:{
+      title: '预览'
+  }
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载

src/views1/File/Individual/IndividualView.vue

@@ -406,12 +406,30 @@
             <el-button @click="cancel">取 消</el-button>
           </div>
         </el-dialog>
+
+        <!-- 预览对话框 -->
+      <div class="dhk" v-if="a">
+       <video :src="vid" controls v-if="vid1"></video>
+       <audio :src="aud" controls v-if="aud1"></audio>
+
+       <div class="image-container" v-if="img1">
+        <el-image :src="imgg" ref="imageRef" style="max-width: 100%"/>
+        <el-button-group>
+      <el-button icon="el-icon-refresh" @click="rotate(-90)"></el-button>
+      <el-button icon="el-icon-refresh-right" @click="rotate(90)"></el-button>
+      <el-button icon="el-icon-zoom-in" @click="scale(0.1)"></el-button>
+      <el-button icon="el-icon-zoom-out" @click="scale(-0.1)"></el-button>
+    </el-button-group>
+  </div>
+        <el-button class="gb" icon="el-icon-close" circle @click="gb" />
+      </div>
       </div>
     </div>
   </div>
 </template>
   
 <script>
+
 import "@/styles1/element-ui1.scss";
 
 import { listTag } from "@/api/doc/tag.js";
@@ -443,6 +461,22 @@ export default {
   },
   data() {
     return {
+      //预览图片的旋转缩放
+      scalePercentage: 1,
+      rotationAngle: 0,
+    
+    // 预览界面
+    a:false,
+    
+    //视频路径和显示
+    vid:"",
+    vid1:false,
+    //音频路径和显示
+    aud:"",
+    aud1:false,
+    //图片路径和显示
+    imgg:"",
+    img1:false,
       //标签列表
       tags: [
         // { name: '十四大', id: 0 },
@@ -528,6 +562,8 @@ export default {
   created() {
     this.dirTree();
   },
+
+
   watch: {
     "form.docPath": function (path, old) {
       if (path && path.lastIndexOf("/") > -1) {
@@ -537,6 +573,24 @@ export default {
     },
   },
   methods: {
+    //预览图片的缩放
+    rotate(angle) {
+      this.rotationAngle += angle;
+      const image = this.$refs.imageRef.$el.querySelector("img");
+      image.style.transform = `rotate(${this.rotationAngle}deg)`;
+    },
+      //预览图片的旋转
+    scale(delta) {
+      this.scalePercentage += delta;
+      const image = this.$refs.imageRef.$el.querySelector("img");
+      image.style.transform = `scale(${this.scalePercentage})`;
+    },
+
+    // 预览关闭
+    gb(){
+    this.a=false;
+    },
+
     //选择标签关闭
     handleClose(tag) {
       this.form.tagList.map((i, index) => {
@@ -588,21 +642,21 @@ export default {
       // this.form.tagList.push({
       //   tagName:inputValue,
       // });
+
       //查询输入的标签在固定标签里是否存在
       var Newtags = this.tags.find((value) => value.tagName == inputValue);
       // console.log(a);
+      //删除标签
     if(this.dynamicTags.indexOf(inputValue)!=-1){
       this.dynamicTags.pop()
       this.form.tagList.pop()
     }
-
-
-
       if (inputValue) {
         this.dynamicTags.push(inputValue);
       }
       this.inputVisible = false;
       this.inputValue = "";
+      //判断输入的标签在固定标签里是否存在，存在则换成固定标签
       if (Newtags) {
         this.form.tagList.push({
           tagId: Newtags.tagId,
@@ -646,23 +700,62 @@ export default {
     handleDownload(row) {
       location.href = row.docPath;
     },
+    
     //预览
     handlePreview(row) {
-      row.isEdit = false;
-      this.$tab.openPage(
-        "文件[" + row.docName + "]预览",
-        "/home/file/individual/Pre/user/" + row.docId,
-        row
+      // row.isEdit = false;
+      // this.$tab.openPage(
+      //   // "文件[" + row.docName + "]预览",
+      //   // document.title = row.docName,
+      //   // window.open("/individual/Pre/user/" + row.docId, '_blank'),
+      //   // row
+      // );
+
+     //图片后缀名
+      var pictures= ['jpeg','tiff','raw','bmp','gif','png' , 'jpg'];
+      //音频后缀名
+      var audios=['mid', 'mp3', 'wav', 'wma', 'ra', 'ogg', 'flac', 'aac', 'ape'];
+      //视频后缀名
+      var videos= ['asf', 'avi', 'mp4', 'ogm', 'ifo', 'mpg', 'mov', 'mpeg', 'mpg', 'vob', 'wmv', 'rm' , 'rmvb'];
+
+      //判断后缀名
+      if(videos.some(item=>item==row.docType)){
+        this.a=true;
+        this.vid1=true;
+        this.aud1=false;
+        this.img1=false;
+        this.vid=row.docPath;
+      }else if(audios.some(item=>item==row.docType)){
+        this.a=true;
+        this.aud1=true;
+        this.vid1=false;
+        this.img1=false;
+        this.aud=row.docPath;
+      }else if(pictures.some(item=>item==row.docType)){
+        this.a=true;
+        this.aud1=false;
+        this.vid1=false;
+        this.img1=true;
+        this.imgg=row.docPath;
+      }
+      else{
+        this.$tab.openPage(
+        window.open("/individual/Pre/user/" + row.docId, '_blank'),
       );
-      // console.log(this.form.docType);
+      // console.log(111);
+      }
+      // console.log(row.docPath);
+      // console.log(vid);
     },
+
     //在线编辑
     handleEdit(row) {
-      row.isEdit = true;
+      // row.isEdit = true;
       this.$tab.openPage(
-        "文件[" + row.docName + "]在线编辑",
-        "/doc/oo-edit/index/" + row.docId,
-        row
+        // "文件[" + row.docName + "]在线编辑",
+        // "/doc/oo-edit/index/" + row.docId,
+        window.open("/individual/Pre/user/" + row.docId, '_blank'),
+        // row
       );
     },
     //先获取左边目录树，拿到目录ID和spaceId才能查询
@@ -960,6 +1053,37 @@ export default {
       }
     }
   }
+  .dhk{
+    width: calc(100vw * (1500 / 1920));
+    height: calc(100vh * (850 / 1080));
+    // background: salmon;
+    background: #0F1540FF;
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    z-index: 99;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .gb{
+    position: absolute;
+    top: 0;
+    right: 0; 
+    }
+    video{
+     width: calc(100vw * (1440 / 1920));
+     height: calc(100vh * (810 / 1080)); 
+    }
+    .el-image{
+     width: calc(100vw * (960 / 1920));
+     height: calc(100vh * (720 / 1080)); 
+    }
+     .el-button-group {
+      position: absolute;
+      top: 10%;
+      right: 1%;
+    }
+  }
 }
 //标签按钮
 ::v-deep .el-tag {
@@ -1121,6 +1245,8 @@ export default {
     vertical-align: bottom;
   }
 }
+
+
 </style>
   
 

src/views1/File/Individual/Pre/PreView.vue

@@ -3,7 +3,7 @@
   <div v-if='show' class='qualityManual-container-office'>
     <vab-only-office :option='option' />
   </div>
-  <el-button type="primary" plain icon="el-icon-arrow-left" size="mini" @click="handleClose" class="fh">返回</el-button>
+  
 </div>
 </template>
 
@@ -37,14 +37,6 @@
       this.getFile();
     },
     methods: {
-        // 返回按钮
-        handleClose() {
-        const obj = {
-          path: "/home/file/individual"
-        };
-        this.$tab.closeOpenPage(obj);
-      },
-
       getFile() {
         //获取当前登录用户名：this.$store.state.user.name
         //获取当前登录用户ID：this.$store.state.user.uid

src/views1/File/Part/PartView.vue

@@ -358,6 +358,24 @@
             <el-button @click="cancel">取 消</el-button>
           </div>
         </el-dialog>
+
+
+               <!-- 预览对话框 -->
+      <div class="dhk" v-if="a">
+       <video :src="vid" controls v-if="vid1"></video>
+       <audio :src="aud" controls v-if="aud1"></audio>
+
+       <div class="image-container" v-if="img1">
+        <el-image :src="imgg" ref="imageRef" style="max-width: 100%"/>
+        <el-button-group>
+      <el-button icon="el-icon-refresh" @click="rotate(-90)"></el-button>
+      <el-button icon="el-icon-refresh-right" @click="rotate(90)"></el-button>
+      <el-button icon="el-icon-zoom-in" @click="scale(0.1)"></el-button>
+      <el-button icon="el-icon-zoom-out" @click="scale(-0.1)"></el-button>
+    </el-button-group>
+  </div>
+        <el-button class="gb" icon="el-icon-close" circle @click="gb" />
+      </div>
       </div>
     </div>
   </div>
@@ -367,21 +385,19 @@
 import "@/styles1/element-ui1.scss";
 
 import {
-  listInfo,
-  getInfo,
-  delInfo,
-  addInfo,
-  updateInfo,
-} from "@/api/doc/info";
-import {
-  listDir,
-  getDir,
-  delDir,
-  addDir,
-  updateDir,
-  personalList,
-} from "@/api/doc/dir";
-import { listLevel } from "@/api/doc/level";
+    listInfo,
+    getInfo,
+    delInfo,
+    addInfo,
+    updateInfo
+  } from "@/api/doc/info";
+  import {
+    deptList
+  } from "@/api/doc/dir";
+  import {
+    listLevel
+  } from "@/api/doc/level";
+
 
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
@@ -393,6 +409,22 @@ export default {
   },
   data() {
     return {
+    //预览图片的旋转缩放
+    scalePercentage: 1,
+    rotationAngle: 0,
+    
+    // 预览界面
+    a:false,
+    
+    //视频路径和显示
+    vid:"",
+    vid1:false,
+    //音频路径和显示
+    aud:"",
+    aud1:false,
+    //图片路径和显示
+    imgg:"",
+    img1:false,
     //标签列表
     tags: [
           { name: '十四大', id:0 },
@@ -484,6 +516,23 @@ export default {
     },
   },
   methods: {
+      //预览图片的缩放
+      rotate(angle) {
+      this.rotationAngle += angle;
+      const image = this.$refs.imageRef.$el.querySelector("img");
+      image.style.transform = `rotate(${this.rotationAngle}deg)`;
+    },
+      //预览图片的旋转
+    scale(delta) {
+      this.scalePercentage += delta;
+      const image = this.$refs.imageRef.$el.querySelector("img");
+      image.style.transform = `scale(${this.scalePercentage})`;
+    },
+
+    // 预览关闭
+    gb(){
+    this.a=false;
+    },
     //选择标签
     handleClose(tag) {
       this.form.tagList.map((i,index)=>{
@@ -547,7 +596,38 @@ export default {
     },
     //分享
     handleShare(row) {
-      this.$router.push("/home/file/individual/share/user/" + row.docId);
+     //图片后缀名
+     var tp= ['jpeg','tiff','raw','bmp','gif','png' , 'jpg'];
+      //音频后缀名
+      var yp=['mid', 'mp3', 'wav', 'wma', 'ra', 'ogg', 'flac', 'aac', 'ape'];
+      //视频后缀名
+      var sp= ['asf', 'avi', 'mp4', 'ogm', 'ifo', 'mpg', 'mov', 'mpeg', 'mpg', 'vob', 'wmv', 'rm' , 'rmvb'];
+
+      //判断后缀名
+      if(sp.some(item=>item==row.docType)){
+        this.a=true;
+        this.vid1=true;
+        this.aud1=false;
+        this.img1=false;
+        this.vid=row.docPath;
+      }else if(yp.some(item=>item==row.docType)){
+        this.a=true;
+        this.aud1=true;
+        this.vid1=false;
+        this.img1=false;
+        this.aud=row.docPath;
+      }else if(tp.some(item=>item==row.docType)){
+        this.a=true;
+        this.aud1=false;
+        this.vid1=false;
+        this.img1=true;
+        this.imgg=row.docPath;
+      }
+      else{
+        this.$tab.openPage(
+        window.open("/individual/Pre/user/" + row.docId, '_blank'),
+      );
+      }
     },
     /**下载按钮操作*/
     handleDownload(row) {
@@ -569,22 +649,22 @@ export default {
     },
     //先获取左边目录树，拿到目录ID和spaceId才能查询
     dirTree() {
-      this.loading = true;
-      personalList().then((response) => {
-        this.dirId = response.data[0].dirId;
-        this.spaceId = response.data[0].spaceId;
-        this.dirList = this.handleTree(response.data, "dirId");
+        this.loading = true;
+        deptList().then(response => {
+          this.dirId = response.data[0].dirId;
+          this.spaceId = response.data[0].spaceId;
+          this.dirList = this.handleTree(response.data, "dirId");
 
-        this.queryParams.dirId = this.dirId;
-        this.queryParams.searchValue = this.spaceId;
-        this.getList();
-        //获取文件级别数据
-        listLevel().then((response) => {
-          this.levelOptions = response.rows;
+          this.queryParams.dirId = this.dirId;
+          this.queryParams.searchValue = this.spaceId;
+          this.getList();
+          //获取文件级别数据
+          listLevel().then(response => {
+            this.levelOptions = response.rows;
+          });
+          this.loading = false;
         });
-        this.loading = false;
-      });
-    },
+      },
     /**处理文档级别数据*/
     fileLevelData(row, col, value) {
       const obj = this.levelOptions.find((item) => item.levelId == value);
@@ -644,15 +724,10 @@ export default {
         tagList:[],
       };
       this.resetForm("form");
+      this.dynamicTags=[]
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      const para = {
-        tagId: 123, 
-      }
-      console.log(this.queryParams.params);
-      this.queryParams.params = para;
-
       this.queryParams.pageNum = 1;
       this.getList();
     },
@@ -661,6 +736,7 @@ export default {
       this.resetForm("queryForm");
       this.queryParams.dirId = this.dirId;
       this.queryParams.searchValue = this.spaceId;
+      this.queryParams.params.tagId = null;
       this.handleQuery();
     },
     // 多选框选中数据
@@ -683,6 +759,7 @@ export default {
         this.form = response.data;
         this.open = true;
         this.title = "修改文件基本信息";
+        this.dynamicTags = this.form.tagList.map(item=>item.tagName);
       });
     },
     /** 提交按钮 */
@@ -847,6 +924,37 @@ export default {
       }
     }
   }
+  .dhk{
+    width: calc(100vw * (1500 / 1920));
+    height: calc(100vh * (850 / 1080));
+    // background: salmon;
+    background: #0F1540FF;
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    z-index: 99;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .gb{
+    position: absolute;
+    top: 0;
+    right: 0; 
+    }
+    video{
+     width: calc(100vw * (1440 / 1920));
+     height: calc(100vh * (810 / 1080)); 
+    }
+    .el-image{
+     width: calc(100vw * (960 / 1920));
+     height: calc(100vh * (720 / 1080)); 
+    }
+     .el-button-group {
+      position: absolute;
+      top: 10%;
+      right: 1%;
+    }
+  }
 }
 //标签按钮
 ::v-deep .el-tag {

src/views1/File/Storage/StoView.vue

@@ -80,7 +80,20 @@
           <el-table-column label="修改时间" align="center" prop="updateTime" />
           <el-table-column label="文件年份" align="center" prop="createYear" />
           <el-table-column label="文件类型" align="center" prop="docType" />
-          <el-table-column label="标签" align="center" prop="tagName" />
+          <el-table-column
+                label="标签"
+                align="center"
+                prop="tagName"
+                width="250"
+              >
+                <template slot-scope="scope">
+                  <div v-if="scope.row.tagList != []">
+                    <el-tag v-for="item in scope.row.tagList" :key="item.tagId">
+                      {{ item.tagName }}
+                    </el-tag>
+                  </div>
+                </template>
+              </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
               <el-button size="mini" type="text" icon="el-icon-view" @click="handlePreview(scope.row)">预览</el-button>
@@ -195,7 +208,25 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+         <!-- 预览对话框 -->
+         <div class="dhk" v-if="a">
+       <video :src="vid" controls v-if="vid1"></video>
+       <audio :src="aud" controls v-if="aud1"></audio>
+
+       <div class="image-container" v-if="img1">
+        <el-image :src="imgg" ref="imageRef" style="max-width: 100%"/>
+        <el-button-group>
+      <el-button icon="el-icon-refresh" @click="rotate(-90)"></el-button>
+      <el-button icon="el-icon-refresh-right" @click="rotate(90)"></el-button>
+      <el-button icon="el-icon-zoom-in" @click="scale(0.1)"></el-button>
+      <el-button icon="el-icon-zoom-out" @click="scale(-0.1)"></el-button>
+    </el-button-group>
+  </div>
+  <el-button class="gb" icon="el-icon-close" circle @click="gb" />
         </div>
+
+</div>
       </div>
     </div>
   </template>
@@ -228,7 +259,23 @@ import { listTag } from "@/api/doc/tag.js";
     },
     data() {
       return {
-              //标签列表
+     //预览图片的旋转缩放
+      scalePercentage: 1,
+      rotationAngle: 0,
+    
+    // 预览界面
+    a:false,
+    
+    //视频路径和显示
+    vid:"",
+    vid1:false,
+    //音频路径和显示
+    aud:"",
+    aud1:false,
+    //图片路径和显示
+    imgg:"",
+    img1:false,
+      //标签列表
       tags: [
         // { name: '十四大', id: 0 },
         // { name: '领导讲话', id: 1 },
@@ -321,6 +368,23 @@ import { listTag } from "@/api/doc/tag.js";
       }
     },
     methods: {
+        //预览图片的缩放
+    rotate(angle) {
+      this.rotationAngle += angle;
+      const image = this.$refs.imageRef.$el.querySelector("img");
+      image.style.transform = `rotate(${this.rotationAngle}deg)`;
+    },
+      //预览图片的旋转
+    scale(delta) {
+      this.scalePercentage += delta;
+      const image = this.$refs.imageRef.$el.querySelector("img");
+      image.style.transform = `scale(${this.scalePercentage})`;
+    },
+
+    // 预览关闭
+    gb(){
+    this.a=false;
+    },
          //选择标签关闭
     handleClose(tag) {
       this.form.tagList.map((i, index) => {
@@ -432,8 +496,39 @@ import { listTag } from "@/api/doc/tag.js";
       },
       //预览
       handlePreview(row) {
-        row.isEdit = false;
-        this.$tab.openPage("文件[" + row.docName + "]预览", '/doc/oo-edit/index/' + row.docId, row);
+           //图片后缀名
+      var tp= ['jpeg','tiff','raw','bmp','gif','png' , 'jpg'];
+      //音频后缀名
+      var yp=['mid', 'mp3', 'wav', 'wma', 'ra', 'ogg', 'flac', 'aac', 'ape'];
+      //视频后缀名
+      var sp= ['asf', 'avi', 'mp4', 'ogm', 'ifo', 'mpg', 'mov', 'mpeg', 'mpg', 'vob', 'wmv', 'rm' , 'rmvb'];
+
+      //判断后缀名
+      if(sp.some(item=>item==row.docType)){
+        this.a=true;
+        this.vid1=true;
+        this.aud1=false;
+        this.img1=false;
+        this.vid=row.docPath;
+      }else if(yp.some(item=>item==row.docType)){
+        this.a=true;
+        this.aud1=true;
+        this.vid1=false;
+        this.img1=false;
+        this.aud=row.docPath;
+      }else if(tp.some(item=>item==row.docType)){
+        this.a=true;
+        this.aud1=false;
+        this.vid1=false;
+        this.img1=true;
+        this.imgg=row.docPath;
+      }
+      else{
+        this.$tab.openPage(
+        window.open("/individual/Pre/user/" + row.docId, '_blank'),
+      );
+      // console.log(111);
+      }
       },
       //在线编辑
       handleEdit(row) {
@@ -720,6 +815,37 @@ import { listTag } from "@/api/doc/tag.js";
       }
       }
     }
+    .dhk{
+    width: calc(100vw * (1500 / 1920));
+    height: calc(100vh * (850 / 1080));
+    // background: salmon;
+    background: #0F1540FF;
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    z-index: 99;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .gb{
+    position: absolute;
+    top: 0;
+    right: 0; 
+    }
+    video{
+     width: calc(100vw * (1440 / 1920));
+     height: calc(100vh * (810 / 1080)); 
+    }
+    .el-image{
+     width: calc(100vw * (960 / 1920));
+     height: calc(100vh * (720 / 1080)); 
+    }
+     .el-button-group {
+      position: absolute;
+      top: 10%;
+      right: 1%;
+    }
+  }
   }
  //左边下拉菜单样式
 ::v-deep .el-tree {
@@ -860,5 +986,15 @@ import { listTag } from "@/api/doc/tag.js";
 // ::v-deep .el-button + .el-button {
 //     color: #1890ff;
 // }
+//标签按钮
+::v-deep .el-tag {
+  color: #df9439ff;
+  border: 1px solid #ff9839ff;
+  background: #bba99240;
+  margin-left: 3px;
+  margin-bottom: 3px;
+  height: calc(100vh * (35 / 1080));
+  line-height: calc(100vh * (35 / 1080));
+}
   </style>
     

src/views1/HomeView.vue

@@ -142,7 +142,7 @@
           <!-- <span class="right_1">
             <img src="../assets/img/2.jpg" />
           </span> -->
-          <span class="right_2">孙芳</span>
+          <span class="right_2">欢迎您</span>
           <div class="right_3"></div>
           <span class="right_4">
             <img src="../assets/img/exit.png" @click="exit()"/>