0.0.34

src/views/chat/hall.vue

@@ -142,7 +142,7 @@
                 </div>
                 <div class="otherUserMessageText">
                   <div class="messageTypeImage">
-                    <img :src="item.content">
+                    <img :src="item.content" @click="imgZoom(item.content)">
                   </div>
                 </div>
               </div>
@@ -150,7 +150,7 @@
               <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==2">
                 <div class="meUserMessageText">
                   <div class="messageTypeImage">
-                    <img :src="item.content">
+                    <img :src="item.content" @click="imgZoom(item.content)">
                   </div>
                 </div>
                 <div class="meUserIcon">
@@ -1082,6 +1082,19 @@
     </el-dialog>
     <!--分享群聊 end------------------------------------------------------------>
 
+    <!--放大图片 start------------------------------------------------------------>
+    <el-dialog :visible.sync="imgZoomStatus" title="图片详情" :close-on-click-modal="false" width="600px">
+      <div>
+        <div class="imgZoomBox">
+          <img :src="imgZoomUrl">
+        </div>
+        <div class="footerButtonBox">
+          <el-button type="info" @click="imgZoomStatus=false">关闭</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!--放大图片 end------------------------------------------------------------>
+
     <!--老刘的代码 start------------------------------------------------------------>
     <!-- <div class="layerBox">
       <el-container style="height: 100vh;">
@@ -1173,6 +1186,7 @@ export default {
         remark:'',//备注名
       },
       formLabelWidth:'100px',
+      imgZoomStatus:false,//图片放大框
       //1.全局配置 end---------------------------------------->
 
       //2.会话列表 start---------------------------------------->
@@ -2352,6 +2366,11 @@ export default {
         this.$message.error('文件下载失败！')
       }
     },
+    //5.8 图片放大
+    imgZoom(url){
+      this.imgZoomUrl = url;
+      this.imgZoomStatus = true;
+    },
     //5.websocket会话 end---------------------------------------->
   },
   mounted() {
@@ -3832,6 +3851,11 @@ export default {
       margin-bottom: 30px;
     }
   }
+  .imgZoomBox {
+    img {
+      width: 550px;
+    }
+  }
   //弹出框底部按钮
   .footerButtonBox {
     padding-top: 40px;