Vue3.0實現(xiàn)圖片預(yù)覽組件(媒體查看器)功能

更新時間：2023年12月01日 09:46:06 作者：山楂樹の

最近項目中有個場景，一組圖片、視頻、音頻、文件數(shù)據(jù)，要求點擊圖片可以放大預(yù)覽，左右可以切換音視頻、文件，支持鼠標及各種鍵控制?縮放，左右旋轉(zhuǎn)，移動等功能,這篇文章主要介紹了Vue3.0實現(xiàn)圖片預(yù)覽組件(媒體查看器),需要的朋友可以參考下

前言：

最近項目中有個場景，一組圖片、視頻、音頻、文件數(shù)據(jù)，要求點擊圖片可以放大預(yù)覽，左右可以切換音視頻、文件，支持鼠標及各種鍵控制縮放，左右旋轉(zhuǎn)，移動等功能，整理了一下，封了個組件，注釋很全面，每塊地方都有講解，可以直接拿到項目中使用

先看下效果：

關(guān)于傳值：

（必傳）傳入url數(shù)組urlList，傳入圖片所處index，也就是在數(shù)組中的索引

（非必傳）是否支持無限滾動？是否支持ESC鍵退出？是否支持點擊遮罩層退出？是否需要工具欄？

關(guān)于圖片的相關(guān)特效：

定義一個transform樣式對象，包含縮放scale、旋轉(zhuǎn)deg、移動offsetX|offsetY、動畫enableTransition，可在computed計算中返回由此對象組成的css樣式對象，在模板中對圖片綁定，當(dāng)去觸發(fā)特效相關(guān)各類事件時，改變對象里某個值，則會重新捕獲對象的改變執(zhí)行computed，去實時更新圖片樣式

1. 縮放操作：可以通過鼠標滾動上下滑動、鍵盤上下鍵up/down、組件內(nèi)部工具欄按鈕這三種方式去控制此特效，定義一個縮放比，即每次縮放的程度，可以根據(jù)項目場景自行定義，我這里鍵盤控制、按鈕點擊為1.4，鼠標滾輪偏小為1.2, 每次縮放讓初始化的樣式對象的scale每次乘或除以這個值即可，當(dāng)然無限縮小無限放大肯定不行，需要定義一個最小最大值控制

2. 旋轉(zhuǎn)操作：定義一個旋轉(zhuǎn)常量為90度，順時針旋轉(zhuǎn)讓初始化樣式對象deg累加這個值，逆時針相反即可

3. 移動操作：顧名思義，也就是在遮罩層內(nèi)可以通過鼠標對圖片進行移動，在鼠標按下事件內(nèi)，監(jiān)聽鼠標移動事件，每次移動記錄下當(dāng)前鼠標位置，計算offsetX也就是圖片要移動的translateX為：移動前的距頁面左側(cè)距離offsetX加上當(dāng)前的鼠標位置event.pageX - 移動前的鼠標位置; 上下移動同理

4. 動畫過渡：根據(jù)特效的觸發(fā)方式?jīng)Q定是否需要過渡，我這里對通過鼠標操作縮放時沒有定義動畫，其余操作方式建議都要加上

關(guān)于圖片初始化展示：

如果想要圖片能夠自適應(yīng)在遮罩層的容器內(nèi)，并且保證圖片不變形且寬或高不溢出容器，那么就不應(yīng)該定死寬高或者是不去定義寬高，我這里解決辦法是對圖片進行等比例的縮放，具體算法就不在這里過多講解了，詳情見文末：附屬，圖片等比例縮放算法（計算縮放后的寬高）

關(guān)于音視頻展示：

視頻我這里用的是 vue3-video-play 這個插件，ui和功能各方面整體感覺很棒，算是對Vue 3.0支持比較好的一個吧，詳情可以參考：https://codelife.cc/vue3-video-play/

音頻用的是原生audio，用法很方便，沒什么可講的，具體看代碼

關(guān)于拋出數(shù)據(jù)：

頂部中間一般為圖片當(dāng)前索引index/總長度，當(dāng)然默認的為這樣，拋出index，可以自定義這塊地方插槽的使用，頂部左側(cè)插槽也暴露當(dāng)前index，其實當(dāng)前組件最需要的數(shù)據(jù)也莫過于index，暴露方法中也基本都有拋出

附上完整代碼

<template>
    <teleport to='body'>
        <transition>
            <div class="el-image-viewer__wrapper" :tabindex="-1" ref="imageViewer" :style="{ zIndex: computedZIndex }">
                <!-- MASK -->
                <div class="el-image-viewer__mask" @click.self="isClickToDisappear && hide"></div>
                <!-- CLOSE -->
                <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
                    <el-icon>
                        <Close />
                    </el-icon>
                </span>
                <!-- HEADER -->
                <div class="image-viewer-header" v-if="isTools">
                    <div class="header-left">
                        <span class="header-file-name">
                            <slot name="title" :index="index"></slot>
                        </span>
                        <slot name="left" :index="index"></slot>
                    </div>
                    <div class="header-center">
                        <slot name="content" :index="index">
                            {{ index + 1 }} / {{ urlList.length }}
                        </slot>
                    </div>
                </div>
                <!-- ACTIONS -->
                <div class="el-image-viewer__btn el-image-viewer__actions"
                    v-if="isFileType(urlList[index]) === 'img' && isTools">
                    <div class="el-image-viewer__actions__inner">
                        <el-icon @click="handleActions('zoomOut')">
                            <ZoomOut />
                        </el-icon>
                        <el-icon @click="handleActions('zoomIn')">
                            <ZoomIn />
                        </el-icon>
                        <el-icon @click="toggleMode">
                            <component :is="icons.default[mode.icon]"></component>
                        </el-icon>
                        <el-icon @click="handleActions('anticlockwise')">
                            <RefreshLeft />
                        </el-icon>
                        <el-icon @click="handleActions('clockwise')">
                            <RefreshRight />
                        </el-icon>
                    </div>
                </div>
                <!-- ARROW -->
                <template v-if="!isSingle">
                    <span class="el-image-viewer__btn el-image-viewer__prev" @click="prev">
                        <el-icon>
                            <ArrowLeftBold />
                        </el-icon>
                    </span>
                    <span class="el-image-viewer__btn el-image-viewer__next" @click="next">
                        <el-icon>
                            <ArrowRightBold />
                        </el-icon>
                    </span>
                </template>
                <!-- CANVAS -->
                <div id="image-viewer-canvas" class="el-image-viewer__canvas">
                    <div v-for="(url, i) in urlList" :key="url" style="display: flex" :data-id="url">
                        <!-- 圖片顯示 -->
                        <img v-if="i === index && isFileType(url) === 'img'" v-loading="loading" :src="url"
                            :style="[mediaStyle, { width: 'auto', height: imgHeight }]" class="el-image-viewer__img"
                            @load="handleImgLoad" @error="handleMediaError" @mousedown="handleMouseDown" />
                        <!-- 視頻顯示 -->
                        <videoPlay v-if="(i === index && isFileType(url) === 'video')" :src="url"
                            class="el-image-viewer__img" @load="handleMediaLoad" @error="handlePlayError(i)"
                            @mousedown="handleMouseDown">
                        </videoPlay>
                        <!-- 音頻顯示 -->
                        <audio controls="controls" v-if="i === index && isFileType(url) === 'audio'" :src="url"
                            class="el-image-viewer__img" @load="handleMediaLoad" @error="handleMediaError"></audio>
                        <!-- 文本文件顯示 -->
                        <div v-if="i === index && ['file', 'text'].includes(isFileType(url))" class="image-viewer-tips">
                            <span class="image-unknown-file-type-view"></span>
                            <p>
                                我們不能預(yù)覽該文件。<br>
                                您要先下載文件以查看。
                            </p>
                            <div class="image-viewer-download" @click="download(url)">
                                <span class="icon-download"></span>
                                下載
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </teleport>
</template>
<script lang="ts">
import 'element-plus/es/components/image-viewer/style/css'
import "vue3-video-play/dist/style.css";
import * as icons from './mediaIcons'
import { videoPlay } from "vue3-video-play/dist/index.es";
import { fileType, transformImgRatio } from "@/utils/dataUtils"; // fileType 判斷文件后綴方法; transformImgRatio 等比例計算圖片寬高方法
import { isNumber, useEventListener } from '@vueuse/core'
import { PropType } from 'vue';
import { useZIndex } from 'element-plus';
export default defineComponent({
    name: 'imageViewerUtil',
    props: {
        urlList: { // url數(shù)組
            type: Array as PropType<string[]>,
            default: () => []
        },
        imgIndex: { // 當(dāng)前文件所處位置，也是在數(shù)組中的索引
            type: Number,
            default: 0
        },
        isTools: { // 是否需要工具欄
            type: Boolean,
            default: true
        },
        isInfinite: { // 是否支持無限循環(huán)滾動
            type: Boolean,
            default: true
        },
        zIndex: { // 層級
            type: Number
        },
        closeOnPressEscape: { // 是否支持ESC鍵退出
            type: Boolean,
            default: true
        },
        isClickToDisappear: { // 是否支持通過點擊遮罩層關(guān)閉
            type: Boolean,
            default: false
        }
    },
    emits: ['close', 'download', 'prevIndex', 'nextIndex'],
    setup(props, { emit }) {
        const global = getCurrentInstance().appContext.config.globalProperties
        const { nextZIndex } = useZIndex()
        const modes = { // 模式對象
            CONTAIN: {
                name: 'contain',
                icon: 'IconEpFullScreen',
            },
            ORIGINAL: {
                name: 'original',
                icon: 'IconEpScaleToOriginal',
            },
        }
        const mode = shallowRef(modes.ORIGINAL) // 模式
        const EVENT_CODE = { // 按鈕對象
            left: 'ArrowLeft', // 37
            up: 'ArrowUp', // 38
            right: 'ArrowRight', // 39
            down: 'ArrowDown', // 40
            esc: 'Escape',
            space: 'Backspace'
        }
        const imageViewer = ref<HTMLDivElement>()
        const data = reactive({
            index: 0, // 圖片索引，也是在數(shù)組中的位置
            loading: true, // 處理加載
            imgHeight: '', // 處理圖片高
            transform: {
                scale: 1, // 縮放比
                deg: 0, // 旋轉(zhuǎn)角度
                offsetX: 0,
                offsetY: 0,
                enableTransition: false // 是否需要過渡
            }
        })
        // 是否是火狐
        const isFirefox = (): boolean => /firefox/i.test(window.navigator.userAgent)
        // 鼠標滾輪事件，火狐的不同
        const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'
        const computedZIndex = computed(() => { // 計算z-index值
            return isNumber(props.zIndex) ? props.zIndex : nextZIndex()
        })
        const isSingle = computed(() => { // 是否是單張
            return props.urlList.length <= 1
        })
        const isFirst = computed(() => { // 是否是第一張
            return data.index === 0
        })
        const isLast = computed(() => { // 是否是最后一張
            return data.index === props.urlList.length - 1
        })
        const isFileType = computed(() => { // 判斷文件類型
            return (url: string) => {
                return fileType(url.split('?')[0])
            }
        })
        const mediaStyle = computed(() => { // 圖片css特效對象
            const { scale, deg, offsetX, offsetY, enableTransition } = data.transform
            let translateX = offsetX / scale
            let translateY = offsetY / scale
            switch (deg % 360) {
                case 90:
                case -270:
                    ;[translateX, translateY] = [translateY, -translateX]
                    break
                case 180:
                case -180:
                    ;[translateX, translateY] = [-translateX, -translateY]
                    break
                case 270:
                case -90:
                    ;[translateX, translateY] = [-translateY, translateX]
                    break
            }
            return {
                transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
                transition: enableTransition ? 'transform .3s' : ''
            }
        })
        const handleImgLoad = (e) => { // 處理加載圖片后的操作
            // 計算圖片等比例縮放后的寬高
            const { clientWidth, clientHeight } = document.querySelector('#image-viewer-canvas') // 當(dāng)前遮罩容器
            const { width, height } = transformImgRatio(e.target.width, e.target.height, clientWidth, clientHeight - 40) // 計算等比例縮放后的圖片寬高
            data.imgHeight = height + 'px'
            data.loading = false
        }
        const hide = () => { // 關(guān)閉
            emit('close')
        }
        const prev = () => { // 上一張
            if (!props.isInfinite && !data.index) return ElMessage({ type: 'info', message: '已經(jīng)是第一張了！' })
            data.index = (data.index - 1 + props.urlList.length) % props.urlList.length
            resetStyle()
            emit('prevIndex', data.index)
        }
        const next = () => { // 下一張
            if (!props.isInfinite && data.index === props.urlList.length - 1) return ElMessage({ type: 'info', message: '已經(jīng)是最后一張了！' })
            data.index = (data.index + 1 + props.urlList.length) % props.urlList.length
            resetStyle()
            emit('nextIndex', data.index)
        }
        const keydownHandler = (e: event) => { // 鍵盤事件
            switch (e.code) {
                case EVENT_CODE.esc: // Escape
                    props.closeOnPressEscape && hide()
                    break;
                case EVENT_CODE.left: // ArrowLeft
                    prev()
                    break;
                case EVENT_CODE.right: // ArrowRight
                    next()
                    break;
                case EVENT_CODE.up: // ArrowUp
                    handleActions('zoomIn')
                    break;
                case EVENT_CODE.down: // ArrowDown
                    handleActions('zoomOut')
                    break;
                case EVENT_CODE.space: // Backspace
                    toggleMode()
                    break
            }
            e.preventDefault()
        }
        const mousewheelHandler = (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => { // 鼠標滾輪事件
            const delta = e.wheelDelta ? e.wheelDelta : -e.detail // 考慮Firefox
            if (delta > 0) { // 向上
                handleActions('zoomIn', { zooRate: 1.2, enableTransition: false })
            } else { // 向下
                handleActions('zoomOut', { zooRate: 1.2, enableTransition: false })
            }
        }
        const handleActions = (action: any, option = {}) => { // 各類指令操作
            const { zoomRate, rotateDeg, enableTransition } = { // 定義常規(guī)特效
                zoomRate: 1.4,
                rotateDeg: 90,
                enableTransition: true,
                ...option,
            }
            switch (action) {
                case 'zoomOut': // 縮小
                    if (data.transform.scale > 0.2) data.transform.scale = parseFloat((data.transform.scale / zoomRate).toFixed(3))
                    break;
                case 'zoomIn': // 放大
                    if (data.transform.scale < 6) data.transform.scale = parseFloat((data.transform.scale * zoomRate).toFixed(3))
                    break;
                case 'anticlockwise': // 逆時針旋轉(zhuǎn)
                    data.transform.deg -= rotateDeg
                    break;
                case 'clockwise': // 順時針旋轉(zhuǎn)
                    data.transform.deg += rotateDeg
                    break;
            }
            data.transform.enableTransition = enableTransition
        }
        const resetStyle = () => { // 左右切換重置transform對象
            data.transform = { scale: 1, deg: 0, enableTransition: false }
        }
        const handleMediaLoad = (e: event) => { // 加載處理
            data.loading = false
        }
        const handleMediaError = () => { // 圖片 音頻失敗處理
            data.loading = false
        }
        const handlePlayError = (index: number) => { // 視頻失敗處理
            props.urlList[index] = props.urlList[index].split('?')[0] + '?v=' + new Date().getTime()
        }
        const download = (url: string) => { // 文件類型拋出url
            emit('download', url)
        }
        const toggleMode = () => {
            if (data.loading) return
            const modeNames = Object.keys(modes)
            const modeValues = Object.values(modes)
            const currentMode = mode.value.name
            const index = modeValues.findIndex((i) => i.name === currentMode)
            const nextIndex = (index + 1) % modeNames.length
            mode.value = modes[modeNames[nextIndex]]
            resetStyle()
        }
        const handleMouseDown = (e: MouseEvent) => { // 處理鼠標按下事件
            data.transform.enableTransition = false
            const { offsetX, offsetY } = data.transform
            const startX = e.pageX
            const startY = e.pageY
            // 拖拽事件
            const dragHandler = (ev: MouseEvent) => {
                data.transform = {
                    ...data.transform,
                    offsetX: offsetX + ev.pageX - startX,
                    offsetY: offsetY + ev.pageY - startY,
                }
            }
            // 添加鼠標移動事件監(jiān)聽
            const removeMousemove = useEventListener(document, 'mousemove', dragHandler)
            useEventListener(document, 'mouseup', () => {
                removeMousemove()
            })
            e.preventDefault()
        }
        watch(() => props.imgIndex, () => {
            data.index = props.imgIndex
        }, { immediate: true })
        onMounted(() => {
            // 優(yōu)化注冊事件監(jiān)聽
            useEventListener(document, 'keydown', keydownHandler)
            useEventListener(document, mousewheelEventName, mousewheelHandler)
            imageViewer.value?.focus?.()
        })
        return {
            ...toRefs(data),
            computedZIndex,
            mediaStyle,
            isFileType,
            isSingle,
            isFirst,
            isLast,
            mode,
            icons,
            hide,
            prev,
            next,
            handleImgLoad,
            handleActions,
            handleMediaLoad,
            handlePlayError,
            handleMediaError,
            toggleMode,
            download,
            handleMouseDown
        }
    }
})
</script>
<style lang="scss" scoped>
:deep(.el-image-viewer__canvas) {
    //height: calc(100% - 180px);
    align-items: center;
    height: calc(100% - 40px);
}
:deep(.el-image-viewer__actions) {
    height: 40px;
    right: 50px;
    top: 0;
    left: auto;
    z-index: inherit;
    transform: none;
    padding: 0;
    background: none;
    border-radius: 0;
}
:deep(.el-image-viewer__actions__divider) {
    display: none;
}
:deep(.el-image-viewer__next) {
    width: 64px;
    height: 100px;
    background: transparent;
    border-radius: 6px 0px 0px 6px;
    opacity: 0.8;
    right: 0;
    top: 45%;
    .el-icon {
        color: #999999;
        font-size: 50px;
    }
}
:deep(.el-image-viewer__prev) {
    width: 64px;
    height: 100px;
    background: transparent;
    border-radius: 0px 6px 6px 0px;
    opacity: 0.8;
    left: 0;
    top: 45%;
    .el-icon {
        color: #999999;
        font-size: 50px;
    }
}
.el-image-viewer__next:hover,
.el-image-viewer__prev:hover {
    background: #000000;
    opacity: 1;
}
:deep(.el-image-viewer__mask) {
    opacity: 0.8;
}
:deep(.el-image-viewer__close) {
    height: 40px;
    z-index: 56;
    top: 0;
    right: 10px;
    background: transparent;
}
.image-viewer-carousel {
    height: 140px;
    background: #000000;
    z-index: 50;
    padding: 20px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.image-viewer-header {
    background-color: #000000;
    box-sizing: border-box;
    border-spacing: 0;
    width: 100%;
    height: 40px;
    z-index: 55;
    position: relative;
    z-index: 55;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    .header-left {
        position: absolute;
    }
}
.header-file-icon {
    width: 24px;
    height: 50px;
    display: inline-block;
    margin-left: 20px;
    background-image: url(../../../../assets/svg/image-icon.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    /*這個是按從左往右，從上往下的百分比位置進行調(diào)整*/
    background-size: 100% 60%;
    /*按比例縮放*/
}
.header-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: top;
    margin: 0 20px;
}
.image-viewer-tips {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    min-width: 490px;
    padding: 35px 100px;
    line-height: 2em;
    border-radius: 5px;
    z-index: 56;
}
.image-unknown-file-type-view {
    display: inline-block;
    width: 96px;
    height: 96px;
    background-size: contain;
    background: url(../../../../assets/svg/file-icon.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.image-viewer-download {
    box-sizing: border-box;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 3.01px;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    font-variant: normal;
    font-weight: 400;
    height: 2.14285714em;
    line-height: 1.42857143;
    margin: 0;
    padding: 4px 10px;
    vertical-align: baseline;
    white-space: nowrap;
    text-decoration: none;
    margin: 20px 10px 0 10px;
    .icon-download {
        position: relative;
        top: 4px;
        background: url(../../../../assets/svg/download.svg) no-repeat 0 0;
        border: none;
        margin: 0;
        padding: 0;
        text-indent: -999em;
        vertical-align: text-bottom;
        display: inline-block;
        text-align: left;
        line-height: 0;
        position: relative;
        vertical-align: text-top;
        height: 16px;
        width: 16px;
    }
}
</style>

附屬

圖片等比例縮放算法（計算縮放后的寬高）

讓圖片能夠自適應(yīng)父容器的寬高，并且保證圖片不變形不溢出，那么就需要對圖片進行等比例縮放，拿到縮放后的寬高重新賦值即可，具體算法如下：

// 分別傳入圖片寬高、父容器寬高
const transformImgRatio = (imgWidth, imgHeight, containerWidth, containerHeight) => {
    let [
        // 用于設(shè)定圖片的寬和高
        tempWidth,
        tempHeight,
    ] = [
            0,
            0
        ]
    try {
        imgWidth = parseFloat(imgWidth)
        imgHeight = parseFloat(imgHeight)
        containerWidth = parseFloat(containerWidth)
        containerHeight = parseFloat(containerHeight)
    } catch (error) {
        throw new Error('抱歉，我只接收數(shù)值類型或者可以轉(zhuǎn)成數(shù)值類型的參數(shù)')
    }
    if (imgWidth > 0 && imgHeight > 0) {
        //原圖片寬高比例 大于 指定的寬高比例，這就說明了原圖片的寬度必然 > 高度
        if (imgWidth / imgHeight >= containerWidth / containerHeight) {
            if (imgWidth > containerWidth) {
                tempWidth = containerWidth
                // 按原圖片的比例進行縮放
                tempHeight = (imgHeight * containerWidth) / imgWidth
            } else {
                // 按照圖片的大小進行縮放
                tempWidth = imgWidth
                tempHeight = imgHeight
            }
        } else {  // 原圖片的高度必然 > 寬度
            if (imgHeight > containerHeight) {
                tempHeight = containerHeight
                // 按原圖片的比例進行縮放
                tempWidth = (imgWidth * containerHeight) / imgHeight
            } else {
                // 按原圖片的大小進行縮放
                tempWidth = imgWidth
                tempHeight = imgHeight
            }
        }
    }
    return { width: tempWidth, height: tempHeight }
}

到此這篇關(guān)于Vue3.0實現(xiàn)圖片預(yù)覽組件(媒體查看器)的文章就介紹到這了,更多相關(guān)Vue圖片預(yù)覽組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: