图片的放大缩小选择全屏
参考文档Image 图片 | Element Plus 自定义工具栏2.9.4
<el-image-viewer show-progress v-if="viewerVisible" :url-list="currentImageUrl" @close="viewerVisible = false"fit="cover"><template #toolbar="{ actions, prev, next, reset, activeIndex }"><!-- 自定义对比 --><el-icon v-if="dataStr.type == 1" @click="contrast(activeIndex)"><CopyDocument /></el-icon><el-icon @click="actions('zoomOut')"><ZoomOut /></el-icon><el-icon @click="actions('zoomIn')"><ZoomIn /></el-icon><el-icon @click="actions('clockwise', { rotateDeg: 90 })"><RefreshRight /></el-icon><el-icon @click="actions('anticlockwise')"><RefreshLeft /></el-icon><!-- 自定义全屏按钮 --><el-icon @click="toggleFullScreen"><FullScreen /></el-icon><!-- 自定义下载按钮 --><el-icon @click="download(activeIndex)"><Download /></el-icon></template></el-image-viewer>
// 自定义全屏方法
const toggleFullScreen = () => {const viewerWrapper = document.querySelector('.el-image-viewer__wrapper');if (viewerWrapper) {if (!document.fullscreenElement) {viewerWrapper.requestFullscreen().catch(err => {console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);});} else {document.exitFullscreen();}}
};