mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-14 18:11:48 +08:00
9539c19b40
* style(eslint-config): add rules to restrict the imports of element-plus * chore: added validation for tsx files * chore: revert the shell
84 lines
2.5 KiB
Vue
84 lines
2.5 KiB
Vue
<template>
|
|
<div class="demo-image__custom-toolbar">
|
|
<el-image
|
|
style="width: 100px; height: 100px"
|
|
:src="url"
|
|
:preview-src-list="srcList"
|
|
fit="cover"
|
|
show-progress
|
|
>
|
|
<template
|
|
#toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }"
|
|
>
|
|
<el-icon @click="prev"><Back /></el-icon>
|
|
<el-icon @click="next"><Right /></el-icon>
|
|
<el-icon @click="setActiveItem(srcList.length - 1)">
|
|
<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'
|
|
import {
|
|
Back,
|
|
DArrowRight,
|
|
Download,
|
|
Refresh,
|
|
RefreshLeft,
|
|
RefreshRight,
|
|
Right,
|
|
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>
|