二维码鼠标滑过放大

zhjq-ui/src/views/system/voice/index.vue

@@ -68,7 +68,10 @@
         <!--        <div ref="qrcode" class="qrcode" style="margin-left: 163px" @mouseover="hover = true" @mouseleave="hover = false"></div>-->
         <!--        <div ref="qrcode" style="margin-left: 163px"></div>-->
         <template slot-scope="scope">
-          <img :src="getFullUrl(scope.row.qrCodeUrl)" min-width="70" height="70"/>
+          <el-popover placement="right" trigger="hover">
+            <img :src="getFullUrl(scope.row.qrCodeUrl)" style="width:200px;height:200px;"/>
+            <img slot="reference" :src="getFullUrl(scope.row.qrCodeUrl)" style="max-width: 50px;max-height: 100px">
+          </el-popover>
         </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark"/>
@@ -208,7 +211,7 @@ export default {
     //   console.log("imageUrl",imageUrl)
     // },
     getLocalIp() {
-      console.log("window.location",window.location)
+      console.log("window.location", window.location)
       const {hostname} = window.location;
       return hostname === 'localhost' || hostname === '127.0.0.1'
         ? 'http://localhost'
@@ -228,7 +231,7 @@ export default {
         voiceUrl: that.localIp + ":" + that.localPort + row.voiceUrl,
       }
       createQrCode(params).then(res => {
-        if(res.code == 200) {
+        if (res.code == 200) {
           that.$modal.msgSuccess("生成成功");
         } else {
           that.$modal.msgError("生成失败");