sookie/blog-admin-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

换用el-image-viewer

Browse Source
This commit is contained in:
灌糖包子 2026-03-31 22:56:31 +08:00
parent 3ca39fc010
commit de58ca78be
Signed by: sookie
GPG Key ID: 0599BECB75C1E68D
1 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/api/SourceImage.vue
View File

@ -72,10 +72,16 @@
:data="labels" :data="labels"
></el-transfer> ></el-transfer>
</el-dialog> </el-dialog>
<el-image-viewer
v-if="previewVisible"
:url-list="previewUrlList"
:initial-index="previewIndex"
@close="previewVisible = false"
/>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, h } from 'vue' import { ref, computed } from 'vue'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import prettyBytes from 'pretty-bytes' import prettyBytes from 'pretty-bytes'
@ -94,6 +100,9 @@ const labelList = ref<string[]>([])
const curId = ref<string | null>(null) const curId = ref<string | null>(null)
const modifyModal = ref(false) const modifyModal = ref(false)
const isUploading = ref(false) const isUploading = ref(false)
const previewVisible = ref(false)
const previewUrlList = ref<string[]>([])
const previewIndex = ref(0)
function renderFunc(h: Function, option: any) { function renderFunc(h: Function, option: any) {
return h('span', null, option.label) return h('span', null, option.label)
@ -152,13 +161,10 @@ function uploadError(error: Error): void {
ElMessage.error(error.message) ElMessage.error(error.message)
} }
function preview(row: SourceImageModel): void { function preview(row: SourceImageModel): void {
ElMessageBox({ const index = sourceImageData.value.findIndex(item => item._id === row._id)
title: '图片预览', previewUrlList.value = sourceImageData.value.map(item => `/api/v2/common/randomBg?id=${item._id}`)
message: h('img', { style: `width:500px`, src: `/api/v2/common/randomBg?id=${row._id}` }, ''), previewIndex.value = index >= 0 ? index : 0
showCancelButton: false, previewVisible.value = true
confirmButtonText: '关闭',
customStyle: {width: '530px', maxWidth: 'unset'}
}).catch(() => {})
} }
function modifyTags(item: SourceImageModel): void { function modifyTags(item: SourceImageModel): void {
curModifyLabels.value.length = 0 curModifyLabels.value.length = 0