优化代码

src/components/chatMessage/PictureMessage.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="picture-message" @click="dialogVisibleClick">
+      <img class="picture-message-img" :src="item.payload.url" alt="">
+  </div>
+  <el-dialog v-model="dialogVisible" fullscreen>
+  <div class="dialog-content">
+    <img class="dialog-img" :src="item.payload.url" alt="">
+  </div>
+  <div class="dialog-footer">
+      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
+      <el-button type="primary" @click="saveToDesktop">保存到本地</el-button>
+  </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  ref, // 响应式基础
+  watch, // 侦听器
+  onMounted, // 组件挂载完成后执行
+  onUpdated, // 组件更新后执行
+  onUnmounted, // 组件销毁前执行
+} from "vue";
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  }
+});
+
+// 保存到桌面
+function saveToDesktop() {
+  const link = document.createElement('a');
+  link.href = props.item.payload.url;
+  link.download = props.item.payload.filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+// 弹窗相关
+const dialogVisible = ref(false);
+function dialogVisibleClick() {
+  dialogVisible.value = true;
+}
+
+const refname = ref('');
+watch(refname, async (newQuestion, oldQuestion) => {
+  // 变化后执行
+});
+onMounted(() => {
+  // 组件挂载完成后执行
+});
+onUpdated(() => {
+  // 组件更新后执行
+});
+onUnmounted(() => {
+  // 组件销毁前执行
+});
+</script>
+
+<style scoped>
+.picture-message{
+  padding: 0;
+  margin: 0;
+  /* display: inline-block; */
+  max-width: 100%;
+  border-radius: 10px;
+}
+.picture-message-img{
+  max-width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 10px;
+}
+.dialog-content{
+  width: 98vw;
+  height: 95vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dialog-img{
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+</style>