zhaoxuebing
10 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