mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-15 11:34:06 +08:00
61d5dcc3ae
* feat(components): [image-viewer] add toolbar slot * feat(docs): add docs * docs: update * docs: update * docs: update image viewer API types for clarity * docs: update custom toolbar version in image documentation to 2.9.4 * Update docs/examples/image/custom-toolbar.vue Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com> * style: remove dividers * revert: style * docs: format --------- Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com>
77 lines
2.4 KiB
Vue
77 lines
2.4 KiB
Vue
<template>
|
|
<div class="demo-image__custom-toolbar">
|
|
<el-image
|
|
style="width: 100px; height: 100px"
|
|
:src="url"
|
|
:preview-src-list="srcList"
|
|
fit="cover"
|
|
>
|
|
<template #toolbar="{ actions, prev, next, reset, activeIndex }">
|
|
<el-icon @click="prev"><DArrowLeft /></el-icon>
|
|
<el-icon @click="next"><DArrowRight /></el-icon>
|
|
<el-icon @click="actions('zoomOut')"><ZoomOut /></el-icon>
|
|
<el-icon
|
|
@click="actions('zoomIn', { enableTransition: false, zoomRate: 2 })"
|
|
>
|
|
<ZoomIn />
|
|
</el-icon>
|
|
<el-icon
|
|
@click="
|
|
actions('clockwise', { rotateDeg: 180, enableTransition: false })
|
|
"
|
|
>
|
|
<RefreshRight />
|
|
</el-icon>
|
|
<el-icon @click="actions('anticlockwise')"><RefreshLeft /></el-icon>
|
|
<el-icon @click="reset"><Refresh /></el-icon>
|
|
<el-icon @click="download(activeIndex)"><Download /></el-icon>
|
|
</template>
|
|
</el-image>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import ElIcon from '@element-plus/components/icon'
|
|
import {
|
|
DArrowLeft,
|
|
DArrowRight,
|
|
Download,
|
|
Refresh,
|
|
RefreshLeft,
|
|
RefreshRight,
|
|
ZoomIn,
|
|
ZoomOut,
|
|
} from '@element-plus/icons-vue'
|
|
|
|
const url =
|
|
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
|
|
const srcList = [
|
|
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
|
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
|
|
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
|
|
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
|
|
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
|
|
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
|
|
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
|
|
]
|
|
|
|
const download = (index: number) => {
|
|
const url = srcList[index]
|
|
const suffix = url.slice(url.lastIndexOf('.'))
|
|
const filename = Date.now() + suffix
|
|
|
|
fetch(url)
|
|
.then((response) => response.blob())
|
|
.then((blob) => {
|
|
const blobUrl = URL.createObjectURL(new Blob([blob]))
|
|
const link = document.createElement('a')
|
|
link.href = blobUrl
|
|
link.download = filename
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
URL.revokeObjectURL(blobUrl)
|
|
link.remove()
|
|
})
|
|
}
|
|
</script>
|