vue实现多文件预览以及切换

要实现多文件预览并切换，可以结合Vue和第三方库来实现。以下是一种基于Viewer.js的实现方式：

安装Viewer.js

npm install viewerjs --save

创建组件

在Vue项目中创建一个组件，用于显示多个文件的预览。组件中需要包含一个用于切换文件的导航栏和一个用于显示文件的容器。

<template>
  <div>
    <nav>
      <ul>
        <li v-for="(file, index) in files" :key="index" @click="selectFile(index)">
          {{ file.name }}
        </li>
      </ul>
    </nav>
    <div ref="viewerContainer"></div>
  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import Viewer from 'viewerjs'

export default {
  props: {
    files: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      viewer: null,
      selectedFile: null
    }
  },
  mounted() {
    this.initViewer()
    this.selectFile(0)
  },
  methods: {
    initViewer() {
      const container = this.$refs.viewerContainer
      this.viewer = new Viewer(container, {
        toolbar: {
          prev: 1,
          next: 1
        }
      })
    },
    selectFile(index) {
      this.selectedFile = this.files[index]
      this.viewer.reset()
      this.viewer.update()
      this.viewer.view(index)
    }
  }
}
</script>
<style scoped>
nav {
  float: left;
  width: 20%;
  height: 100%;
  overflow-y: auto;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav li {
  padding: 10px;
  cursor: pointer;
}
nav li.active {
  background-color: #ddd;
}
div[ref="viewerContainer"] {
  float: left;
  width: 80%;
  height: 100%;
}
</style>

使用组件

在父组件中使用刚刚创建的多文件预览组件，并将需要预览的文件列表传递给组件。

<template>
  <div>
    <multi-file-preview :files="files"></multi-file-preview>
  </div>
</template>

<script>
import MultiFilePreview from './MultiFilePreview.vue'

export default {
  components: {
    MultiFilePreview
  },
  data() {
    return {
      files: [
        { name: 'file1.pdf', url: 'https://example.com/file1.pdf' },
        { name: 'file2.docx', url: 'https://example.com/file2.docx' },
        { name: 'file3.xlsx', url: 'https://example.com/file3.xlsx' }
      ]
    }
  }
}
</script>

在上述代码中，files数组包含需要预览的文件信息，包括文件名和文件URL。在多文件预览组件中，使用v-for指令循环遍历files数组，生成导航栏中的每个文件项，并为每个文件项绑定click事件，用于切换文件。在selectFile方法中，根据传入的索引值，将对应的文件设置为当前选中的文件，并更新Viewer.js实例的状态。在组件的mounted生命周期钩子中，调用initViewer方法初始化Viewer.js实例，并默认选中第一个文件。