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

npm install viewerjs --save

<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>