编程语言
首页 > 编程语言> > 在 Vue 3 中怎么使用 el-image-viewer 组件来支持图片和视频的混合播放？

在 Vue 3 中怎么使用 el-image-viewer 组件来支持图片和视频的混合播放？

作者：互联网

在 Vue 3 中，如果你想要使用 el-image-viewer 组件来支持图片和视频的混合播放（例如在同一图像查看器中显示图片和视频），你可能需要自定义实现这一需求。

截至目前 el-image-viewer 组件本身主要还是针对图片的查看，因此对于视频的支持你可能需要进行一些工作。下面是一个简单的实现示例，展示如何创建一个自定义查看器，支持同时查看图片和视频。

1. 安装必要的依赖

首先，确保你已经安装了 Vue 3 和 Element Plus。

npm install vue@next element-plus

Bash

2. 创建自定义的 ImageVideoViewer 组件

你可以创建一个 ImageVideoViewer.vue 组件，并将图片和视频播放逻辑包含在内。

<template>
  <el-dialog :visible.sync="visible" class="image-video-viewer" width="70%">
    <div v-if="currentItem" class="viewer-content">
      <img v-if="isImage(currentItem.src)" :src="currentItem.src" alt="Image" />
      <video v-else :src="currentItem.src" controls autoplay />
    </div>
    <div class="viewer-controls">
      <button @click="prev">Previous</button>
      <button @click="next">Next</button>
      <button @click="close">Close</button>
    </div>
  </el-dialog>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  props: {
    items: {
      type: Array,
      required: true,
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const currentIndex = ref(0);

    const currentItem = computed(() => props.items[currentIndex.value]);

    const isImage = (src) => {
      return /\.(jpeg|jpg|gif|png)$/.test(src);
    };

    const prev = () => {
      if (currentIndex.value > 0) {
        currentIndex.value--;
      }
    };

    const next = () => {
      if (currentIndex.value < props.items.length - 1) {
        currentIndex.value++;
      }
    };

    const close = () => {
      currentIndex.value = 0;
      props.$emit('update:visible', false);
    };

    return {
      currentItem,
      isImage,
      prev,
      next,
      close,
    };
  },
};
</script>

<style scoped>
.viewer-content {
  text-align: center;
}

.viewer-controls {
  margin-top: 10px;
  text-align: center;
}
</style>

Vue

3. 使用自定义的 ImageVideoViewer 组件

然后在你的主要组件中使用这个 ImageVideoViewer 组件，并传递图片和视频数组。

<template>
  <div>
    <el-button type="primary" @click="openViewer">Open Viewer</el-button>
    <image-video-viewer
      v-model:visible="viewerVisible"
      :items="mediaItems"
    />
  </div>
</template>

<script>
import { ref } from 'vue';
import ImageVideoViewer from './ImageVideoViewer.vue';

export default {
  components: {
    ImageVideoViewer,
  },
  setup() {
    const viewerVisible = ref(false);
    const mediaItems = [
      { src: 'https://link_to_image1.jpg' },
      { src: 'https://link_to_video1.mp4' },
      { src: 'https://link_to_image2.jpg' },
      { src: 'https://link_to_video2.mp4' },
    ];

    const openViewer = () => {
      viewerVisible.value = true;
    };

    return {
      viewerVisible,
      mediaItems,
      openViewer,
    };
  },
};
</script>

Vue

4. 样式和功能优化

标签：
来源：