84 lines
1.7 KiB
Vue
84 lines
1.7 KiB
Vue
<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>
|
|
</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> |