zhaoxuebing
11 months ago
9 changed files with 96 additions and 9 deletions
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<div class="preview"> |
|||
<el-dialog v-model="dialogTableVisible" title="" min-width="80%"> |
|||
<div class="dialog"> |
|||
<Icon |
|||
icon="ep:close" |
|||
class="cursor-pointer close" |
|||
color="white" |
|||
size="32" |
|||
@click="dialogTableVisible = false" |
|||
/> |
|||
<img :src="chooseItem" alt=""/> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
const dialogTableVisible = ref(false) |
|||
const chooseItem = ref() |
|||
const preview = async (item) => { |
|||
chooseItem.value = item |
|||
dialogTableVisible.value = true |
|||
} |
|||
defineExpose({ preview }) // 提供 open 方法,用于打开弹窗 |
|||
// 传递给父类 |
|||
const emit = defineEmits(['deleteFile']) |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.file { |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
.name { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
width: 140px; |
|||
} |
|||
&:hover{ |
|||
.name { |
|||
color: #409eff; |
|||
} |
|||
} |
|||
} |
|||
img { |
|||
width: 100%; |
|||
} |
|||
::v-deep(.el-dialog) { |
|||
background: none; |
|||
} |
|||
::v-deep(.el-dialog__header) { |
|||
display: none !important; |
|||
} |
|||
.dialog { |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.close { |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 10px; |
|||
} |
|||
</style> |
Loading…
Reference in new issue