|
@@ -0,0 +1,524 @@
|
|
|
+<template>
|
|
|
+ <transition name="viewer-fade">
|
|
|
+ <div
|
|
|
+ ref="wrapper"
|
|
|
+ :tabindex="-1"
|
|
|
+ class="el-image-viewer__wrapper"
|
|
|
+ :style="{'z-index': zIndex}"
|
|
|
+ >
|
|
|
+ <div class="el-image-viewer__mask" @click.self="hideOnClickModal && hide()"></div>
|
|
|
+ <!-- CLOSE -->
|
|
|
+ <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
|
|
|
+ <i class="el-icon">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
|
+ <path
|
|
|
+ fill="currentColor"
|
|
|
+ d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ </i>
|
|
|
+ </span>
|
|
|
+ <!-- ARROW -->
|
|
|
+ <template v-if="!isSingle">
|
|
|
+ <span
|
|
|
+ class="el-image-viewer__btn el-image-viewer__prev"
|
|
|
+ :class="{ 'is-disabled': !infinite && isFirst }"
|
|
|
+ @click="prev"
|
|
|
+ >
|
|
|
+ <i class="el-icon">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
|
+ <path
|
|
|
+ fill="currentColor"
|
|
|
+ d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ </i>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ class="el-image-viewer__btn el-image-viewer__next"
|
|
|
+ :class="{ 'is-disabled': !infinite && isLast }"
|
|
|
+ @click="next"
|
|
|
+ >
|
|
|
+ <i class="el-icon">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
|
+ <path
|
|
|
+ fill="currentColor"
|
|
|
+ d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ </i>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <!-- ACTIONS -->
|
|
|
+ <div
|
|
|
+ class="el-image-viewer__btn el-image-viewer__actions"
|
|
|
+ v-if="!isVideo(urlList[index])"
|
|
|
+ >
|
|
|
+ <div class="el-image-viewer__actions__inner">
|
|
|
+ <i class="el-icon" @click="handleActions('zoomOut')"
|
|
|
+ ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
|
+ <path
|
|
|
+ fill="currentColor"
|
|
|
+ d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704M352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64"
|
|
|
+ ></path></svg
|
|
|
+ ></i>
|
|
|
+ <i class="el-icon" @click="handleActions('zoomIn')"
|
|
|
+ ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
|
+ <path
|
|
|
+ fill="currentColor"
|
|
|
+ d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704m-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64z"
|
|
|
+ ></path></svg
|
|
|
+ ></i>
|
|
|
+ <i class="el-image-viewer__actions__divider"></i>
|
|
|
+
|
|
|
+ <i class="el-icon" @click="toggleMode"
|
|
|
+ ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
|
+ <path
|
|
|
+ fill="currentColor"
|
|
|
+ d="m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64z"
|
|
|
+ ></path></svg
|
|
|
+ ></i>
|
|
|
+ <i class="el-image-viewer__actions__divider"></i>
|
|
|
+ <i class="el-icon" @click="handleActions('anticlocelise')"
|
|
|
+ ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
|
+ <path
|
|
|
+ fill="currentColor"
|
|
|
+ d="M289.088 296.704h92.992a32 32 0 0 1 0 64H232.96a32 32 0 0 1-32-32V179.712a32 32 0 0 1 64 0v50.56a384 384 0 0 1 643.84 282.88 384 384 0 0 1-383.936 384 384 384 0 0 1-384-384h64a320 320 0 1 0 640 0 320 320 0 0 0-555.712-216.448z"
|
|
|
+ ></path></svg
|
|
|
+ ></i>
|
|
|
+ <i class="el-icon" @click="handleActions('clocelise')"
|
|
|
+ ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
|
+ <path
|
|
|
+ fill="currentColor"
|
|
|
+ d="M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"
|
|
|
+ ></path></svg
|
|
|
+ ></i>
|
|
|
+ <i class="el-icon" @click="handleDownload">
|
|
|
+ <svg data-v-d2e47025="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
|
+ <path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path>
|
|
|
+ </svg>
|
|
|
+ </i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- CANVAS -->
|
|
|
+ <div class="el-image-viewer__canvas">
|
|
|
+ <template v-for="(url, i) in urlList" :key="i">
|
|
|
+ <img
|
|
|
+ v-if="i == index && !isVideo(url)"
|
|
|
+ ref="media"
|
|
|
+ :src="url"
|
|
|
+ :style="mediaStyle"
|
|
|
+ class="el-image-viewer__img"
|
|
|
+ @load="handleMediaLoad"
|
|
|
+ @error="handleMediaError"
|
|
|
+ @mousedown="handleMouseDown"
|
|
|
+ />
|
|
|
+ <video
|
|
|
+ v-if="i == index && isVideo(url)"
|
|
|
+ ref="media"
|
|
|
+ :src="url"
|
|
|
+ :controls="true"
|
|
|
+ :autoplay="true"
|
|
|
+ :style="mediaStyle"
|
|
|
+ class="el-image-viewer__img"
|
|
|
+ @load="handleMediaLoad"
|
|
|
+ @error="handleMediaError"
|
|
|
+ @mousedown="handleMouseDown"
|
|
|
+ >
|
|
|
+ </video>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { computed, ref, onMounted, watch, nextTick } from 'vue'
|
|
|
+import { downloadImgVideo, downloadBase64 } from '@/utils'
|
|
|
+
|
|
|
+const EVENT_CODE = {
|
|
|
+ tab: 'Tab',
|
|
|
+ enter: 'Enter',
|
|
|
+ space: 'Space',
|
|
|
+ left: 'ArrowLeft', // 37
|
|
|
+ up: 'ArrowUp', // 38
|
|
|
+ right: 'ArrowRight', // 39
|
|
|
+ down: 'ArrowDown', // 40
|
|
|
+ esc: 'Escape',
|
|
|
+ delete: 'Delete',
|
|
|
+ backspace: 'Backspace'
|
|
|
+}
|
|
|
+
|
|
|
+const isFirefox = function () {
|
|
|
+ return !!window.navigator.userAgent.match(/firefox/i)
|
|
|
+}
|
|
|
+
|
|
|
+const rafThrottle = function (fn) {
|
|
|
+ let locked = false
|
|
|
+ return function (...args) {
|
|
|
+ if (locked) return
|
|
|
+ locked = true
|
|
|
+ window.requestAnimationFrame(() => {
|
|
|
+ fn.apply(this, args)
|
|
|
+ locked = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const Mode = {
|
|
|
+ CONTAIN: {
|
|
|
+ name: 'contain',
|
|
|
+ icon: 'el-icon-full-screen'
|
|
|
+ },
|
|
|
+ ORIGINAL: {
|
|
|
+ name: 'original',
|
|
|
+ icon: 'el-icon-c-scale-to-original'
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'
|
|
|
+const CLOSE_EVENT = 'close'
|
|
|
+const SWITCH_EVENT = 'switch'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ElMediaViewer',
|
|
|
+ props: {
|
|
|
+ urlList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ zIndex: {
|
|
|
+ type: Number,
|
|
|
+ default: 2016
|
|
|
+ },
|
|
|
+ initialIndex: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ infinite: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ hideOnClickModal: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ // 下载文件名
|
|
|
+ fileName: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emits: [CLOSE_EVENT, SWITCH_EVENT],
|
|
|
+ setup(props, { emit }) {
|
|
|
+ let _keyDownHandler = null
|
|
|
+ let _mouseWheelHandler = null
|
|
|
+ let _dragHandler = null
|
|
|
+
|
|
|
+ const loading = ref(true)
|
|
|
+ const index = ref(props.initialIndex)
|
|
|
+ const wrapper = ref(null)
|
|
|
+ const media = ref(null)
|
|
|
+ const mode = ref(Mode.CONTAIN)
|
|
|
+ const transform = ref({
|
|
|
+ scale: 1,
|
|
|
+ deg: 0,
|
|
|
+ offsetX: 0,
|
|
|
+ offsetY: 0,
|
|
|
+ enableTransition: false
|
|
|
+ })
|
|
|
+ const isVideo = computed(() => (url) => {
|
|
|
+ return /\.(mp4|webm|ogg)$/i.test(url)
|
|
|
+ })
|
|
|
+
|
|
|
+ // 处理 video 有video 时 字段
|
|
|
+ const isSingle = computed(() => {
|
|
|
+ // const { urlList } = props
|
|
|
+ // urlList.forEach((item) => {
|
|
|
+ // if (!item.type) {
|
|
|
+ // item.type = item.response.type
|
|
|
+ // if (item.response.thumbnailUrl) {
|
|
|
+ // item.videoUrl = item.response.thumbnailUrl
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // return urlList.length <= 1
|
|
|
+ return false
|
|
|
+ })
|
|
|
+
|
|
|
+ const isFirst = computed(() => {
|
|
|
+ return index.value === 0
|
|
|
+ })
|
|
|
+
|
|
|
+ const isLast = computed(() => {
|
|
|
+ return index.value === props.urlList.length - 1
|
|
|
+ })
|
|
|
+
|
|
|
+ const currentMedia = computed(() => {
|
|
|
+ return props.urlList[index.value]
|
|
|
+ })
|
|
|
+
|
|
|
+ const isImage = computed(() => {
|
|
|
+ const currentUrl = props.urlList[index.value]
|
|
|
+ return currentUrl.endsWith('.jpg') || currentUrl.endsWith('.png')
|
|
|
+ })
|
|
|
+
|
|
|
+ const mediaStyle = computed(() => {
|
|
|
+ const { scale, deg, offsetX, offsetY, enableTransition } = transform.value
|
|
|
+ const style = {
|
|
|
+ transform: `scale(${scale}) rotate(${deg}deg)`,
|
|
|
+ transition: enableTransition ? 'transform .3s' : '',
|
|
|
+ marginLeft: `${offsetX}px`,
|
|
|
+ marginTop: `${offsetY}px`
|
|
|
+ }
|
|
|
+ if (mode.value.name === Mode.CONTAIN.name) {
|
|
|
+ style.maxWidth = style.maxHeight = '100%'
|
|
|
+ }
|
|
|
+ return style
|
|
|
+ })
|
|
|
+
|
|
|
+ function hide() {
|
|
|
+ deviceSupportUninstall()
|
|
|
+ emit(CLOSE_EVENT)
|
|
|
+ }
|
|
|
+
|
|
|
+ function deviceSupportInstall() {
|
|
|
+ _keyDownHandler = rafThrottle((e) => {
|
|
|
+ switch (e.code) {
|
|
|
+ // ESC
|
|
|
+ case EVENT_CODE.esc:
|
|
|
+ hide()
|
|
|
+ break
|
|
|
+ // SPACE
|
|
|
+ case EVENT_CODE.space:
|
|
|
+ toggleMode()
|
|
|
+ break
|
|
|
+ // LEFT_ARROW
|
|
|
+ case EVENT_CODE.left:
|
|
|
+ prev()
|
|
|
+ break
|
|
|
+ // UP_ARROW
|
|
|
+ case EVENT_CODE.up:
|
|
|
+ handleActions('zoomIn')
|
|
|
+ break
|
|
|
+ // RIGHT_ARROW
|
|
|
+ case EVENT_CODE.right:
|
|
|
+ next()
|
|
|
+ break
|
|
|
+ // DOWN_ARROW
|
|
|
+ case EVENT_CODE.down:
|
|
|
+ handleActions('zoomOut')
|
|
|
+ break
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ _mouseWheelHandler = rafThrottle((e) => {
|
|
|
+ const delta = e.wheelDelta ? e.wheelDelta : -e.detail
|
|
|
+ if (delta > 0) {
|
|
|
+ handleActions('zoomIn', {
|
|
|
+ zoomRate: 0.015,
|
|
|
+ enableTransition: false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ handleActions('zoomOut', {
|
|
|
+ zoomRate: 0.015,
|
|
|
+ enableTransition: false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ document.addEventListener('keydown', _keyDownHandler, false)
|
|
|
+ document.addEventListener(mousewheelEventName, _mouseWheelHandler, false)
|
|
|
+ }
|
|
|
+
|
|
|
+ function deviceSupportUninstall() {
|
|
|
+ document.removeEventListener('keydown', _keyDownHandler, false)
|
|
|
+ document.removeEventListener(
|
|
|
+ mousewheelEventName,
|
|
|
+ _mouseWheelHandler,
|
|
|
+ false
|
|
|
+ )
|
|
|
+ _keyDownHandler = null
|
|
|
+ _mouseWheelHandler = null
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleMediaLoad() {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleMediaError(e) {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleMouseDown(e) {
|
|
|
+ if (loading.value || e.button !== 0) return
|
|
|
+
|
|
|
+ const { offsetX, offsetY } = transform.value
|
|
|
+ const startX = e.pageX
|
|
|
+ const startY = e.pageY
|
|
|
+
|
|
|
+ const divLeft = wrapper.value.clientLeft
|
|
|
+ const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth
|
|
|
+ const divTop = wrapper.value.clientTop
|
|
|
+ const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight
|
|
|
+
|
|
|
+ _dragHandler = rafThrottle((ev) => {
|
|
|
+ transform.value = {
|
|
|
+ ...transform.value,
|
|
|
+ offsetX: offsetX + ev.pageX - startX,
|
|
|
+ offsetY: offsetY + ev.pageY - startY
|
|
|
+ }
|
|
|
+ })
|
|
|
+ document.addEventListener('mousemove', _dragHandler, false)
|
|
|
+ document.addEventListener(
|
|
|
+ 'mouseup',
|
|
|
+ (e) => {
|
|
|
+ const mouseX = e.pageX
|
|
|
+ const mouseY = e.pageY
|
|
|
+ if (
|
|
|
+ mouseX < divLeft ||
|
|
|
+ mouseX > divRight ||
|
|
|
+ mouseY < divTop ||
|
|
|
+ mouseY > divBottom
|
|
|
+ ) {
|
|
|
+ reset()
|
|
|
+ }
|
|
|
+ document.removeEventListener('mousemove', _dragHandler, false)
|
|
|
+ },
|
|
|
+ false
|
|
|
+ )
|
|
|
+
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+
|
|
|
+ function reset() {
|
|
|
+ transform.value = {
|
|
|
+ scale: 1,
|
|
|
+ deg: 0,
|
|
|
+ offsetX: 0,
|
|
|
+ offsetY: 0,
|
|
|
+ enableTransition: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function toggleMode() {
|
|
|
+ if (loading.value) return
|
|
|
+
|
|
|
+ const modeNames = Object.keys(Mode)
|
|
|
+ const modeValues = Object.values(Mode)
|
|
|
+ const currentMode = mode.value.name
|
|
|
+ const index = modeValues.findIndex((i) => i.name === currentMode)
|
|
|
+ const nextIndex = (index + 1) % modeNames.length
|
|
|
+ mode.value = Mode[modeNames[nextIndex]]
|
|
|
+ reset()
|
|
|
+ }
|
|
|
+
|
|
|
+ function prev() {
|
|
|
+ if (isFirst.value && !props.infinite) return
|
|
|
+ const len = props.urlList.length
|
|
|
+ index.value = (index.value - 1 + len) % len
|
|
|
+ }
|
|
|
+
|
|
|
+ function next() {
|
|
|
+ if (isLast.value && !props.infinite) return
|
|
|
+ const len = props.urlList.length
|
|
|
+ index.value = (index.value + 1) % len
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleActions(action, options = {}) {
|
|
|
+ if (loading.value) return
|
|
|
+ const { zoomRate, rotateDeg, enableTransition } = {
|
|
|
+ zoomRate: 0.2,
|
|
|
+ rotateDeg: 90,
|
|
|
+ enableTransition: true,
|
|
|
+ ...options
|
|
|
+ }
|
|
|
+ switch (action) {
|
|
|
+ case 'zoomOut':
|
|
|
+ if (transform.value.scale > 0.2) {
|
|
|
+ transform.value.scale = parseFloat(
|
|
|
+ (transform.value.scale - zoomRate).toFixed(3)
|
|
|
+ )
|
|
|
+ }
|
|
|
+ break
|
|
|
+ case 'zoomIn':
|
|
|
+ transform.value.scale = parseFloat(
|
|
|
+ (transform.value.scale + zoomRate).toFixed(3)
|
|
|
+ )
|
|
|
+ break
|
|
|
+ case 'clocelise':
|
|
|
+ transform.value.deg += rotateDeg
|
|
|
+ break
|
|
|
+ case 'anticlocelise':
|
|
|
+ transform.value.deg -= rotateDeg
|
|
|
+ break
|
|
|
+ }
|
|
|
+ transform.value.enableTransition = enableTransition
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleDownload () {
|
|
|
+ const url = props.urlList[index.value]
|
|
|
+ const isOnlineImage = url.startsWith('http://') || url.startsWith('https://') // 判断是否为在线地址
|
|
|
+ const date = new Date()
|
|
|
+ const filename = props.fileName || `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
|
|
|
+ isOnlineImage ? downloadImgVideo(url, filename) : downloadBase64(url, filename)
|
|
|
+ }
|
|
|
+
|
|
|
+ watch(currentMedia, () => {
|
|
|
+ nextTick(() => {
|
|
|
+ const $media = media.value
|
|
|
+ if (!$media.complete) {
|
|
|
+ loading.value = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ watch(index, (val) => {
|
|
|
+ reset()
|
|
|
+ emit(SWITCH_EVENT, val)
|
|
|
+ })
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ deviceSupportInstall()
|
|
|
+ wrapper.value?.focus?.()
|
|
|
+ })
|
|
|
+
|
|
|
+ return {
|
|
|
+ index,
|
|
|
+ wrapper,
|
|
|
+ media,
|
|
|
+ isSingle,
|
|
|
+ isFirst,
|
|
|
+ isLast,
|
|
|
+ currentMedia,
|
|
|
+ isImage,
|
|
|
+ isVideo,
|
|
|
+ mediaStyle,
|
|
|
+ mode,
|
|
|
+ handleActions,
|
|
|
+ prev,
|
|
|
+ next,
|
|
|
+ hide,
|
|
|
+ toggleMode,
|
|
|
+ handleMediaLoad,
|
|
|
+ handleMediaError,
|
|
|
+ handleDownload,
|
|
|
+ handleMouseDown
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+// .el-icon {
|
|
|
+// z-index: 200;
|
|
|
+// }
|
|
|
+// .el-image-viewer__btn {
|
|
|
+// overflow: hidden;
|
|
|
+// border-radius: 100px;
|
|
|
+// opacity: 1;
|
|
|
+// text-align: center;
|
|
|
+// line-height: 44px;
|
|
|
+// background-color: rgba($color: #0d0d0d, $alpha: 0.5);
|
|
|
+// }
|
|
|
+</style>
|